1. HTML简介
HTML由标签和属性构成的
1.1. HTML文档基本结构<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html>2. 标签
学习html语言就是学习标签的用法
2.1. 标签语法
长在尖号后面第一个单词就是标签（标记，元素）
一组告诉浏览器如何处理一些内容的标签，通过关键字来识别，<body>, <title>, <meta>
不同标签代表不同含义，比如段落标签、文本标签、链接标签、图片标签等
标签一般分为两种：
单标签: 声明（meta）或者插入元素(img)，
双标签: 设置一段区域的内容：<p></p>
1.2. 标签的属性和值
在标签后面的，并通过空格隔开的
元素内部可以设置属性和值，这些属性值用来改变元素某些方面的行为
属性和属性值用等号连接，属性值用双引号括起来
1.3. 常见的标签1. 基础标签标签描述<html>定义HTML文档<title>文档标题<body>文档主体<h1-6>HTML标题<p>段落<br>折行<hr>水平线<!–…–>注释2. 格式标签标签名称说明a超链接元素–>(2)br强制换行wbr安全换行(英文状态下使用)b加粗strong加粗i倾斜em倾斜s删除线del删除线u下划线ins下划线small小字体sub下标sup上标code代码abbr缩写(本身无实际作用)dfn倾斜q加双引号cite倾斜(引用标题)ruby包含汉语拼音bdo文字方向(dir = “rtl或者lfr”)mark突出显示(黄色背景，黑色的字)time显示日期与实践span一般性文本（一般用于CSS）hr空标记，水平线 空格<左括号>>右括号<3. 表单标签
标签名称说明form定义供用户输入的HTML表单input输入控件textarea多行输入控件button按钮select选择列表optgroup选择列表中相关选项的组合option选择列表中的选项labelinput 元素的标注fieldset定义围绕表单中元素的边框legend定义 fieldset 元素的标题datalist定义下拉列表keygen定义生成密钥output输出的一些类型
例子：
<b>1. form元素（用以用户输入数据）:</b> <br> <!–action：表单提交的页面， method：用get和post提交，enctype：采用编码格式，name：表单名称，target：提交目标， autocomplete浏览器记住用户数据，novalidate验证性,form让表单为的元素和指定的表单挂钩提交—> <form name=”form01″ autocomplete=”on” action=”http://www.haosou.com” id=”register”> <!–fieldset对表单进行分组, name form disabled–> <fieldset> <!–legend为分组添加标签–> <legend>注册分组</legend> <!–label可用于CSS–> <label> <!–input属性:autofocus:光标选中，disabled不可输入，autocomplete记住用户，type，name用提交数据的，value的默认值—> 用户名：<input name=”User” value=”666″> <br> </label> <label> <!–外部表单控件可以连接form–> 电子邮件：<input name=”email” form = “register”> </label> <!–button属性: type：submit提交/reset重置/button按钮， formaction, formenctype, formmethod, formtarget, formvalidate–> <button>提交</button> </fieldset> </form> <br> <b>2. Input的type属性：</b> <br> <form> <!–text的属性: maxlength,size, name, value, readonly, disabled, list提供建议值,required必须输入才能提交, palceholder输入字符的提示 –> 文本：<input type=”text” list=”abc” required> <br> <!–password的属性：与text基本一致–> 密码：<input type=”password” placeholder=”输入密码吧”> <br> 搜索: <input type=”search”> <br> <!–max,min,step,–> 数字: <input type=”number”> <br> 范围: <input type=”range”> <br> 日期: <input type=”date”> <input type=”month”> <input type=”time”> <input type=”week”> <input type=”datetime”> <input type=”datetime-local”> <br> 颜色: <input type=”color”> <br> 复选框: 音乐<input type=”checkbox” name=”music” value=”1″> 体育<input type=”checkbox” name=”sport” value=”2″> <br> 单选框: <input type=”radio” name=”sex” value=”1″ checked>男 <input type=”radio” name=”sex” value=”2″>女 <br> 提交: <input type = “submit”> <br> 重置: <input type=”reset”> <br> 按钮: <input type=”button”><br> 图片按钮: <input type = “img” src=”img/dog.jpg”> <br> email: <input type=”email”> <br> telephone: <input type=”tel”><br> URL: <input type=”url”><br> 隐藏:<input type=”hidden” value=”1″><br> 上传文件:<input type=”file” accept=”image/gif”><br> <button>提交</button> </form> <datalist id=”abc”> <option value=”1″>苹果</option> <option value=”2″>橘子</option> </datalist> <br> <b>3. 下拉列表框：</b> <br> <form action=”http://www.haosou.com”> <!–auto,disabled,form size（下拉高度）,multiple（多选）,autofocus, required–> <select name=”fruit”> <!–选项分组–> <optgroup label=”水果”> <option value=”1″>苹果</option> <option value=”2″ selected>橙子</option> <option value=”3″>香蕉</option> </optgroup> <optgroup label=”粗粮”> <option value=”4″>大米</option> <option value=”5″>稻谷</option> <option value=”6″>玉米</option> </optgroup> </select> <button>提交</button> </form> <br> <b>4.多行文本框：</b> <br> <form action=”http://www.haosou.com”> <!–name,form,readonly,disabled,maxlength,autpfocus,placeholder,rows,cols,wrap,requried–> <textarea name=”content” cols=”30″ rows=”10″> 请留下你的建议 </textarea> <button>提交</button> </form> <br>
4. 框架标签标签名称说明frame定义框架集的窗口或框架frameset定义框架集noframes定义针对不支持框架的用户的替代内容iframe定义内联框架5.图形标签标签名称说明img定义图像map定义图像映射area定义图像地图内部的区域canvas定义图形figcaption定义 figure 元素的标题figure定义媒介内容的分组，以及它们的标题在页面中插入另外一个frame：<br> <a href=”http://www.baidu.com” target=”in”>百度</a> | <a href=”http://www.haosou.com” target=”in”>好搜</a> <br> <iframe src=”http://www.bilibili.com” frameborder=”1″ width=”800″, height=”600″ name=”in”></iframe> <br>
6. 音频视频标签标签名称说明audio声音内容source媒介源track定义用在媒体播放器中的文本轨道video定义视频
例子：
<h1>9.音频和视频</h1> <!–autoplay自动播放，loop反复播放，muted静音, poster是视频开头的图片，preload加载网络video使用，none什么都不加载，metadata下第一帧，auto尽快下载–> <video src=”pink.mp4″ width=”640″ height=”480″ controls poster=”img/dog.jpg”></video> <br> <br> 音频和视频几乎一样（除了没有宽高）: <br> <audio src=”xusong.mp3″ controls></audio> <br>
7. 链接标签标签名称说明<a href=”val”>外部跳转用url，内部跳转用锚点#
超链接的属性
属性说明href指定a所指向的资源URLhreflong指向的链接资源所用的语言meida说明所链接资源用于哪种设备rel说明文档与所链接资源的关系类型target指定用以打开锁链接自愿的浏览环境type说明所链接资源的MIME类型8. 列表标签标签名称说明p段落div通用分组(用途较少)blockquote引用大段内容pre展示格式化的内容hr添加分割水平线ul-li无序列表ol-li有序列表dl-dt-dd生成说明列表,用于图片注释figure-figcaption图片及图片标题
例子如下：
无序列表:<br> <ul> <li><a href=”https://www.google.com.hk/”>张三</a></li> <li>李四</li> <li>王五</li> </ul> <br> 有序列表：<br> <ol type = ‘a’ start=”2″> <li>张三</li> <li value=”8″>李四</li> <li>王五</li> </ol> <br>
9. 表格标签标签名称说明table表格thead标题行tbody表格主体tfoot表脚tr一行单元格th标题行单元格td单元格col一列colgroup一组列caption表格标题
表格的属性有如下的：
表格属性说明border表格的边框cellpadding单元格内容和边框距离cellspacing单元格之间的距离align水平对齐方式valign垂直对齐方式colspan单元格水平合并rowspan单元格垂直合并
例子如下：
<!–cellpadding: 内容和边框的距离–> <!–cellspacingg: 格子之间的距离–> <table border=”1″ width=”500″ height = “300” cellpadding=”10″ cellspacing = “10”> <!–表的标题–> <caption>这是标题</caption> <!–设置某一列为红色–> <colgroup> <!–第一列不设置–> <col> <!–第二列为红色–> <col style = “background: red;” span = “1”> </colgroup> <!–tr表示一行–> <tr> <!–th表示表头–> <!–valign表示垂直对齐–> <th valign=”top”>序号</th> <th>产品名称</th> <th>产品价格</th> <th>产品数量</th> <th>统计</th> </tr> <tr> <!–colspan表示水平合并–> <td colspan=”5″>水平合并</td> </tr> <tr> <!–td表示一格–> <!–align表示水平对齐–> <td align=”center”>1</td> <td align=”center”>苹果</td> <td>￥5.00</td> <td>1000</td> <!–rowspan表示垂直合并–> <td rowspan=”3″></td> </tr> <tr> <td>2</td> <td>橘子</td> <td>￥6.00</td> <td>2000</td> </tr> <tr> <td>3</td> <td>葡萄</td> <td>￥16.00</td> <td>2300</td> </tr> </table> <br>
10. 样式/节 标签
标签名称说明style文档的样式信息div文档的节span文档的节headersection或者page的页眉footersection或者page的页脚section定义sectionarticle定义文章aside定义页面内容之外的内容details定义元素的细节dialog定义对话框或窗口
