焦作市建设银行网站,企业网站免费建设,北京中关村在线官网,制作动画的网站文章目录基础知识什么是HTMLW3C标准在IDEA中创建一个html文件HTML的基本结构网页基本信息网页的基本标签图像标签链接标签文本链接图片链接图片格式锚链接功能性链接其他基本标签块元素和行内元素标签对照表列表HTML3种列表有序列表无序列表定义列表HTML学习中的误区表格标签基…
文章目录基础知识什么是HTMLW3C标准在IDEA中创建一个html文件HTML的基本结构网页基本信息网页的基本标签图像标签链接标签文本链接图片链接图片格式锚链接功能性链接其他基本标签块元素和行内元素标签对照表列表HTML3种列表有序列表无序列表定义列表HTML学习中的误区表格标签基本结构补充表格完整结构表单input标签表单textarea标签表单select和option多媒体插入音频、视频和flash插入背景音乐表单的应用补充增强鼠标可用性表单的初级验证页面结构分析内联框架设置浮动框架是否显示滚动条scrolling进阶HTML、XHTML和HTML5div和spanid和class浏览器标题栏小图标语义化一简介二标题语义化三图片语义化(四)表格语义化五表单语义化六其他语义化七语义化验证HTML5舍弃的标签HTML5一、什么是 HTML5二、HTML5 新增标签多媒体音频标签多媒体视频标签多媒体标签总结新增 input 标签新增表单属性基础知识
什么是HTML
Hyper Text Markup Language超文本标记语言
W3C标准
W3CWorld Wide Web Consortium万维网联盟
W3C标准包括
结构化标准语言Html、Xml表现标准语言CSS行为标准DOM、ECMASript
在IDEA中创建一个html文件
1、首先可以将创建好的工程中的src文件夹删除 2、新建一个Directory即文件夹起名 3、在其中new一个html文件 4、右上角的浏览器标识点击可以用对应的浏览器打开我们写的代码对应的网页如果安装了显示的浏览器
HTML的基本结构 网页基本信息
1、添加注释的快捷键crtl/ 2、所有网页内容必须写在htmlhtmlhtml中 3、【补充】SEO定义在掌握搜索引擎规则的前提下对网站进行内部以及外部的调整以及优化使网站在搜索引擎中的关键词排名靠前获取更多的流量。
!--DOCTYPE告诉浏览器我们要使用什么规范 --!DOCTYPE html
html langen
!--head标签代表网页头部--
head
!-- meta是描述性标签用来描述网站的一些信息 --
!-- meta一般用来做SEO--meta charsetUTF-8meta namekeywords content狂神说Javameta namedescription content学习Java
!-- title标签代表网页标题--titleTitle/title
/head
body/body
/html网页的基本标签
标题标签
h1一级标签/h1
h2二级标签/h2
h3三级标签/h3
h4四级标签/h4
h5五级标签/h5
h6六级标签/h6样式
段落标签
!--一个p标签就是一段--
pHello/p
pworld/p可以通过先输入一个p之后按Tab键就可以补全p标签 换行标签
!--虽然换行了但还是同一段。是自闭合标签--
Hello br/
world br/和段落标签样式的区别
水平线标签
hr/字体样式标签
!--粗体、斜体--
粗体strongI love you./strong
斜体emI love you./em特殊符号
!--特殊符号--
空格nbsp;
大于号gt;
小于号lt;
版权符号copy;
!--
多行
注释
--br/
空nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;格
br/
空gt;格
br/
空lt;格
br/
空copy;格样式 空格符号记忆方式以开始以结尾可以通过提示查看 图像标签 BMP位图 图像的替代文字如果图像没加载出来显示的文字 鼠标悬停提示文字把鼠标放在图片上显示的文字
先创建一个文件夹起名为resources用于存储相关资源在其中又新建了一个image文件夹用于存储图片资源
地址 用 …/ 代表上一级目录
img src../resources/image/1.jpg alt吉大照片title悬停文字width300height500加载失败时 其中src和alt是必填的 链接标签 文本链接
!--
a标签
herf必填表示要跳转到哪个页面
target:表示窗口在哪里打开_blank 在新标签页打开_self 在当前页面打开_parent_top
--
a href图像标签学习.html点击我跳转到图片/a
a hrefhttps://www.bilibili.com/点击我跳转到bilibili/a图片链接
图片格式
虽然图片格式这一节知识比较多大部分我们只需要了解就可以了我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。
1、JPG可以很好处理大面积色调的图像如相片、网页一般的图片。
2、PNG格式图片体积小而且无损压缩能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差但是可以制作动画。
!--
src:图片地址
alt:加载失败时显示
title:鼠标悬停时的文字
width:宽度
height:高度
--
img src../Resources/image/Cover.jpg altA-SOUL titleCover width1000!--这段代码的意思是创建了一个图片链接跳转到firstweb.html这个界面--
a hreffirstweb.htmlimg src../resources/image/1.jpg alt吉大照片title悬停文字width300height500
/a锚链接
!--
1.需要一个锚标记
2.跳转到标记
3.符号#后面加要转转的标记
--
a nametop顶部/abr
a href#top回到顶部/a
a namedown底部/a
a href链接标签.html#down回到链接标签底部/actrld表示复制这行内容到下一行 功能性链接
邮件链接: mailto:邮箱地址 QQ推广链接
a hrefmailto:2273038475qq.com点击联系我/a
a target_blank hrefhttp://wpa.qq.com/msgrd?v3uin2273038475siteqqmenuyesimg border0 srchttp://wpa.qq.com/pa?p2:2273038475:53 alt点击这里给我发消息 title点击这里给我发消息/
/a其他基本标签
head标签代表页面的“头”定义一些特殊内容这些内容往往都是“不可见内容”在浏览器不可见。
head内部标签 body标签 body标签代表页面的“身”定义网页展示内容这些内容往往都是“可见内容”在浏览器可见。 后续课程讲解的标签都是在标签内部的各种标签。
块元素和行内元素
(1)、HTML元素根据浏览器表现形式分为两类①块元素②行内元素
(2)、块元素特点
独占一行排斥其他元素跟其位于同一行包括块元素和行内元素块元素内部可以容纳其他块元素或行元素
常见块元素有h1~h6、p、hr、div等。
(3)、行内元素特点
可以与其他行内元素位于同一行行内内部可以容纳其他行内元素但不可以容纳块元素不然会出现无法预知的效果
常见行内元素有strong、em、span等。
标签对照表 列表 HTML3种列表
列表有3种有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用而定义列表比较少用。在实际应用中最常用的是无序列表请大家重点掌握。
目录列表和菜单列表已经被废除大家可以直接忽略这两种列表。
有序列表
!--有序ordered列表list--
olliJAVA/liliPython/liliC/liliC#/li
/ol属性type
可以通过type属性对前面的序号样式进行调整
无序列表
无序列表是三个列表中最为重要的列表。
语法
ul type列表项符号li无序列表项/lili无序列表项/lili无序列表项/li/ul属性type
!--无序unordered列表list--
!--
应用范围导航、侧边栏
--
ulli高等数学/lili大学英语/lili高级语言程序设计/lili思想道德与法治/li
/ul定义列表
语法
dldt定义名词/dtdd定义描述/dd……/dl说明 dl即“definition list定义列表” dt即“definition term定义名词”而 dd即“definition description定义描述”。
在该语法中 dl标记和 /dl标记分别定义了定义列表的开始和结束 dt后面添加要解释的名词而在 dd后面则添加该名词的具体解释。
!--自定义defined列表list--
!--
dl:标签
dt:列表名称
dd:列表内容
应用范围公司网站底部
--
dldt学科/dtddJAVA/ddddPython/ddddC/ddddC#/dddt城市/dtdd北京/dddd上海/dddd天津/dddd深圳/dd
/dlHTML学习中的误区
学习HTML的目的就是在你需要的地方用到符合语义的标签把标签用“对”这才是HTML学习的目的。例如一段文字应该使用p标签而不是使用div标签或者其他标签。
网页语义结构良好对于搜索引擎来说也是极为重要的一点。
表格
标签
表格基本标签 表格结构标签
基本结构 table、 tr和 td是HTML表格最基本的3个标签其他标题标签 caption、表头单元格 th可以没有但是这3者必须要有。
语法
tabletrtd单元格1/tdtd单元格2/td/trtrtd单元格1/tdtd单元格2/td/tr/table说明 table和 /table标记着表格的开始和结束 tr和 /tr标记着行的开始和结束在表格中包含几组 tr /tr就表示该表格为几行。 td和 /td标记着单元格的开始和结束。
补充
1、边框——border
2、合并行和合并列 合并行使用td标签的rowspan属性而合并列则用到td标签的colspan属性。
语法 td rowspan“跨度的行数” td colspan“跨度的列数”
!--表格table--
!--
行(row) tr
列 td
border:边框
--
table border1tr!--colspan 跨列--td1.1/tdtd colspan21.2/td/trtr!--rowspan 跨行--td rowspan22.1/tdtd2.2/tdtd2.3/td/trtrtd3.2/tdtd3.3/td/tr
/table表格完整结构
表格完整结构应该包括表格标题caption、表头thead、表身tbody和表脚tfoot4部分。
表格语义化之后使得代码更清晰和更利于后期维护。
tablecaption表格标题/caption!--表头--theadtrth表头单元格1/thth表头单元格2/th/tr/thead!--表身--tbodytrtd标准单元格1/tdtd标准单元格2/td/trtrtd标准单元格1/tdtd标准单元格2/td/tr/tbody!--表脚--tfoottrtd标准单元格1/tdtd标准单元格2/td/tr/tfoot/table说明 thead、 tbody和 tfoot这三个标签分别表示表头、表身、表脚。th表示表头单元格th表示表身单元格。每一对“ tr /tr”表示一行。
表单
表单form标签共有4个 input、 textarea、 select和 option。其中 select和 option是配合使用的。
在 form和 /form中间添加其他内容form标签中的参数method和action是必填的
参数
action:表示向何处发送表单数据可以是网站也可以是一个请求处理地址method:规定如何发送表单数据提交方式 get:可以在url中看到提交的信息不安全但高效不能传输大文件post:无法在url中看到提交的信息比较安全可以传输大文件。
form actiontest01.html methodgetinput标签表单
大部分表单都是用input标签完成的。
语法 input type“表单类型”/
参数
value:默认初始值maxlength:最多能输入几个字符size:文本框长度
p账号input typetext nameusername valueadmin maxlength10 size30/pp性别!--单选框标签input typleradiovalue:单选框的值name:表示组name一样表示同一组同时只能选中一个checked:默认选中--input typeradio namesex valuemale男input typeradio namesex valuefemale checked女/pp爱好!--多选框input typecheckboxchecked:默认选中--input typecheckbox namehobby valuesleep睡觉input typecheckbox namehobby valuecode checked敲代码input typecheckbox namehobby valuegame打游戏input typecheckbox namehobby valuestudy学习/pp!--文件域input typefile--input typefile namefileinput typebutton nameupload value上传/pp邮箱!--邮箱input typeemail--input typeemail namemy-email/ppURL!--URL input typeurl--input typeurl namemy-url/pp数字!--数字input typenumbermax:最大值min:最小值step:步长--input typenumber namenum max100 min0 step10/pp音量!--滑块input typerange--input typerange min0 max100 namevoice step2/pp搜索!--搜索框input typesearch--input typesearch namesearch/pp按钮!--普通按钮button--input typebutton namebtn1 value点我br!--图片按钮image具有submit功能--input typeimage src../Resources/image/Cover.jpg namebn2 width100/pp!--提交按钮submit--input typesubmit value提交!--重置按钮reset--input typereset value清空/ptextarea标签表单
(1)、多行文本框
语法 textarea rows“行数” cols“列数”多行文本框内容 /textarea
textarea name id cols30 rows10/textarea表现形式如下:
p反馈!--文本域textareacols:列数rows:行数--textarea nameresponse cols50 rows20在这里填写反馈/textarea/p23种文本框对比
单行文本框和密码文本框使用标签而多行文本框使用 textarea标签。
①单行文本框
语法 input type“text” value“默认文字” size“文本框长度” maxlength“最多输入字符数”/
①密码文本框
语法 input type“password”
①多行文本框
语法 textarea rows“行数” cols“列数”多行文本框内容 /textarea
select和option
下拉列表由标签和标签配合使用。
语法
select multiplemutiple size可见列表项的数目option value选项值 selectedselected选项显示的内容/option……option value选项值选项显示的内容/option/selectp下拉框!--下拉框selectoption:选项selected:默认选中--select name列表名称option value选项的值1选项1/optionoption value选项的值2选项2/optionoption value选项的值3 selected选项3/optionoption value选项的值4选项4/optionoption value选项的值5选项5/option/select/p多媒体
src:资源路径 controls:控制条 autoplay:自动播放
video src../Resources/video/超级敏感.mp4 controls autoplay/videoaudio src../Resources/audio/超级敏感.mp3 controls autoplay/audio插入音频、视频和flash
在网页中插入音频、视频和flash都是使用embed标签。
语法 embed src“多媒体文件地址” width“播放界面的宽度” height“播放界面的高度” /embed
说明
多媒体文件地址可以是相对地址也可以是绝对地址。
width和height使用px作为单位。
插入背景音乐
为某个网页设置背景音乐使用的是bgsound标签。不过bgsound标签只适用于IE浏览器在Firefox等浏览器中未必适用。
设置网页背景音乐时常用的方法除了使用bgsound标签还有使用embed标签和object标签。
语法 bgsound src“背景音乐的地址”/
说明
loop2表示重复2次loop“infinite表示无限次循环播放也可以使用loop”-1表示无限次循环播放。
表单的应用 form actiontest01.html methodgetp!--增强鼠标可用性--!--label标签for:要聚焦到的控件的id--label formark点我聚焦到文本框/labelinput typetext nametext idmark/pp!--只读readonly--input typetext value只给看不给改 readonly/pp!--禁用disabled--input typecheckbox namea未选中可改input typecheckbox namea checked disabled已选中只读改不了input typecheckbox namea checked已选中可改input typebutton value点不了 disabled/pp!--隐藏域hidden--input typebutton value看不见我但我依然存在 hiddeninput typebutton value看得见我/p
/form补充增强鼠标可用性
意思是在之前的表单中只有点击输入框才能输入数据但是在有的表单中能够实现点击输入框前的文字自动选择后面对应的输入框
p!--增强鼠标可用性--!--label标签for:后面跟的是一个id--label formark点我聚焦到文本框/labelinput typetext nametext idmark/p表单的初级验证 !DOCTYPE html
html langen
headmeta charsetUTF-8title初级表单验证/title
/head
body
form actiontest01.html methodget!--提示信息placeholder--p用户名input typetext nameusername placeholder请输入用户名/p!--必填项required--p密码input typepassword namepassword required/p!--正则表达式--pURLinput typetext nameurl pattern/^(https?:\/\/)?([\da-z\.-])\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ 或 [a-zA-z]://[^\s]*/ppinput typesubmit/p
/form
/body
/html页面结构分析
主要使用的是header、footer、nav
内联框架
浮动框架是一种较为特殊的框架它是在浏览器窗口中嵌套的子窗口整个页面并不一定是框架页面但要包含一个框架窗口。 iframe框架可以完全由设计者定义宽度和高度并且可以放置在一个网页的任何位置这极大地扩展了框架页面的应用范围。 frameset生成的框架结构是依赖上级空间尺寸的它的宽度或者高度必须有一个和上级框架相同。而 iframe浮动框架可以完全由指定宽度和高度决定。
语法 src属性是iframe的必须属性它定义浮动框架页面的源文件地址。
iframe src链接标签.html namehaha frameborder0 width500/iframe
!--在a标签中使用target属性以标识符为haha的iframe标签的格式打开页面--
a href视频与音频.html targethaha点击跳转视频与音频/a设置浮动框架是否显示滚动条scrolling
对于浮动框架iframe的的滚动条我们可以使用scrolling属性来控制。scrolling属性有3种情况根据需要显示、总是显示和不显示。
语法 iframe src“浮动框架的源文件” width“浮动框架的宽” height“浮动框架的高” scrolling“取值” /iframe
说明
scrolling属性取值如下
进阶
HTML、XHTML和HTML5
一HTML 和 XHTML HTML,全称HyperText Mark-up Language (超文本标记语言)是构成网页文档的 主要语言。我们常说的HTML指的是HTML 4.01。
XHTML,全称 Extensible HyperText Mark-up Language (扩展的超文本标记语言), 它是XML风格的HTML 4.01,我们可以称之为更严格、更纯净的HTML 4.01。
HTML语法书写比较松散利于开发者编写。但是对于机器如电脑、手机等来说语法越松散处理起来越困难。因此为了让机器更好地处理HTML,我们才在HTML基础上引入了 XHTML
XHTML相对于HTML来说在语法上更加严格。XHTML和HTML主要区别如下。
1、XHTML标签必须闭合。
在XHTML中所有标签必须闭合例如“ p /p “ div /div”等。此外空标签也需要闭合例如 br要写成 br/。
错误写法 p欢迎来到绿叶学习网
正确写法 p欢迎来到绿叶学习网 /p
2、XHTML标签以及属性必须小写。
在XHTML中所有标签以及标签属性必须小写不能大小写混合也不能全部都是大 写。不过标签的属性值可以大写。
错误写法 Body DIV /DlV /Body
正确写法 body div /div /body
3、XHTML标签属性必须用引号。
在XHTML中标签属性值必须用引号括起来单引号、双引号都可以。
错误写法 input idtxt typetext/
正确写法 input id“txt” type“text”/
下面是一个完整的XHTML文档。
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
headtitle/title
/head
bodyp“span stylefont-weight:bold;color:Red;视觉化思考/span”能以独特而有效的方式让你的心有更大的空间来解决问题。/p
/body
/html(二HTML5 HTML指的是HTML 4.01, XHTML是HTML的过渡版本XHTML是XML风格的HTML 4.01。而HTML 5指的是下一代的HTML,也就是HTML 4.01的升级版。
不过HTML 5已经不再是单纯意义上的标签了它已经远远超越了标签的范畴。HTML 5 除了新增部分标签之外还增加了一组技术包括canvas、SVG、WebSocket.本地存储等。这些新增的技术都是使用JavaScript来操作。也就是说HTML 5使得HTML从一门“标记语言” 转变为一门“编程语言”。
对于HTML 5中的新技术在此不做详细介绍。单纯从新增的标签上来看HTML 5有 以下几个特点。
1、文档类型说明
基于HTML 5设计准则中的“化繁为简”原则页面的文档类型!DOCTYPE被极大地 简化了。
XHTML文档声明如下 !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http:// www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdn
HTML5文档声明如下 !DOCTYPE html
2、标签不再区分大小写 div绿叶学习网 /DIV
上面这种写法也是完全符合HTML5规范的。但是在实际开发中建议所有标签以及属性都采用小写方式。
3、允许属性值不加引号 div idwrapper styleco1or: red 绿叶学习网 /div
上面这种写法也是完全符合HTML5规范的。但是在实际开发中建议标签所有属性值都加引号单引号或双引号都可以。
input typetext readonly/
input typecheckbox checked/上面两句代码等价于
input typetext readonlyreadonly/
input typecheckbox checkedchecked/在HTML 5中可以省略属性值的属性如表所示。 一句话概括 HTML、XHTML 和 HTML 5 就是HTML 指的是 HTML 4.01, XHTML 是HTML的过渡版HTML5是HTML的升级版。 div和span
对于div和span这两个元素不少新手也不知道它们之间有什么区别使用起来也很随便。因此这里有必要简单介绍一下。
div和span没有任何语义,正是因为没有语义这两个标签一般都是配合CSS来定义元素 样式的。
div和span区别如下
(1 ) div是块元素可以包含任何块元素和行内元素不会与其他元素位于同一行span 是行内元素可以与其他行内元素位于同一行。
(2 ) div常用于页面中较大块的结构划分然后配合CSS来操作span 一般用来包含文字等, 它没有结构的意义纯粹是应用样式。当其他行内元素都不适合的时候可以用span来配合CSS 操作。
其实除了 div和span外还有一个label标签。div和span是无语义标签但label 是有语义标签。label 只适用于表单中用于显示在输入控件旁边的说明性文字。
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
headtitle/title
/head
bodyp“span stylefont-weight:bold;color:Red;视觉化思考/span”能以独特而有效的方式让你的心有更大的空间来解决问题。/p
/body
/html在这个例子中我们想要对“视觉化思考”这几个文字加粗或者改变颜色此时可以 使用span包含文字然后再进行样式修改。事实上span标签往往都是用来配合CSS来 修饰元素的。
id和class
id和class是HTML元素中两个最基本的公共属性。一般情况下id和class都用来选择元素以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感到很迷茫不知道什么时候用id,什么时候用class,甚至随便使用。
一id 属性 id属性具有唯一性也就是说在一个页面中相同的id只允许出现一次。W3C建议对 于页面关键的结构或者大结构我们才使用id。所谓的关键结构指的是诸如LOGO、导航、 主体内容、底部信息栏等结构。对于一些小地方还是建议使用class属性。
我们知道搜索引擎识别一个页面结构是根据标签的语义以及id属性来识别的。因此 id属性不要轻易使用。此外id的命名也十分关键特别是对搜索引擎优化而言。对于id和 class的命名我们在CSS进阶部分会详细介绍。
二class属性 class,顾名思义就是“类”。它釆用的思想跟C、Java等编程语言中的“类”相似。 我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同class的元 素具有相同的CSS样式。
如果你要为两个或者两个以上元素定义相同的样式建议使用class属性。因为这样可以减少大量的重复代码。
注意对于一个元素而言我们可以定义多个class。 一般来说定义多个class的目的在于一般用一个class抽取公共样式然后用另外一个class定义单独样式。 对于id和class,我们总结一下对于页面关键结构建议使用id对于小地方建议使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作也建议加上id.以便搜索引擎识别页面结构。 浏览器标题栏小图标
在浏览网页的时候我们会发现几乎所有网站的页面在浏览器标题栏前面都会有一个小 图标
想要实现这个效果我们只需要在head标签添加一个link标签即可。
语法
link relshortcut icon typeimage/x-icon href../resources/image/music.ico/说明
rel和type这两个属性的取值是固定形式无需多讲。href属性取值为小图标的地址, 这个地址是根据小图标在站点文件夹路径而定的跟图片引用路径是一样的道理。
这里注意一下小图标格式是.ico,而不是.jpeg、.png、.gif等格式。对于.ico格式的图标制作我们可以搜索一下“在线icon,会发现很多不错的在线工具大家可以收藏一下。
语义化
一简介
由于HTML简单很多初学者对它存在一种偏见觉得它没多少东西因此在学习的过程中随便对待。其实学习HTML的重点不在于掌握了多少标签而是在于掌握标签的语义 以及如何编写一个语义结构良好的页面。
在实际开发过程中很多人由于对标签语义不熟悉常常用某一个标签代替另外一个标签来实现某些效果。
举例
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlheadstyle typetext/css.body {font-family: 微软雅黑;font-size: 14px;}.content {width: 300px;padding: 10px;border: 1px dashed gray;}.content div {font-size: 16px;font-weight: bold;height: 24px;line-height: 24px;}/style
/headbodydiv classcontentdivweb 前端开发 /divpweb前端开发最核心3个技术HTML、CSS和JavaScript HTML控制网页的 结构CSS控制网页的样式JavaScript控制网页的行为。/p/div
/body/html在浏览器预览效果如图所示。
对于上面的标题效果正确的做法应该是
使用h1 ~ h6标签来实现但这里却使用div 来代替了。虽然页面效果一样但是这种“用某一个标签代替另外一个标签来实现相同效果”的做法是完全不可取的因为它违背了 HTML这门语言的初衷。
HTML的精髓就在于标签的语义。在HTML中大部分标签都有它自身的语义例如p标签表示的是paragraph,标记的是一个段落hl标签表示“headerl”,标记的是一个最高级标题……而div和span是无语义的标签我们应该尽可能少用。
HTML很简单因此很多初学者往往忽略了它的目的和重要性。我们学习HTML并不 是看自己学了多少标签更重要的是在你需要的地方能否用到正确的语义化标签。把标签用在对的地方这才是HTML学习的目的所在。
我们都知道前端最核心的技术是HTML、CSS和JavaScript这三种。.其中HTML是网 页的结构CSS是网页的外观JavaScript是网页的行为。在这三大元素中HTML才是最 重要的而CSS和.JavaScript只是用来修饰结构的。就像你盖房子房子装饰得再漂亮如果结构不稳也容易塌。
整站开发时编写的代码往往都是成千上万行如果我们全部使用div和span来代替 语义化标签后期维护会非常困难。此外对于一个页面来说我们可以根据一个页面的外观来判断哪些是标题哪些是图片。但是搜索引擎跟人不一样它可“看不懂” 一个页面长什 么样的。它只会根据HTML代码来识别。搜索引擎一般都是根据HTML标签来识别这里是 一个img标签那里是一个p标签等。如果整个页面都是div和span,捜索引擎小蜘蛛肯 定会迷路可能以后都不想来光顾你这个站点。要是这样的话你崩溃了你的老板也跟着 崩溃了。
从上面我们知道编写一个语义结构良好的页面在实际开发中极其重要。主要有两个最大的优点①利于开发调试和后期维护②利于搜索引擎优化。
二标题语义化
h1 - h6是标题标签h表示“header”。h1~ h6在HTML语义化中占有极其重要的地位。 h1 ~ h6按照标题的重要性依次递减其中h1重要性最高h6重要性最低。
相对于其他语义化标签h1~ h6在搜索引擎优化(即SEO)中占有相当重要的地位。 在一个页面中h1 ~ h6这6个标签我们不需要全部都用上都是根据需要才用的。对于 h1~ h6,—般情况下我们只会用到h1、h2、h3和h4很少再会去用h5和h6,因为一个页面不可能用到那么多级的标题。并且从搜索引擎优化的角度来说h1、h2、h3和h4这4个标签会被赋予一定的权重而h5和h6的权重跟普通标签差不多在SEO优化上意义不大。
对于标题h1 ~ h6的语义化我们需要注意以下四个方面。
1一个页面只能有一个h1标签。
2hl ~ h6之间不要断层。
3不要用h1 ~ h6来定义样式。
4不要用div来代替h1 ~ h6.
1.一个页面只能有一个h1标签
hl标签表示每个页面中最高层级的标题捜索引擎会赋予hl标签最高权重。虽然W3C没有明确规定一个页面不能有多个hl标签但是我们还是推荐“一个页面一个hl标签”的 做法。如果一个页面出现多个hl,对搜索引擎可能不好也可能会被判以作弊。就像你写文章一样一个页面就等于一篇文章你见过一篇文章有多个主标题的么
2.h1~h6之间不要出现断层
搜索引擎对hl ~ h6标签比较敏感尤其是hl和h2。一个语义良好的页面hl ~ h6 应该是完整有序而没有出现断层的。也就是说要按照“hl、h2、h3、h4”这样的顺序依次排列下来不要出现“hl、h3、h4”而漏掉h2的情况。
3.不要用h1~h6来定义样式
我们都知道h1 ~ h6是有默认样式的如图所示。在实际开发中很多时候我们需要为文本定义字体加粗或者字体大小。有些人喜欢用h1 ~ h6来代替CSS,使用标签来控制 样式这是一种非常不好的做法。我们一定要记住HTML关注的是结构(语义)CSS关注 的是样式结构跟样式应该分离。
4.不要用div来代替h1~h6
从语义上来说一个页面的标题应该使用h1〜h6标签不要使用div来代替。
分析
div是无语义的标签如果使用div来代替h1〜h6,后期维护比较困难而且对SEO 影响也非常大。因为这种做法会让一个页面丢失大量的权重。
三图片语义化
在HTML中我们使用img标签来表示图片。对于图片的语义化我们从以下两个方面 来深入探讨一下。
1 alt属性和title属性。
2 figure 元素和 figcaption 元素。
1、alt属性和title属性
img标签有两个重要属性alt和title。
alt属性用于图片描述这个描述文字是给捜索引擎看的。并且当图片无法显示时页面会显示alt中的文字。
title属性也用于图片描述不过这个描述文字是给用户看的。并且当鼠标指针移到图片上时会显示title中的内容。
语法
img src alt图片描述(给搜索引擎看) title图片描述(给用户看)搜索引擎跟人不一样它看不出一张图片描绘的是什么东西它只会査看HTML代码 通过img标签的alt属性或者页面上下文来判断图片的内容。因此对于img标签我们一定要添加alt属性以便搜索引擎识别图片的内容。alt属性在搜索引擎优化中也很重要并且会被赋予一定的权重。
请一定要注意alt属性是img标签必需属性一定要添加title属性是img标签可选属性可加可不加。建议大家在实际开发中对于img标签要记得在alt属性中添加必要的描述信息。
2、figure 元素和 figcaption 元素
语法
figureimg src alt/figcaption/figcaption/figure说明
figure元素用于包含图片和图注figcaption元素用于表示图注文字。在实际开发中 对于“图片图注”效果我们都建议使用figure和figcaption这两个元素来实现从而使 得页面的语义更加良好。
(四)表格语义化
在实际开发中我们不建议使用表格布局应该使用浮动布局或者定位布局。虽然表格拿来做布局的方式被抛弃了但是这并没有说明表格就一无是处了。
问大家一个问题如图所示的这种表格数据的展示应该怎么实现呢不少得了 “table恐惧症”的小伙伴可能会想到使用div来模拟表格。事实上对于这种表格数据形式, 最好的选择还是table。
在表格中我们比较常用的标签是table, tr和td这3个。不过为了加强表格的语义 化W3C还增加了 5个标签th、caption、thead、tbody和tfoot。th表示“表头单元格” caption表示“表格标题”。thead、tbody和tfoot这3个标签把表格从语义上分为三部分: 表头、表身和表脚。有了这几个标签表格语义更加良好结构更加清晰。
表格标签如下所示 说明
thead, tbody和tfoot这三个标签也是表格中非常重要的标签它从语义上区分了表头、 表身和表脚。很多人容易忽略这三个标签。
五表单语义化
表单跟表格这是两个完全不一样的概念不过还是有不少初学者傻傻分不清。对于表单语义化我们从2个方面来探究一下。
1label 标签。
2fieldset 标签和 legend 标签。
1、label 标签
W3C规范定义label标签用于显示在输入控件旁边的说明性文字。也就是将某个表单元素和某段说明文字关联起来。
语法 label for“” 说明性文字 /label
说明
label标签for属性值为所关联的表单元素的id,例如 input id“name” type“text”/, 则其所关联的label标签应该为 label for“name”
label标签的for属性有两个作用。
①语义上绑定了 label元素和表单元素。
②增强了鼠标可用性。也就是说我们点击label中的文本时其所关联的表单元素也会获得焦点。
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
headtitle/title
/head
bodydivinput idRadio1 typeradio/单选框input idCheckbox1 typecheckbox /复选框/divhr /divinput idrdo namerdo typeradio/label forrdo单选框/labelinput idcbk namecbk typecheckbox /label forcbk复选框/label/div
/body
/html分析
从这个例子可以看到在第一组表单中我们只能点击单选框才能选中单选框点击它旁边的说明文字是不能选中的。在第二组表单中我们可以点击单选框来选中单选 框并且点击它旁边的说明文字同样也可以选中单选框。而对于复选框来说也是一样的效果。
其实这就是label标签for属性的作用。for属性使得鼠标单击的范围扩大到label元素上极大地提高了用户单击的可操作性。
我们拿复选框来说下面两行代码是等价的。
input idcbk typecheckbox /label forcbk 复选框 /label
label复选框input idcbk typecheckbox//label2.fieldset 标签和 legend 标签。
语法
fieldsetlegend 表单组标题 /legend/fieldset!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlheadtitle/title
/headbodyform actionindex.aspx methodpostfieldsetlegend登录绿叶学习网/legendplabel forname 账号/1abelinput typetext idname namename //plabel forpwd 密码/labelinput typepassword idpwd namepwd //pinput typecheckbox idremember-me nameremember-me / label forremember-me 记住我 /labelinput typesubmit value登录 //fieldset/form
/body/html分析
我们可以看到使用了 fieldset和legend这两个标签之后表单形成了非常美观的“书签”效果
六其他语义化
1、 换行符 br/
很多新手会使用br/标签来换行或者使用多个br/标签来实现元素之间的上下间距。
举例
divspan 标题 /spanbr/br/span第 1 部分内容 /spanbr/span第 2 部分内容 /spanbr/span第 3 部分内容 /span /div上面两个例子使用br/标签的方式是错误的这也是br/标签很常见的错误用法。 事实上br/标签有自己特定的语义不能随便用来实现换行效果。W3C标准规定br/ 标签仅仅用于段落中的换行不能用于其他情况。也就是说br/标签只适合用于p标签内部的换行不能用于其他标签。
2、无序列表ul
在实际开发中对于列表型的数据为了实现良好的语义我们还是建议使用无序列表 或者有序列表不建议使用div等来实现。
ullispanl/spanHTML 教程 /lilispan2/spanCSS 教程 /lilispan3/spanJavaScript 教程 /li
/ul有人问每一个列表项前都有数字不应该使用有序列表来实现吗为什么这里使用无序列表来实现呢假如使用有序列表我们是做不到这种外观效果的。因为有序列表前的数字外 观是固定的。在实际开发中大多数情况下都是使用无序列表极少情况下会使用有序列表。
3、strong标签和em标签
strong用于实现加粗文本em用于实现斜体文本。基于结构和样式分离的原则标签仅仅是为了实现简单的加粗或者斜体效果我们一般不会用这两个。实际上W3C对这两个标签赋予“强调”的语义在strong或者em标签内部的文本被强调为重要文本。并且搜索引擎对这两个标签也赋予一定的权重。如果在一个页面中为了SEO而想要突出某些关键字可以使用strong和em这两个标签。一般情况下我们都是去掉strong和em的默认样式然后使用CSS重新定义新的样式, 但这并不影响这两个标签的语义。也就是说样式只会改变标签的外观但不会改变标签的语义。
4、del标签和ins标签
在HTML中del和ins这两个标签是配合使用的。del表示“delete”用于定义被删除的文本。ins表示“insert”用于定义被更新的文本。一般情况下我们会使用CSS来重新定义del和ins标签的样式。
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
headtitle/title
/head
bodyp新鲜的新西兰奇异果/ppdel原价:6.50/kg/del/ppins现在仅售4.00/kg/ins/p
/body
/html5、img标签
想要在页面显示一张图片我们有两种方式一是使用img标签二是使用背景图片。 这两种实现方式最明显的区别在于使用img标签添加图片是通过HTML来实现使用背景图片是通过CSS来实现。
在实际开发中很多人添加图片的方式很随意。对于什么时候使用img标签什么时候使用背景图片并不是很清楚我们应该根据HTML的语义来判断。如果图片作为HTML的一 部分并且想要被捜索引擎识别则应该使用img标签例如常见的各种图片列表。如果图片仅仅是起到修饰作用并且不想被搜索引擎识别则应该使用背景图片。
举个例子图左这个页面中的图标图片就应该使用背景图片实现因为这些图标并不需要被搜索引擎识别也不作为HTML的一部分。而图右页面中应该使用img标签来实 现因为这是页面HTML结构的一部分并且希望被搜索引擎识别。 七语义化验证
前面这几节我们介绍了页面语义化需要注意的各个地方。那么平常有什么好的办法来判断一个页面是否语义良好呢 一个很简单的办法就是去掉CSS样式然后看页面是否还具有很好的可读性。
我们都知道很多HTML标签都有一定的默认样式例如p标签有上下边距、strong标签对字体加粗、ul标签有缩进效果等等。
在前面我们接触过我们可以使用一个标签来代替另外一个标签并且使用CSS修饰来实现相同的效果。也就是说不同的HTML标签可以通过不同的CSS来实现相同的效果。但 是“一个语义良好的页面”跟“一个语义不好的页面”在去除样式之后的表现却是截然不同的。
语义不好的页面和语义好的页面
从上面两张图我们可以看出一个语义良好的页面在“CSS裸奔”之后可读性也是非 常高的。想要查看一个页面在“CSS裸奔”下的效果我们可以使用Firefox浏览器的一款网 页调试插件Web Developer来测试。
在 Web Developer ZL具栏找到“CSS” —► “Disable Styles” —“Disable All Styles” 并且选中就可以查看页面去掉样式后的效果如图2-21所示。Web Developer插件的安装和使用请自行搜索很简单。
HTML5舍弃的标签
在HTML5中除了新增标签之外也有不少标签被舍弃了如表1和表2所示。 为了实现页面的语义化我们在实际开发中不应该再去使用这些标签。因此了解哪些标签已经 被舍弃是非常有必要的。
对于这些被舍弃的标签总体可以分为两大类。
1仅仅为了定义样式没有任何语义因此被舍弃。
2很少使用或者已经被新标签代替因此被舍弃。 对于HTML语义化我们需要注意以下两点。
1.我们应该果断舍弃那些仅仅为了定义样式而存在的HTML标签。如果仅仅是为了改 变样式我们应该使用CSS来实现不要使用HTML标签。
2.在不同的页面部分我们优先使用正确的语义化标签。如果没有语义标签可用才去考虑div和span等无语义标签。
HTML5
一、什么是 HTML5
1.HTML5 的概念与定义
定义HTML5 定义了 HTML 标准的最新版本是对 HTML 的第五次重大修改号称下一代的 HTML
两个概念 是一个新版本的 HTML 语言定义了新的标签、特性和属性 拥有一个强大的技术集这些技术集是指 HTML5 、CSS3 、javascript, 这也是广义上的 HTML5
2.HTML5 拓展了哪些内容 语义化标签 本地存储 兼容特性 2D、3D 动画、过渡 CSS3 特性 性能与集成
二、HTML5 新增标签
1、新增了哪些语义化标签
header — 头部标签
nav — 导航标签
article — 内容标签
section — 块级标签
aside — 侧边栏标签
footer — 尾部标签 2.使用语义化标签的注意 语义化标签主要针对搜索引擎 新标签可以使用一次或者多次 在 IE9 浏览器中需要把语义化标签都转换为块级元素 语义化标签在移动端支持比较友好
多媒体音频标签
1.多媒体标签有两个分别是 音频 – audio 视频 – video
2.audio 标签说明
可以在不使用标签的情况下也能够原生的支持音频格式文件的播放
但是播放格式是有限的
3.audio 支持的音频格式
audio 目前支持三种格式 4.audio 的参数
body!-- 注意在 chrome 浏览器中已经禁用了 autoplay 属性 --!-- audio src./media/snow.mp3 controls autoplay/audio --
!-- 因为不同浏览器支持不同的格式所以我们采取的方案是这个音频准备多个文件--audio controlssource src./media/snow.mp3 typeaudio/mpeg //audio
/body多媒体视频标签
1.video 视频标签
目前支持三种格式 2.语法格式
video src./media/video.mp4 controlscontrols/video3.video 参数
body!-- video src./media/video.mp4 controlscontrols/video --
!-- 谷歌浏览器禁用了自动播放功能如果想自动播放需要添加 muted 属性 --video controlscontrols autoplay muted loop poster./media/pig.jpgsource src./media/video.mp4 typevideo/mp4source src./media/video.ogg typevideo/ogg/video
/body多媒体标签总结
音频标签与视频标签使用基本一致
多媒体标签在不同浏览器下情况不同存在兼容性问题
谷歌浏览器把音频和视频标签的自动播放都禁止了
谷歌浏览器中视频添加 muted 标签可以自己播放
注意重点记住使用方法以及自动播放即可其他属性可以在使用时查找对应的手册
新增 input 标签 新增表单属性
