学习html，这一篇足矣
目录
基础元素
标签之标题
标题（Heading）是通过<h1>-<h6>标签进行定义的。
<h1>定义最大的标题 <h6>定义最小的标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>生成h1~h6快捷键：h$*6
标题标签位置摆放
在标签中添加属性： align="left | center | right" 默认居左
标签之段落、换行、水平线
标签之段落
段落是通过<p>标签定义的
<p>这是一个段落 </p>
<p>这是另一个段落</p>换行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>
<br>元素是一个空的 HTML 元素。
<p>这个<br>段落<br>演示了分行的效果</p>水平线
<hr/>标签在 HTML 页面中创建水平线
<hr color="" width="" size="" align=""/>属性：
1 color：设置水平线的颜色
2 width：设置水平线的长度
3 size：设置水平线的高度
4 align：设置水平线的对齐方式（默认居中），可取值left|right
标签之图片
网站中最多的元素毋庸置疑，一定是图片
<img>标签定义 HTML 页面中的图像
<img src="" alt="" title="" width=""
height="">注意事项: <img>是单标签，不需要进行闭合操作
属性：
1 src：路径（图片地址与名字）
2 alt：规定图像的替代文本
3 width：规定图像的宽度
4 height：规定图像的高度
5 title：鼠标悬停在图片上给予提示
路径详解
绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
比如：E:\itbaizhanCode\1.jpg
<img src="E:\itbaizhanCode\1.jpg">相对路径
两者相对关系，两者在同⼀路径下可以直接访问
1 ⼦级关系: /
2 ⽗级关系: ../
3 同级关系: ./
网络路径
具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png
标签之超文本链接
超链接描述
HTML使用标签<a>来设置超文本连接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像， 您可以点击这些内容来跳转到新的文档或者当前文档中的某个部 分。
超链接属性
在标签<a>中使用了 href 属性来描述链接的地址 默认情况下，链接将以，以下形式出现在浏览器中： 1 一个未访问过的链接显示为蓝色字体并带有下划线。 2 访问过的链接显示为紫色并带有下划线。 3 点击链接时，链接显示为红色并带有下划线。
<a href="url">链接文本</a>超链接之锚点
超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个 部分。 跳转到当前文档的某个部分的形式就是“锚点”
锚点实现方式
<a href="#hello">跳转到当前页</a>
<p id="hello">文本信息</p>标签之文本
常用文本标签
特别提示
常用文本标签和段落是不同的，段落代表一段文本，而文本标 签一般表示文本词汇
列表标签之有序列表
有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol>标签。每个列表项始于<li>标签。
<ol>
<li>学习</li>
<li>打游戏</li>
</ol>type属性
<ol>的属性type 拥有的选项
1 表示列表项目用数字标号（1,2,3...）
2 a 表示列表项目用小写字母标号（a,b,c...）
3 A 表示列表项目用大写字母标号（A,B,C...）
4 i 表示列表项目用小写罗马数字标号（i,ii,iii...）
5 I 表示列表项目用大写罗马数字标号（I,II,III...）
有序列表嵌套
列表是可以进行嵌套的
<ol>
<li>购物</li>
<li>
<ol>
<li>阿里</li>
<li>京东</li>
</ol>
</li>
<li>外卖</li>
</ol>列表标签之无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑 圆圈）进行标记 无序列表始于
<ul>标签。每个列表项始于<li>标签。
<ul>
<li>学习</li>
<li>打游戏</li>
</ul>type属性
<ul>的属性type 拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
无序列表嵌套
列表是可以进行嵌套的
<ul>
<li>购物</li>
<li>
<ul>
<li>阿里</li>
<li>京东</li>
</ul>
</li>
<li>外卖</li>
</ul>常见应用场景
1 无序的列表效果
2 导航效果
导航效果
<ul>
<li>Xiaomi手机</li>
<li>Redmi 红米</li>
<li>电视</li>
<li>笔记本</li>
</ul>快捷键
快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修 改）
列表标签之自定义列表
自定义列表实现 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每 个自定义列表项的定义以<dd>开始。
<dl>
<dt>淘宝</dt>
<dd>唯品会</dd>
<dt>京东</dt>
<dd>阿里</dd>
</dl>标签之表格
表格组成与特点
行、列、单元格
单元格特点：同行等高、同列等宽。
表格标签
表格：<table>
行：<tr>
单元格：<td>
<table>
<tr>
<td>购物</td>
<td>外卖</td>
</tr>
<tr>
<td>阿里</td>
<td>京东</td>
</tr>
</table>表格属性详解
| <table>表格属性 border：设置表格的边框 width：设置表格的宽度 height：设置表格的高度 align：设置表格的水平对齐方式 cellpadding：设置内容距离边框的距离 cellspacing：设置单元格之间的距离 bgcolor：设置表格背景颜色 b ordercolor：设置边框颜色 background：设置背景图片 |
<tr>的属性
height：设置一行的高度
bgcolor：设置一行的背景颜色
background：设置一行的背景图片
align：设置行里内容水平对齐方式，取值：left、center、right
valign：设置行里内容垂直对齐方式，取值：top、middle、bottom
<td>的属性
width：设置单元格的宽度，同列等宽
height：设置单元格的高度，同行等高
align：设置单元格内容水平对齐方式
valign：设置单元格内容垂直对齐方式
bgcolor：设置单元格背景颜色
background：设置单元格背景图片
表格单元格合并
单元格合并属性
水平合并：colspan
垂直合并：rowspan
<table align="center" border=""
width="500px" height="200px"
cellspacing="0">
<tr>
<td colspan="3">单元格1单元格2单元格
3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td rowspan="2">单元格6-11</td>
<td>单元格7</td>
<td rowspan="3">单元格81318</td>
<td colspan="2" rowspan="2">单元格
9101415</td>
</tr>
<tr>
<td>单元格12</td>
</tr>
<tr>
<td>单元格16</td>
<td>单元格17</td>
<td>单元格19</td>
<td>单元格20</td>
</tr>
</table>
Form表单
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的 输入框,提交按钮等，这些输入框,按钮叫做控件,表单就是容器,它能 够容纳各种各样的控件
<form action="url" method="get|post"
name="myform"></form>属性说明
action服务器地址
name表单名称
method中Get和Post的区别
1 数据提交方式，get把提交的数据url可以看到，post看不到
2 get一般用于提交少量数据，post用来提交大量数据
表单元素
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单 按钮
1 表单标签
2 表单域
3 表单按钮
<form>
<input type="text">
<input type="submit">
</form>文本框
文本域通过<input type="text">标签来设定，当用户要在表单中键入字 母、数字等内容时，就会用到文本域
<form>
First name: <input type="text"
name="firstname">
<br>
Last name: <input type="text"
name="lastname">
</form>密码框
密码字段通过标签<input type="password">来定义
<form>
Password: <input type="password"
name="pwd">
</form>温馨提示
密码字段字符不会明文显示，而是以星号或圆点替代
单选按钮
<input type="radio">标签定义了表单单选框选项
<form>
<input type="radio" name="sex"
value="male">Male
<br>
<input type="radio" name="sex"
value="female">Female
</form>复选框
<input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取 一个或若干选项
<form>
<input type="checkbox" name="vehicle"
value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle"
value="Car">I have a car
</form>文件
定义文件选择字段和 "浏览..." 按钮，供文件上传
<form>
<input type="file" name="img">
</form>提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单 的动作属性定义了目的文件的文件名。由动作属性定义的这个文件 通常会对接收到的输入数据进行相关的处理
<form name="input" action="url" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>重置按钮
定义重置按钮（重置所有表单值为默认值）
<form name="input" action="url" method="get">
Username: <input type="text" name="user">
<input type="reset">
</form>按钮
没有任何功能的按钮
<form name="input" action="url" method="get">
<input type="button" value="点我"/>
<button>点我</button>
</form>图像图片按钮
定义图像作为提交按钮
<form name="input" action="url" method="get">
<input type="image" src="close.jpg" />
</form>下拉列表
<select>元素用来创建下拉列表。
<option>标签定义下拉列表中的一个选项（一个条目）
<form name="input" action="url" method="get">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option
value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</form>多行文本框
<textarea>标签定义一个多行的文本输入控件。文本区域中可容纳无限 数量的文本。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的 办法是使用 CSS 的 height 和 width 属性
<form name="input" action="url" method="get">
<textarea rows="10" cols="30">我是一个文本
框</textarea>
</form>label
<label>标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进 了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是 说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关 的表单控件上。
<label>标签的 for 属性应当与相关元素的 id 属性相同
HTML5新增type类型
定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的 值进行验证）
<form>
E-mail: <input type="email"
name="usremail">
<input type="submit">
</form>url
定义用于输入 URL 的字段
<form>
<input type="url" name="homepage">
<input type="submit">
</form>search
定义搜索字段（比如站内搜索或谷歌搜索等）
<form>
Search Google: <input type="search"
name="googlesearch">
<input type="submit">
</form>tel
定义用于输入电话号码的字段
<form>
电话号码: <input type="tel" name="usrtel">
<input type="submit">
</form>color
从拾色器中选取颜色
<form>
选择你喜欢的颜色: <input type="color"
name="favcolor">
<input type="submit">
</form>number
定义用于输入数字的字段（您可以设置可接受数字的限制）
<form>
数量 ( 1 到 5 之间): <input type="number"
name="quantity" min="1" max="5">
<input type="submit">
</form>range
定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您 也可以设置可接受数字的限制
<form>
<input type="range" name="points" min="1"
max="10">
<input type="submit">
</form>date
定义 date 控件
<form>
生日: <input type="date" name="bday">
<input type="submit">
</form>month
定义 month 和 year 控件（不带时区）
<form>
生日 ( 月和年 ): <input type="month"
name="bdaymonth">
<input type="submit">
</form>week
定义 week 和 year 控件（不带时区）
<form>
选择周: <input type="week"
name="week_year">
<input type="submit">
</form>HTML5新增属性
autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。
<form>
User name: <input type="text"
name="user_name" autofocus />
<input type="submit">
</form>placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值
<form>
<input type="search" name="user_search"
placeholder="Search itbaizhan" />
<input type="submit">
</form>required 属性
required 属性规定必须在提交之前填写输入域（不能为空）
<form>
Name: <input type="text" name="usr_name"
required />
<input type="submit">
</form>实体字符
我们考虑⼀个问题，如果我们要在页面上显示⼀个 < 的时候，应该 如何来写，如果直接写符号显然是不合理的，毕竟，它是属于标签 的关键字，那我们应该如何来实现呢？ 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字 符实体
<p>¥</p>
<p>®</p>
温馨提示
实体名称对大小写敏感！
块元素与行内元素（内联元素）
HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在 HTML5中，元素不再按照这种⽅式来区分， 而是按照内容模型来区 分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语 句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别，被称为穿透的， 元素可能属于不止⼀个类别，称为混合的
常见块级元素 div、form、h1~h6、hr、p、table、ul、等
常见内联元素 a、b、em、i、span、strong等
行内块级元素（特点：不换行、能够识别宽高） button、img、input等
HTML新增元素
容器元素（div）
<div>可定义文档中的分区或节（division/section）
<div>标签可以把文档分割为独立的、不同的部分
<div>是一个块级元素。这意味着它的内容自动地开始一个新行
<div>主要应用在布局上，作为布局的每个区域的容器
<body>
<div class="container">
<div class="header">网站头部</div>
<div class="nav">网站导航</div>
<div class="main">
<div class="left">网站主要内容
</div>
<div class="right">网站右侧模块
</div>
</div>
<div class="footer">网站底部</div>
</div>
</body>
HTML5新增布局标签
HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟 （W3C） 完 成标准制定 在 HTML5 出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样 的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎 爬虫对我们页面的爬取。为了解决上述缺点， HTML5 新增了很多新的 语义化标签
视频和音频
HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方 工具实现的，现在HTML5也支持了这方面的功能。在一个支持 HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。
视频
Video标签定义视频，比如电影片段或其他视频流
<video src="movie.mp4" controls>
您的浏览器不支持 video 标签。
</video>
音频
Audio 标签定义声音，比如音乐或其他音频流
<audio src="someaudio.mp3">
您的浏览器不支持 audio 标签。
</audio>
source
<source>标签为媒介元素（比如<video>和<audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒 体类型或者编解码器的支持进行选择
<audio controls>
<source src="horse.ogg" >
<source src="horse.mp3" >
Your browser does not support the audio
element.
</audio>HTML5新增标签
figure
用于对元素进行组合。多用于图片与图片描述组合
<figure>
<img src="img.gif" alt="figure标签"
title="figure标签" />
<figcaption>figure的标题</figcaption>
</figure>details
用于描述文档或文档的某个部分的细节，类似于下拉列表
<details>
<summary>指定的标题，用户点击标题时展示下面
的所有内容，内容可以是任何形式的内容</summary>
<div>
<p>内容描述</p>
</div>
</details>
<!-- 当增设open属性时，描述内容默认展示 -->
<details open>
<summary>指定的标题，用户点击标题时展示下面的
所有内容，内容可以是任何形式的内容</summary>
<div>
<p>内容描述</p>
</div>
</details>
mark
主要用来在视觉上向用户呈现那些需要突出的文字。 标签的 一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词
<p>你是<mark>大长腿</mark>吗？</p>meter
定义度量衡。仅用于已知最大和最小值的度量
<meter min="0" max="100" value="81" low="20"
high="80"></meter>
progress
运行中的进程。可以使用<progress>标签来显示 JavaScript 中耗费时间的 函数的进程
<progress max="100" value="20"></progress>datalist
定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值 的下拉列表。 datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。 请使用 input 元素的 list 属性来绑定 datalist
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>canvas
定义图形，比如图表和其他图像
相关文章
- 恶补web之一:html学习(2)
- 使用sublime text2如何新建文件快速生成HTML头部信息？
- js 通过html()及text()方法获取并设置p标签的显示值
- 前端学习 -- Html&Css -- 条件Hack 和属性Hack
- 前端学习 -- Html&Css -- 表格
- [HTML 5] Using DocumentFragments
- 前端学习 -- Html&Css -- 背景
- html学习
- Html 语法学习笔记二
- Firefox开发者工具里查看HTML元素的Box模型
- 一个最简单的例子学习SAP Cloud for Customer HTML mashup
- Html 语法学习笔记三
- Html 语法学习笔记一
- 2019t1_sumdoc_list.txt aa.docx acc baidu v2 sbb.docx Acc jindon v2 sbb.docx assetsList.html Atiitt 日本刑法典读后笔记.docx Atiti 遇到说花心的时候赞美应对.docx Atitit lesson.docx Atitit malye主义、mzd思想和dsp理论的区别和联系.docx Ati
- Atitit.ui控件---下拉菜单选择控件的实现select html
- atitit. java jsoup html table的读取解析 总结
- paip.关于动画特效原理 html js 框架总结
- 【前端】html+js+css开发入门超详细介绍
- html一个案例学会所有常用HTML(H5)标签
- 学习HTML这一篇就够了！