做养生网站怎么赚钱,织梦网站logo更改,wordpress 手机 图片,自闭症网站的建设意义文章目录 1 开发者文档2 基本标签2.1 排版标签2.2 语义化标签2.3 行内元素与块级元素2.4 文本标签2.5 常用标签补充 3 图片标签4 超链接标签4.1 跳转页面4.2 跳转文件4.3 跳转锚点4.4 唤起指定应用 5 列表5.1 有序列表5.2 无序列表5.3 自定义列表 6 表格6.1 基本结构6.2 表格标… 文章目录 1 开发者文档2 基本标签2.1 排版标签2.2 语义化标签2.3 行内元素与块级元素2.4 文本标签2.5 常用标签补充 3 图片标签4 超链接标签4.1 跳转页面4.2 跳转文件4.3 跳转锚点4.4 唤起指定应用 5 列表5.1 有序列表5.2 无序列表5.3 自定义列表 6 表格6.1 基本结构6.2 表格标签6.3 表格属性6.4 跨行跨列 1 开发者文档
W3C官网 www.w3c.orgW3School www.w3school.com.cnMDN developer.mozilla.org —— 平时用的最多。
2 基本标签
2.1 排版标签 例标题标签
!DOCTYPE html
html langenheadmeta charsetUTF-8title学习标题标签/title/headbody!--标题标签--h1一级标签/h1h2二级标签/h2h3三级标签/h3h4四级标签/h4h5五级标签/h5h6六级标签/h6/body
/html例 段落标签
p这是第一段
/p
p这是第二段
/p例div标签 divp置身移动互联时代人们在享受智能设备带来便利的同时也在一些场景中面临个人信息泄露风险。随着时间推移这样的风险日益呈现出新的表现形式。/pp一些APP声称看视频、玩游戏甚至走路都能赚钱但用户想提现却难上加难还容易泄露个人信息新型不法软件图标透明、没有名称在手机屏幕上十分隐蔽不仅不停推送广告还会收集并转卖用户隐私信息个人信息安全和隐私保护话题引发关注正说明其涉及群众切身利益问题不容小视。/p/div2.2 语义化标签
概念用特定的标签去表达特定的含义。原则标签的默认效果不重要后期可以通过CSS 随便控制效果语义最重要举例对于h1标签效果是文字很大不重要语义是网页主要内容很重要。优势 代码结构清晰可读性强。 有利于 SEO搜索引擎优化。 方便设备解析如屏幕阅读器、盲人阅读器等。
2.3 行内元素与块级元素 2.4 文本标签
1、 用于包裹词汇、短语等。 2、 通常写在排版标签里面。 3、 排版标签更宏观大段的文字文本标签更微观词汇、短语。 4、 文本标签通常都是行内元素。 例
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleHTML_常用的文本标签/titlestylespan{color: red;}/style
/head
bodyp预防电信诈骗请安装em国家反诈中心app/em。/pp当我们出门的时候一定要strong关好门窗/strong/pp前端三个框架为spanAngular、React、Vue/span。/p
/body
/html2.5 常用标签补充 3 图片标签 例
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleHTML_图片标签/title
/head
bodyimg width200 src奥特曼.jpg alt奥特曼你相信光吗img width200 src奥特曼.jpg alt奥特曼你相信光吗
/body
/html4 超链接标签 4.1 跳转页面
!--跳转其他网页--
a hrefhttps://www.jd.com target_black去京东/a!--跳转本地网页--
a href./10_HTML排版标签.html target_black去本地页面/a例
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title超链接_跳转页面/title
/head
bodya hrefhttps://miaosha.jd.com/ target_self去秒杀/aa hrefhttps://www.baidu.com/ target_blank去百度/aa href./10_HTML排版标签.html去排版标签/aa href./10_HTML排版标签.htmlimg width50 src./奥特曼.jpg alt奥特曼/a
/body
/html4.2 跳转文件
注意1若浏览器无法打开文件则会引导用户下载 注意2若想强制触发下载请使用download属性属性值即为下载文件的名称
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title超链接_跳转文件/title
/head
body!-- 都是浏览器可以直接打开的文件 --a href./resource/我的自拍.jpg看自拍/aa href./resource/小电影.mp4看小电影/aa href./resource/小姐姐.gif看小姐姐/aa href./resource/如何一夜暴富.pdf如何一夜暴富/a!-- 浏览器不可以直接打开的文件 --a href./resource/内部资源.zip内部资源/a!-- 浏览器可以打开但要强制触发下载 --a href./resource/小电影.mp4 download好看下载小电影/aa hrefhttps://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png点我看百度logo/a
/body
/html4.3 跳转锚点
锚点网页中的一个标记点
第一步设置锚点
!--第一种方式a标签配合name属性--
a nametest1/a!--第二种方式其他标签配合id属性--
h2 idtest2我是一个位置/h2注意1具有href属性的a标签是超链接具有name属性的a标签是锚点 注意2name和id都是区分大小写的且id最好别是数字开头
第二步跳转锚点
!-- 跳转到test1锚点--a href#test1去test1锚点/a!-- 跳到本页面顶部 --a href#回到顶部/a!-- 跳转到其他页面锚点 --a hrefdemo.html#test1去demo.html页面的test1锚点/a!-- 刷新本页面 --a href刷新本页面/a!-- 执行一段js,如果还不知道执行什么可以留空javascript:; --a hrefjavascript:alert(1);点我弹窗/a例
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title超链接_跳转锚点/title
/head
bodya href#htl看灰太狼/aa href#atm看奥特曼/ap我是一只羊一只很肥美的羊/pimg src./path_test/a/喜羊羊.jpg alt喜羊羊a namehtl/ap我是一只狼一只很邪恶的狼/pimg src./path_test/a/b/灰太狼.jpg alt灰太狼p idatm我是一只奥特曼一只很能打的奥特曼/pimg src./奥特曼.jpg alt奥特曼p我是一只怪兽一只很丑的怪兽/pimg src./path_test/怪兽.jpg alt怪兽p整体的介绍完毕了/pa href#回到顶部/aa href刷新页面/aa hrefjavascript:;点我弹窗/a
/body
/html4.4 唤起指定应用
通过a标签可以唤起设备应用程序
!-- 唤起设备拨号 --
a hreftel:10010电话联系/a!-- 唤起设备发送邮件 --
a hrefmailto:10010qq.com邮件联系/a
!-- 唤起设备发送短信 --
a hrefsms:10086短信联系/a5 列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化并以列表的样式显示出来以便浏览者能更快捷地获得相应的信息。
列表的分类无序列表、有序列表、定义列表
5.1 有序列表
!--有序列表
应用范围试卷、问答
--
olliJava/liliPython/liliC/li
/ol5.2 无序列表
!--无序列表
应用范围导航、侧边栏
--
ulliJava/liliPython/liliC/li
/ul5.3 自定义列表
!--自定义列表
dl标签
dt列表名称
dd列表内容应用范围公司网站底部
--
dldt学科/dtddJava/ddddPython/ddddC/dddt位置/dtdd江西/dddd湖北/dddd湖南/dd
/dl6 表格
6.1 基本结构
一个完整的表格由表格标题、表格头部、表格主体、表格脚注四部分组成
6.2 表格标签
table表格caption表格标题thead表格头部tbody表格主体tfoot表格注脚tr每一行th、td每个单元格备注表格头部中用th表格主体、表格注脚中用td 例
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title表格_整体结构/title
/head
bodytable border1!-- 表格标题 --caption学生信息/caption!-- 表格头部 --theadtrth姓名/thth性别/thth年龄/thth民族/thth政治面貌/th/tr/thead!-- 表格主体 --tbodytrtd张三/tdtd男/tdtd18/tdtd汉族/tdtd团员/td/trtrtd李四/tdtd女/tdtd20/tdtd满族/tdtd群众/td/trtrtd王五/tdtd男/tdtd19/tdtd回族/tdtd党员/td/trtrtd赵六/tdtd女/tdtd21/tdtd壮族/tdtd团员/td/tr/tbody!-- 表格脚注 --tfoottrtd/tdtd/tdtd/tdtd/tdtd共计4人/td/tr/tfoot/table
/body
/html6.3 表格属性 注意 例
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title表格_常用属性/title
/head
bodytable border1 width500 height500 cellspacing0!-- 表格标题 --caption学生信息/caption!-- 表格头部 --thead height50 aligncenter valignmiddletrth width50 height50 alignright valignbottom姓名/thth性别/thth年龄/thth民族/thth政治面貌/th/tr/thead!-- 表格主体 --tbody height520 aligncenter valignmiddletr height50 aligncenter valignmiddletd张三/tdtd男/tdtd18/tdtd汉族/tdtd团员/td/trtrtd李四/tdtd女/tdtd20/tdtd满族/tdtd群众/td/trtrtd王五/tdtd男/tdtd19/tdtd回族/tdtd党员/td/trtrtd alignright valigntop赵六/tdtd女/tdtd21/tdtd壮族/tdtd团员/td/tr/tbody!-- 表格脚注 --tfoot height50 aligncenter valignmiddletrtd/tdtd/tdtd/tdtd/tdtd共计4人/td/tr/tfoot/table
/body
/html6.4 跨行跨列
rowspan指定要跨的行数colspan指定要跨的列数
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title表格_跨行与跨列/title
/head
bodytable border1 cellspacing0caption课程表/captiontheadtrth项目/thth colspan5上课/thth colspan2活动与休息/th/tr/theadtbodytrtd星期/tdtd星期一/tdtd星期二/tdtd星期三/tdtd星期四/tdtd星期五/tdtd星期六/tdtd星期日/td/trtrtd rowspan4上午/tdtd3-2/tdtd3-3/tdtd3-4/tdtd3-5/tdtd3-6/tdtd3-7/tdtd rowspan4休息/td/trtrtd4-2/tdtd4-3/tdtd4-4/tdtd4-5/tdtd4-6/tdtd4-7/td/trtrtd5-2/tdtd5-3/tdtd5-4/tdtd5-5/tdtd5-6/tdtd5-7/td/trtrtd6-2/tdtd6-3/tdtd6-4/tdtd6-5/tdtd6-6/tdtd6-7/td/trtrtd rowspan2下午/tdtd7-2/tdtd7-3/tdtd7-4/tdtd7-5/tdtd7-6/tdtd7-7/tdtd rowspan2休息/td/trtrtd8-2/tdtd8-3/tdtd8-4/tdtd8-5/tdtd8-6/tdtd8-7/td/tr/tbody/table
/body
/html
