1 HTML简介
HTML(Hyper Text Markup Language，超文本标记语言)。
1993年由W3C互联网组织统一发布了第一版的html页面规范，规定了使用标签（Tag）来渲染页面的结构和样式，迄今为止已经发展到5.1版本。在页面上使用标签来代替一切要素，使用浏览器打开以.html 或者 .htm后缀的文件，浏览器可以解析标签。
2 HTML标签部分解释
浏览器从上到下解析标签，浏览器中的标签解析器渲染标签内写的东西。页面结构由html渲染，页面样式由css（也可以使用html渲染）渲染，页面动作由JavaScript渲染。另外，在浏览器100%缩放情况下，一个汉字占16像素。
所有标签中的width、height已经完全被css取代不赞成使用（本文中介绍的设置样式的方法都可以使用CSS取代），height具有严重的浏览器差异性，且部分浏览器不支持百分比的书写方式。
若宽和高使用百分比方式，需要在与这个标签嵌套关系的标签上都注明这个属性。若高设置百分比不起作用，建议使用像素单位取代。但还是推荐使用CSS替代这两个属性。
2.1 标签分类
- 开闭合标签，形如下面例子的标签：
<tagName>要被渲染的文本</tagName>
<p>这是一个段落</p> - 整合标签，形如下面例子的标签：
<tagName/>
<br />
2.2 HTML的结构、注释标签、转义字符
<!--
这就是html的注释写法
html文件以.html和.htm结尾，一般首行为
dtd文件（Document Type Definition文档类型定义）
此文件用来告诉浏览器使用那种规范的html，此处是html5规范
从html5规范开始，dtd写法不再发生变动
此处如果不书写，默认使用html4.01规范
-->
<!DOCTYPE html>
<!--
html:此处表示html文件的开始，lang属性表示
本文是何种语言的网页，en表示英文网页，zh表示中文网页，
google等搜索引擎根据此参数值和时区决定是否开启翻译功能
-->
<html lang="zh">
<!--
注意根据google前端开发规范，子标签必须在父标签内部一个制表符
（目前更推荐为三个空格）
head:此标签用来设置编码 标题 引入css js文件等
-->
<head>
<!--
meta:此处一般用来设置 关键字 屏幕尺寸 网页描述
以及页面的编码等
-->
<meta charset="UTF-8">
<!--
title:此处表示页面的标题，显示在浏览器中
-->
<title>Example1</title>
</head>
<!--
bgcolor:设置背景色
-->
<body bgcolor="lightgreen">
<!--
转义字符
部分字符不能在页面中直接使用，而必须替换为
特定的转义字符
-->
>大于号
<小于号
空格（注意仅仅空一个像素）
</body>
</html>
| 显示 | 说明 | 实体名称 |
|---|---|---|
| 不断行的空白格 | | |
| < | 小于 | < |
| > | 大于 | > |
| & | 与符号 | & |
| " | 双引号 | " |
| ’ | 单引号 | ' |
| © | 版权 | © |
| ® | 已注册商标 | ® |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
2.3 文本处理标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Example2</title>
</head>
<body>
<!--
h1~h6:表示页面的标题
标题随着序号的增加不断减小，自动换行，自动加粗
-->
<h1>2018圣诞节就要到来啦</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<!--
center:凡是放置在此标签内的超文本全部强制居中对齐
此标签已经被淘汰，不推荐使用
-->
<center>
<h4>我是四级标题</h4>
</center>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<!--
font:设置字体，颜色，大小等参数
注意此标签已经被css取代不推荐使用
<tagName 属性名="属性值" />
-->
<font color="#ff6b23" size="30px" face="楷体">看看我的效果是什么？</font>
<!--
各种样式标签，注意以下标签都用来渲染页面的样式，
已经基本被css取代，但是这些标签并没有被淘汰，
很多标签被应用在UI技术中
-->
<b>加粗</b>
<strong>加粗</strong>
<em>倾斜</em>
<i>倾斜</i>
<ins>添加下划线</ins>
<del>此处为贯穿线</del>
<!--
特定文本标签
以下标签在平时使用较多
p:一般用来放置一段段落，结束自动换行，并且再空一行
div:一般用来搭配css使用，用来限定一个区域的文本
label和span此标签用来设置页面的一些提示信息，
多配合js使用，单独使用没有任何效果
-->
<p>我是一个段落</p>
<div>我是一个层</div>
<label>我是一个label</label>
<span>我是一个span</span>
</body>
</html>
2.4 链接
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Example3</title>
</head>
<body>
<!--
href:表示要连接的资源
可以是一个静态 动态网页或者其他元素
target(常用的值):_blank 在新的标签页打开资源
_self 默认，在当前标签页打开资源
framename 在指定框架中打开资源
路径问题:
相对路径：不以/开头（./表示当前目录，有几个../就表示向上后退几个目录）
绝对路径：以/开头
-->
<a href="base1.html">我是一个链接</a>
<a href="base1.html" target="_blank">我是一个链接</a>
</body>
</html>
2.5 视图
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Example4</title>
</head>
<body>
<!--
img:视图
src:source的简写，是软件开发领域
常见的单词，表示源，这里指的是关联一个当前目录中
image目录下的logo.jpg文件
alt:表示如果资源引入失败要显示的
文本
title:当鼠标放置在图片上时显示的信息
width:这里的使用是因为还没学到css，即使定义了width，
height也不必定义，因为width会使height成比例变化
-->
<img src="image/logo.jpg"
alt="载入失败！"
title="我是一张引入的图片"
width="200px">
</body>
</html>
2.6 列表
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Example5</title>
</head>
<body>
<!--列表在嵌套时，需要在li、dd这种被包含的元素中声明-->
<ul>
<li>我是无序列表1</li>
<li>我是无序列表2</li>
<li>我是无序列表3</li>
<li>
<ul>
<li>我是子无序列表1</li>
<li>我是子无序列表2</li>
<li>我是子无序列表3</li>
</ul>
</li>
</ul>
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3</li>
<li>
<ol>
<li>我是子有序列表1</li>
<li>我是子有序列表2</li>
<li>我是子有序列表3</li>
</ol>
</li>
</ol>
<dl>
<dt>我是自定义列表标题</dt>
<dd>我是列表项1</dd>
<dd>我是列表项2</dd>
<dd>我是列表项3</dd>
<dd>
<dl>
<dt>我是子自定义列表标题</dt>
<dd>我是子列表项1</dd>
<dd>我是子列表项2</dd>
<dd>我是子列表项3</dd>
</dl>
</dd>
</dl>
</body>
</html>
浏览器上的效果图：
2.7 表格
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Example6</title>
</head>
<body>
<!--
table:表格，表示表格的开始 required
border:表示表格的边框的宽度，默认是0
bordercolor:表示表格的边框颜色，默认为黑
cellspacing（见图）:设置表格边框与单元格边框之间的宽度
如果设置为0，则两个边框重叠在一起
cellpadding（见图）:设置单元格内部的内容与边框之间的
距离，默认左对齐没有空隙
tr:被嵌套在table内表示一行
bgcolor:设置行的颜色
align:设置水平对齐的位置（left right center）
valign:设置垂直对齐的位置（top bottom middle）
td:被嵌套在tr内表示一列（若想表格嵌套，需嵌套在td标签中，
通过宽高来设置相对于父元素的大小）
bgcolor:设置行的颜色
align:设置水平对齐的位置（left right center）
valign:设置垂直对齐的位置（top bottom middle）
表格中一行有几列是固定的（以最多列的行数为主，可以通过合并单元格扩展列的宽度）
colspan:合并列，值为合并单元格的个数
rowspan:合并行，值为合并单元格的个数
定义表格时，以上三个标签都必须书写
caption:表示表格标题
-->
<table border="1px" width="400px" height="300px"
cellspacing="0" cellpadding="0">
<caption>我是表格标题</caption>
<tr bgcolor="#ff9336">
<td align="right">测试</td>
<td align="left">测试</td>
<td align="center">测试</td>
<td>测试</td>
</tr>
<tr>
<td valign="top">测试</td>
<td valign="middle">测试</td>
<td valign="bottom">测试</td>
<td>测试</td>
</tr>
<tr>
<td colspan="4">我是唯一的一行</td>
</tr>
<tr>
<td>测试1</td>
<td>测试2</td>
<td>
<table cellspacing="30px" bgcolor="yellow"
width="100%" height="100%" bordercolor="red"
border="2px" cellpadding="10px">
<tr>
<td>内置列1</td>
<td>内置列2</td>
<td>内置列3</td>
</tr>
<tr>
<td>内置列1</td>
<td>内置列2</td>
<td>内置列3</td>
</tr>
</table>
</td>
<td>测试4</td>
</tr>
</table>
</body>
</html>
2.8 表单 ★
命名时（name、id等需要写在html中的名字）不要使用中文（解析乱码），不要包含空格（会被解析为“%”）、不要使用“-”、不要以数字开头或存在特殊字符。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Example6</title>
</head>
<body>
<!--
form:表示表单的开始，所谓表单是指通过form
标签内部的input表单项，来收集用户输入的信息，
以键值对的方式发送给action设置的目的地
action:设置转发的目的地，此处我们填写的是静态页面，没有实际意义，
待到后面学了后端结合之后再改
method:表示提交表单的类型，存在get和post两种提交方式
-->
<form action="base1.html" method="get">
<!--
1):单行文本输入框
type="text"
label表示嵌套显示的页面上的文本，for属性
对应input表单项的id属性，不是必须，只是
添加之后用户点击label标签中的文字 光标即
聚焦到这个文字对应的input表单输入框中
input:
type表示那种表单项，固定写法不能随意书写
text表示单行文本输入框
name表示键值对的key
value表示键值对的value值，但是注意
这个值就是用户填写到表单中的值，一般不去书写
required:h5新特性，表示此处必须填写
autocomplete:h5新特性，表示浏览器不记录
用户书写的信息
placeholder:在信息书写时显示的提示
-->
<label for="nameid">用户姓名:</label>
<input type="text" name="etoakname"
id="nameid" required autocomplete="off"
placeholder="请输入用户姓名"/>
<br>
<!--
2)单行文本密码框
type="password"
-->
<label for="passid">用户密码:</label>
<input type="password" name="etoakpass"
id="passid" required autocomplete="off"
placeholder="请输入用户密码" />
<br>
<!--
3)单选框
type="radio"
checked表示默认选中
也可以使用required设置必填
value值必须书写表示传递的值
一般优先使用数字其次英文最次汉字
-->
性别:
<input type="radio" name="sex"
value="0" checked />女
<input type="radio" name="sex"
value="1" />男
<br>
<!--
4)多选框
type="checkbox"
-->
爱好:
<input type="checkbox" name="hobby"
value="game" />游戏
<input type="checkbox" name="hobby"
value="music" />音乐
<input type="checkbox" name="hobby"
value="sleep" checked />睡觉
<input type="checkbox" name="hobby"
value="playcards" id="playcards"/>
<label for="playcards">打牌</label>
<input type="checkbox" name="hobby"
value="study" />学习
<br>
<!--
5)下拉列表框
注意下拉列表框不是input标签
name:表示key值
value:表示value值
selected表示默认选中
-->
归属地:
<select name="location">
<option value="0">请选择归属地</option>
<option value="1">济南</option>
<option value="2">济宁</option>
<option value="3">德州</option>
<option value="4">淄博</option>
<option value="5">烟台</option>
</select>
<!--
6)隐藏域
type="hidden"
隐藏域无法被用户察觉，隐藏在页面上
开发者设置key和value值，在用户不知情的情况下
传递值，多用于分页等场合，如果需要传递多个键值对
则可以书写多个隐藏域
-->
<input type="hidden" name="thisiskey"
value="thisisvalue" />
<br>
<!--
7)上传控件
type="file"
注意上传必须使用post
-->
上传文件:<input type="file"
name="suibianxie" />
<br>
<!--
8)普通按钮
type="button"
注意此按钮不能用来传递值，多搭配JavaScript使用
单独使用没有任何效果
-->
<input type="button" value="我是一个普通按钮" />
<!--
9)可提交图片
注意此控件引入到页面上一副图片，
点击此图片可以提交表单（需要放置在表单内）
-->
<input type="image" src="image/1.jpg" />
<!--
10):提交按钮
type="submit"
注意 按钮不写name属性
仅仅书写value属性，表示按钮上显示的信息
另外在chrome等浏览器中可以不写value
默认就是提交和取消，ie不支持此效果
-->
<input type="submit" value="提交" />
<!--
11):取消按钮
type="reset"
-->
<input type="reset" value="取消" />
</form>
</body>
</html>
- 表单提交时GET与POST的区别
- GET:速度快，但安全性低下，通过浏览器地址栏传递值，传递的格式是：“地址?key1=value1&key2=value2&keyN=valueN”，最多传递256个字符，不支持中文（会乱码）。注意如果使用链接传递值时肯定是GET方式，也可以这么用：
<a href=“地址?key=value&keyN=valueN”>我是一个链接 - POST:速度慢，安全性高，不通过浏览器地址栏传递值。通过http数据报的消息体传递值，传值格式与get完全一致，但我们无法查看，不支持中文（会乱码），没有大小限制，所以上传等操作，必须使用POST。
- GET:速度快，但安全性低下，通过浏览器地址栏传递值，传递的格式是：“地址?key1=value1&key2=value2&keyN=valueN”，最多传递256个字符，不支持中文（会乱码）。注意如果使用链接传递值时肯定是GET方式，也可以这么用：
2.9 iframe
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Example7</title>
</head>
<body>
<center>
<table width="600px" height="800px">
<tr>
<td width="150px" height="800px">
<ul>
<!--
target:锚标，表示链接从哪里打开
如果填写一个指定的值，对应
iframe中引入的页面，则
从哪个iframe中打开
-->
<li><a href="1.html"
target="right">我是列表1</a></li>
<li><a href="2.html"
target="right">我是列表2</a></li>
<li><a href="3.html"
target="right">我是列表3</a></li>
</ul>
</td>
<td width="450px" height="800px">
<!--
iframe:引入一个外部的页面到本页面
src表示引入外部页面的路径
frameborder="0"
设置引入的页面的边框，一般为了美观
不显示边框
name:对应链接的target属性值，单击左边的超链接
之后，iframe的区域会被跳转的页面覆盖掉
-->
<iframe src="main.html"
frameborder="0"
width="100%" height="100%"
name="right"></iframe>
</td>
</tr>
</table>
</center>
</body>
</html>
main.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="#cc663399">
</body>
</html>
1.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="lightblue">
我是1.html
</body>
</html>
2.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="orangered">
我是2.html
</body>
</html>
3.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="deeppink">
我是3.html
</body>
</html>
效果界面
3 Emmet插件HTML中的使用
在Intellij IDEA中，Emmet插件已自动集成，不需要再安装。这个插件对写HTML、XSL以及CSS的效率有及大的提升作用，只需要输入一行Emmet语法，按TAB（IDEA中的setting->Editor->Emmet可以重新设置这个按键）可以一键生成HTML语法。这里po上几个初步的语法。
3.1 写出具有包含关系的语法（使用“>”）
table>tr>td
<table>
<tr>
<td></td>
</tr>
</table>
3.2 写出具有同级关系的语法（使用“+”）
p+h1+h2
<p></p>
<h1></h1>
<h2></h2>
3.3 返回上一级标签级（使用“^”）
table>tr>td+td^tr
table>tr>td+td^^table
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr></tr>
</table>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table></table>
3.3 分组（使用“()”）
table>((tr>td+td)+(tr>td+td))
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
3.4 复制多行重复标签（使用“*”）
table>(tr>td+td)*3
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
3.5 生成标签中输出的文字内容（使用“{}”）
p{一二三四五}
<p>一二三四五</p>
3.6 定义标签属性的键值（使用“[]”）
input[type=“text” id name required]
<input type="text" id="" name="" required>
3.7 在批量生成时按一定顺序生成数字（使用“$”）
从例子中可以看出，根据“$”的增加，数字的位数不断增长，以此类推。- select>option[value=“item$”]*3
<select>
<option value="item1"></option>
<option value="item2"></option>
<option value="item3"></option>
</select>
- select>option[value=“item$@-”]*3
<select>
<option value="item3"></option>
<option value="item2"></option>
<option value="item1"></option>
</select>
- select>option[value=“item$@9”]*3
<select>
<option value="item9"></option>
<option value="item10"></option>
<option value="item11"></option>
</select>
- select>option[value=“item$@-9”]*3
<select>
<option value="item11"></option>
<option value="item10"></option>
<option value="item9"></option>
</select>
- select>option[value=“item$$”]*3
<select>
<option value="item01"></option>
<option value="item02"></option>
<option value="item03"></option>
</select>
- select>option[value=“item$$@-”]*3
<select>
<option value="item03"></option>
<option value="item02"></option>
<option value="item01"></option>
</select>
- select>option[value=“item$$@9”]*3
<select>
<option value="item09"></option>
<option value="item10"></option>
<option value="item11"></option>
</select>
- select>option[value=“item$$@-9”]*3
<select>
<option value="item11"></option>
<option value="item10"></option>
<option value="item09"></option>
</select>
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
