在网站上做封面,青岛网站建设公司怎么选,中小型企业网站优化,网站流量数据查询HTML4常用标签详解
概念#xff1a;用特定的标签#xff0c;去表达特定的含义。
原则#xff1a;标签的默认效果不重要#xff08;后期可以通过 CSS 随便控制效果#xff09;#xff0c;语义最重要#xff01;
举例#xff1a;对于 h1 标签#xff0c;效果是文字很…HTML4常用标签详解
概念用特定的标签去表达特定的含义。
原则标签的默认效果不重要后期可以通过 CSS 随便控制效果语义最重要
举例对于 h1 标签效果是文字很大不重要语义是网页主要内容很重要。
优势
代码结构清晰可读性强。
有利于 SEO搜索引擎优化。
方便设备解析如屏幕阅读器、盲人阅读器等。
一、排版标签
标签名标签含义单 / 双 标签h1 ~ h6文章标题双p文章段落双div没有任何含义用于整体布局生活中的包装袋。双
二、文本标签
标签名标签含义单 / 双 标签em要着重阅读的内容双strong十分重要的阅读内容语气比em重双span没有语义用于包裹短语的通用容器双
三、图片标签
标签名标签含义属性单 / 双 标签img图片src 图片路径又称图片地址—— 图片的具体位置双alt 图片描述src 图片路径又称图片地址—— 图片的具体位置alt 图片描述width 图片宽度单位是像素例如 200px 或 200height 图片高度 单位是像素例如 200px 或
alt 属性的作用 搜索引擎通过 alt 属性得知图片的内容。—— 最主要的作用。 当图片无法展示时候有些浏览器会呈现 alt 属性的值。 盲人阅读器会朗读 alt 属性的值。
#尽量不调整图片的宽度和高度会导致图片失真。
四、超链接
主要作用从当前页面进行跳转。
可以实现①跳转到指定页面、②跳转到指定文件也可触发下载、③跳转到锚点位置、④唤起指定
应用。
标签名标签含义属性单 / 双 标签a超链接href 指定要跳转到的具体目标。双target 控制跳转时如何打开页面常用值如下:_self 在本窗口打开。_blank 在新窗口打开。name 元素的名字写在 a 标签中也能设置锚点。id 元素的唯一 标识可用于设置锚点。
1.跳转到其他页面
!-- 跳转其他网页 --a hrefhttps://www.jd.com/ target_blank去京东/a!-- 跳转本地网页 --a href./10_HTML排版标签.html target_self去看排版标签/a2.跳转到文件
!-- 浏览器能直接打开的文件 --
a href./resource/自拍.jpg看自拍/a
!-- 浏览器不能打开的文件会自动触发下载 --
a href./resource/内部资源.zip内部资源/a
!-- 强制触发下载若想强制触发下载请使用 download 属性属性值即为下载文件的名称。 --
a href./resource/小电影.mp4 download电影片段.mp4下载电影/a3. 跳转到锚点
什么是锚点—— 网页中的一个标记点。
具体使用方式
–第一步设置锚点
!-- 第一种方式a标签配合name属性 --
a nametest1/a
!-- 第二种方式其他标签配合id属性 --
h2 idtest2我是一个位置/h2–第二步跳转锚点
!-- 跳转到test1锚点--
a href#test1去test1锚点/a
!-- 跳到本页面顶部 --
a href#回到顶部/a
!-- 跳转到其他页面锚点 --
a hrefdemo.html#test1去demo.html页面的test1锚点/a
!-- 刷新本页面 --
a href刷新本页面/a4. 唤起指定应用
通过 a 标签可以唤起设备应用程序。
!-- 唤起设备拨号 --
a hreftel:10010电话联系/a
!-- 唤起设备发送邮件 --
a hrefmailto:10010qq.com邮件联系/a
!-- 唤起设备发送短信 --
a hrefsms:10086短信联系/a五、列表
1. 有序列表ordered list – ol
概念有顺序或侧重顺序的列表。
h2要把大象放冰箱总共分几步/h2
ol
li把冰箱门打开/li
li把大象放进去/li
li把冰箱门关上/li
/ol2. 无序列表unordered list – ul
概念无顺序或不侧重顺序的列表。
h2我想去的几个城市/h2
ul
li成都/li
li上海/li
li西安/li
li武汉/li
/ul3. 列表嵌套
概念列表中的某项内容又包含一个列表注意嵌套时请务必把解构写完整。
h2我想去的几个城市/h2ulli成都/lilispan上海/spanulli外滩/lili杜莎夫人蜡像馆/lilia hrefhttps://www.opg.cn/东方明珠/a/lili迪士尼乐园/li/ul/lili西安/lili武汉/li/ul4. 自定义列表defined list – dl
概念所谓自定义列表就是一个包含术语名称以及术语描述的列表。一个 dl 就是一个自定义列表一个 dt defined title就是一个术语名称一个 dd defined describe就是术语描述可以有多
个。
h2如何高效的学习/h2
dldt做好笔记/dtdd笔记是我们以后复习的一个抓手/dddd笔记可以是电子版也可以是纸质版/dddt多加练习/dtdd只有敲出来的代码才是自己的/dddt别怕出错/dtdd错很正常改正后并记住就是经验/dd
/dl六、表格
1. 基本结构 一个完整的表格由表格标题、表格头部、表格主体、表格脚注四部分组成。 表格涉及到的标签
table 表格
caption 表格标题
thead 表格头部
tbody 表格主体
tfoot table foot表格注脚
tr table row每一行
th table head、 tdtable data 每一个单元格备注表格头部中用 th 表格主体、表格脚注中用 td
3.具体编码
table 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男/tdtd20/tdtd回族/tdtd党员/td/trtrtd赵六/tdtd女/tdtd21/tdtd壮族/tdtd团员/td/tr
/tbody
!-- 表格脚注 --
tfoottrtd/tdtd/tdtd/tdtd/tdtd共计4人/td/tr
/tfoot
/table2. 常用属性 七、补充 注意点
不要用 br 来增加文本之间的行间隔应使用 p 元素或后面即将学到的 CSS
margin 属性。 hr 的语义是分隔如果不想要语义只是想画一条水平线那么应当使用 CSS 完成。
八、表单
概念一个包含交互的区域用于收集用户提供的数据。
1. 基本结构 form actionhttps://www.baidu.com/s target_blank methodgetinput typetext namewdbutton去百度搜索/button
/form2. 常用表单控件
① 文本输入框
input typetext常用属性如下
name 属性数据的名称。
value 属性输入框的默认输入值。
maxlength 属性输入框最大可输入长度。
② 密码输入框
input typepassword常用属性如下
name 属性数据的名称。
value 属性输入框的默认输入值一般不用无意义。
maxlength 属性输入框最大可输入长度。
③ 单选框
input typeradio namesex valuefemale女
input typeradio namesex valuemale男常用属性如下
name 属性数据的名称注意想要单选效果多个 radio 的 name 属性值要保持一致。
value 属性提交的数据值。
checked 属性让该单选按钮默认选中。
④ 复选框
input typecheckbox namehobby valuesmoke抽烟
input typecheckbox namehobby valuedrink喝酒
input typecheckbox namehobby valueperm烫头常用属性如下
name 属性数据的名称。
value 属性提交的数据值。
checked 属性让该复选框默认选中。
⑤ 隐藏域
input typehidden nametag value100用户不可见的一个输入区域作用是 提交表单的时候携带一些固定的数据。
name 属性指定数据的名称。
value 属性指定的是真正提交的数据。
⑥ 提交按钮
input typesubmit value点我提交表单
button点我提交表单/button注意
button 标签 type 属性的默认值是 submit 。button 不要指定 name 属性input 标签编写的按钮使用 value 属性指定按钮文字。
⑦ 重置按钮
input typereset value点我重置
button typereset点我重置/button注意点
button 不要指定 name 属性input 标签编写的按钮使用 value 属性指定按钮文字。
⑧ 普通按钮
input typebutton value普通按钮
button typebutton普通按钮/button注意点普通按钮的 type 值为 button 若不写 type 值是 submit 会引起表单的提交。
⑨文本域
textarea namemsg rows22 cols3我是文本域/textarea常用属性如下
rows 属性指定默认显示的行数会影响文本域的高度。cols 属性指定默认显示的列数会影响文本域的宽度。不能编写 type 属性其他属性与普通文本输入框一致。
⑩ 下拉框
select namefromoption value黑黑龙江/optionoption value辽辽宁/optionoption value吉吉林/optionoption value粤 selected广东/option
/select常用属性及注意事项
name 属性指定数据的名称。option 标签设置 value 属性 如果没有 value 属性提交的数据是 option 中间的文
字如果设置了 value 属性提交的数据就是 value 的值建议设置 value 属性
option 标签设置了 selected 属性表示默认选中。
3. 禁用表单控件
给表单控件的标签设置 disabled 既可禁用表单控件。
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性
4.label 标签
label 标签可与表单控件相关联关联之后点击文字与之对应的表单控件就会获取焦点。
两种与 label 关联方式如下
让 label 标签的 for 属性的值等于表单控件的 id 。把表单控件套在 label 标签的里面。
总结 九、框架 iframe 标签的实际应用
在网页中嵌入广告。与超链接或表单的 target 配合展示不同的内容。
十、hTML实体
在 HTML 中我们可以用一种特殊的形式的内容来表示某个符号这种特殊形式的内容就是 HTML 实
体。比如小于号 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符我们必须
在 HTML 源码中插入字符实体。
字符实体由三部分组成一个 和 一个实体名称或者一个 # 和 一个实体编号最后加上一
个分号 ; 。 完整实体列表请参考HTML Standard (whatwg.org)
十一、HTML****全局属性
常用的全局属性 完整的全局属性请参考全局属性 - HTML**超文本标记语言** | MDN (mozilla.org)
十二、meta元信息 配置字符编码 针对 IE 浏览器的兼容性配置。 针对移动端的配置 配置网页关键字 配置网页描述信息 针对搜索引擎爬虫配置 配置网页作者 配置网页生成工具 配置定义网页版权信息 配置网页自动刷新
完整的网页元信息请参考文档级元数据元素 | MDN
十三、总结
