Html5基础语法
Html5基础语法
特性
空白折叠现象
文字和文字之间的多个空格、换行会被折叠成一个空格
标签“内壁”和文字直接的空格会被忽略
转义字符
| 转义字符 | 意义 |
|---|---|
| < | 小于号 |
| > | 大于号 |
| | 空格（不会被折叠） |
| © | 版权符号© |
基础语法
html注释
html的注释语法如下
<!-- -->
HTML5骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="...">
<title>Document</title>
</head>
<body>
</body>
</html>
文档类型声明DTD
HTML文件第一行必须是DTD(Document Type Definition,文档类型声明)
不写DTD会引发浏览器的一些兼容问题
不同版本的HTML有不同的DTD写法
html5: <!DOCTYPE html>
title标签
title标签用来设置网页的标题,文字会显示在浏览器的标签栏上
title也是搜索引擎收录网站时显示的标题,为了吸引用户点击,合理设置title是必要的
字符集
<meta charset="UTF-8" >
网页关键词和页面描述
合理设置网页的网页的关键词和页面描述,也是SEO的重要手段
SEO(Search Engine Optimization,搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名,让网站在搜索引擎的结果中内占据领先地位,获得品牌收益
使用meta标签设置网页关键词和描述,name属性非常关键,用来设置meta的具体功能
<meta name="Keywords" content="JAVA,前端,Python,大数据">
<meta name="Description" content="描述......">
div标签
div是英语division“分割”的缩写，顾名思义，<div></div>标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更清晰。
比如,网页的头部要放到一个<div></div>标签对中,轮播图也要放到一个<ddiv></div>标签对中,文章内容也要放到一个<ddiv><d/div>标签对中
<div></div>是最常见的HTML标签,因为它可以结合CSS使用,实现网页的布局,这种布局形式叫做“DIV+CSS”。
<div></div>像是一个容器,什么都可以容纳,因此工程师 也习惯称呼<div></div>为“盒子”。
<div>标签可以添加class属性表示“类名”，类目服务于CSS
标题和段落标签
h系列标签表示“标题”语义,h是headline的意思
| 标签 | 语义 |
|---|---|
| hl | 一级标题 |
| h2 | 二级标题 |
| h3 | 三级标题 |
| h4 | 四级标题 |
| h5 | 五级标题 |
| h6 | 六级标题 |
搜索引擎非常看重<h1></h1>标签的内容,应该将重点内容放到<h1></h1>中,比如网页的logo等。
<h1></h1>标签一般只能放置一个,否则会被搜索引擎视为作弊。
提示:实际开发中,也会出现多个<h1></h1>标签的情况,只是不推荐。
段落标签
<p></p>标签表示段落标签,p是英语paragraph的意思
任何段落都要放到<p></p>标签中,因为HTML中即使代码换行了,页面显示效果也不会换行,必须写到<p></p>中。
<p></p>标签中不能嵌套h系列标签和其他p标签。
列表标签
| type属值 | 意义 |
|---|---|
| <ul></ul> | 无序列表 |
| <ol></ol> | 有序列表 |
| <dl></dl | 定义列表 |
无序列表使用<ul></ul>标签（unordered list），每个列表项都是<li></li>标签(list item)
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
HTML规定，<ul>的子标签只能是<li>标签
无序列表有type属性,可以定义前导符号的样式,但是在HTML5中已经被废弃,建议使用CSS替代
| type属值 | 意义 |
|---|---|
| disc | 默认值，实心圆 |
| circle | 空心圆 |
| square | 实现方块 |
有序列表使用<ol></ol>标签（ordered list），每个列表项都是<li></li>标签(list item)
<ol>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ol>
<li>标签不能散着放,它必须是<ol>标签或者<ul>标签的子标签
<ol>的子标签只能是<li>标签
<li>标签中可以放任何东西，所以列表可以嵌套
ol标签可以设置type属性，用来设置编号的类型
| type属值 | 意义 |
|---|---|
| a | 表示小写英文字编号 |
| A | 表示大写英文字母编号 |
| i | 表示小写罗马数字编号 |
| I | 表示大写罗马数字编号 |
| 1 | 表示数字编号（默认） |
<ol>标签的start属性
start属性值必须是一个整数,指定了列表编号的起始值
此属性的值应为阿拉伯数字,尽管列表条目的编号类型type属性可能指定为了罗马数字编号等其他类型的编号
<ol>标签的reversed属性
reversed属性指定列表中的条目是否是倒序排列的
reversed属性不需要值,只需要写reversed单词即可,这是HTML5的全新特性
<ol reversed>
</ol>
定义列表definition list、数据项date term、数据定义data definition，需要逐条给出定义描述的列表,就是定义列表
<dl>
<dt>北京</dt>
<dd>政治中心</dd>
<dt>上海</dt>
<dd>经济中心</dd>
<dt>深圳</dt>
<dd>经济特区</dd>
</dl>
<dl>是定义列表标签,内容交替出现<dt>、<dd>标签
也允许dt和dd不交替出现,而是分别处于不同的定义列表中
<dl>
<dt>北京</dt>
<dd>政治中心</dd>
</dl>
<dl>
<dt>上海</dt>
<dd>经济中心</dd>
</dl>
<dl>
<dt>深圳</dt>
<dd>经济特区</dd>
</dl>
使用什么标签,不应该看样式,应该看语义
只要语义上有“解释说明”含义的文字,一为列表形态,应该使用定义列表
多媒体与语义化标签
图片标签<img>
<img>标签用来在网页中插入图片
<img src="images/g.jpg">
图片本质上没有被插入到网页中,只是被引入到了网页中,所以将来要将图片也一起上传到服务器上,将图片复制到项目文件中,即可整体上传
<img>标签的alt属性
alt属性是alternate“替代品”的缩写,它是对图像的文本描述,不是强制性的
<img src="images/gugong.jpg" alt="故官角楼">
如果由于某种原因无法加载图像,浏览器会在页面上显示alt属性中的备用文本
供视力不方便的朋友使用的网页朗读器,也会朗读alt中的文本
<img>标签的width、height属性
width、height属性分别设置宽度和高度,单位是像素,但是不需要写单位
<img src="images/gugong.jpg" alt="故宫角楼" width="388">
如果省略其中一个属性,则表示按原始比例缩放图片
网页上支持的图片格式
| 格式 | 说明 |
|---|---|
| .bmp | windows画图软件默认保存的格式,位图 |
| .gif | 支持动画(比如表情包) |
| .jpeg(.jpg) | 有损压缩图片,用于照片 |
| .png | 便携式网络图像,用于logo、背景图形等,支持透明和半透明 |
| .svg | 矢量图片 |
| .webp | 最新的压缩算法非常优秀的图片格式 |
超级连接<a>标签(anchor)
<a href="b.hmtl">go to b.html</a>
<a>标签的title属性用户设置鼠标的悬停文本
<a href="b.hmtl" title="b.html">go to b.html</a>
将<a>标签的target属性设置为blank,即可在新标签页中打开网页,HTML4代,blank之前有一个下划线
<a href="b.hmtl" target="blank">go to b.html</a>
页面内锚点
较长的页面,可以适当的给h系列标签添加id属性,它将成为页面的“锚点”
<h1 id="wuxi">无锡美景</h1>
当网址后面添加#时,页面将自动滚动到锚点所在位置，其他页面的超级链接,可以链接到指定锚点
<a href="lvyou.html#wuxi">查看无锡美景</a>
内置锚点#top返回顶部
<a href="#top">返回顶部</a>
指向exe、zip、rar等文件格式的链接,将自动成为下载链接
<a href="1.zip">下载</a>
有mailto:前缀的链接是邮件链接,系统将自动打开Email相关软件
<a href="mailto:me@qq.com">发邮件</a>
有tel:前缀的链接是电话链接,系统将自动打开拨号盘
<a href="tel:10086">打电话</a>
音频和视频
在浏览器中插入音频需要使用<audio>标签,兼容到IE9，controls属性显示播放控件。标签对中是对不兼容audio标签的浏览器的显示文字，常用的音频格式是mp3和ogg格式。
<audio controls src="音频地址" autoplay loop>
抱歉，你的浏览器不支持audio标签，请升级浏览器
</audio>
声明autoplay属性,音频会自动播放，常用的浏览器为了不打扰用户,可能会不允许自动播放音乐,必须让用户手动点击之后才能播放
声明loop属性,将循环播放音频
在浏览器中插入视频需要使用<video>标签,兼容到IE9
<video controls src="音频地址" autoplay loop>
抱歉，你的浏览器不支持video标签，请升级浏览器
</video>
区块标签
HTML5推出了众多新的区块标签
| 区块标签 | 说明 |
|---|---|
| <section> | 文档的区域,语义比div大 |
| <article> | 文档的核心文章内容,会被搜索引擎主要抓取 |
| <aside> | 文档的非必要相关内容,比如广告等 |
| <nav> | 导航条 |
| <header> | 页头 |
| <main> | 网页核心部分 |
| <footer> | 页脚 |
语义标签
<span>标签是文本中的“区块”标签,本身没有任何特殊的显示效果,可以结合CSS来丰富样式
<b>（加粗）、<u>(下划线)、<i>(倾斜)标签充满浓浓的“样式”意味,已经被CSS替代,但是在网页中也可以表示需要强调的文本
<strong>（代表特别重要的文字）、<em>（代表强调文字）、<mark>（代表一段需要被高亮的文字）标签均表示强调语义
<figure>元素代表一段独立的内容,与说明<figcaption>配合使用,它是一个独立的引用单元,比如建议读者拓展视野的图片等,当这部分转移到附录中或者其他页面时不会影响到主体
表单标签
所有HTML表单都以一个<form>元素开始，action属性表示表单要提交到的后台程序的网址,method属性表示表单提交的方式,有get或post
<form action="login.php" method="post">
<p>
请输入手机号码：
<input type="text" value="123" placeholder="输入手机号码">
</p>
<p>
请选择性别：
<label>
<input type="radio" name="sex" value="1" id="" checked> 男
</label>
<label>
<input type="radio" name="sex" value="2" id=""> 女
</label>
</p>
<p>
请选择爱好：
<label>
<input type="checkbox" name="aihao" value="足球"> 足球
</label>
<label>
<input type="checkbox" name="aihao" value="篮球"> 篮球
</label>
<label>
<input type="checkbox" name="aihao" value="羽毛球"> 羽毛球
</label>
</p>
<button>我是一个普通按钮</button>
<input type="button" value="我是一个普通按钮2">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
</form>
使用type属性值被设置为text的<input>元素可以创建单行文本框,它是一个单标签,value属性表示已经填写好的值，placeholder属性表示提示文本,将以浅色文字写在文本框中,并不是文本框中的值，disabled属性表示用户不能与元素交互,即“锁死”
使用type属性值被设置为radio的<input>元素可以创建单选按钮，互斥的单选按钮应该设置它们的name为相同值，单选按钮要有value属性值,向服务器提交的就是value值，单选按钮如果加上了checked属性,表示默认被选中，label标签用来将文字和单选按钮进行绑定,用户单击文字的时候也视为点击了单选按钮,在HTML4时代,label标签是通过for属性和单选按钮的id属性进行绑定的
使用type属性值被设置为checkbox的<input>元素可以创建复选框,同组复选框应该设置它们的name为相同值,复选框要有value属性值,向服务器提交的就是value值
使用type属性值被设置为password的<input>元素可以创建密码框
<select>标签表示下拉菜单,<option>是它内部的选项，其中向服务器提交的就是value值
<textarea></textarea>表示多行文本框，rows和cols属性,用于定义多行文本框的行数和列数
表单中常见三种按钮,它们也都是input标签,type属性值不同
| type属性值 | 按钮类型 |
|---|---|
| button | 普通按钮，同<button></button> |
| submit | 提交按钮 |
| reset | 重置按钮 |
更丰富的input种类
| type属性值 | 控件 |
|---|---|
| color | 颜色选择控件 |
| date、time | 日期、时间选择控件 |
| 电子邮件输入控件 | |
| file | 文件选择控件 |
| number | 数字输入控件 |
| range | 拖拽条 |
| search | 搜索框 |
| url | 网址输入控件 |
<datalist>控件可以为输入框提供一些备选项,当用户输入的内容与备选项文字相同时,将会显示智能感应
<form action="1.php" method="post">
<p>
请输入省份：
<input type="text" list="province-list">
<datalist id="province-list">
<option value="浙江"/>
<option value="江苏"/>
<option value="福建"/>
</datalist>
</p>
</form>
表格标签
<table>（table）、<tr>（table row）和<td>（table data）标签组成，为了让表格能够显示边框,<table>标签通常有border属性，<caption>是表格的标题,它常常作为<table>的第一个子元素出现
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
<th>是“标题小格”,可以替代<td>的作用,表示标题小格
colspan属性用来设置td或者th的列跨度，rowspan属性用来设置td或者th的行跨度