前言：
HTML：(HyperText Markup Language)超文本标记语言，是 网页制作必备的编程语言
HTML的发展历程：
一.HTML标签
1、标题标签：h1-h6
h1代表1级标题，h6代表6级标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
2.段落标签：p
p标签，缩写为(paragraph 段落） 会让包含在其中的内容成为一个段落
<p>文本内容</p>
3.水平线标签（单标签）
缩写为（horizontal 横线），为单标签，没有内容，/在hr后面的，会显示一条横线
<hr /> 或者 <hr>
4.换行标签（单标签）
<br />：单词缩写 break ，意为打断，换行。<br />的地方会换行
<br />或者 <br >
5.div 和span 标签
div 使division 的缩写，分割区分的意思
span 跨度，跨距，范围
这两个标签是网页用来布局的2个盒子
<div>文本内容</div> <span>文本内容2</span>
6.文本格式化标签
文本格式化标签主要有4个
| <b></b> <strong></strong> | 加粗 | 推荐使用strong |
| <i></i> <em></em> | 倾斜 | 推荐使用em |
| <s></s> <del></del> | 删除 | 推荐使用del |
| <u></u> <ins></ins> | 下划线 | 推荐使用ins |
<b>加粗</b> <br>
<strong>推荐的加粗</strong>
<hr>
<i>倾斜</i> <br>
<em>推荐的倾斜</em>
<hr>
<s>删除</s><br>
<del>推荐的删除</del>
<hr>
<u>下划线</u> <br>
<ins>推荐的下划线</ins>
为什么推荐使用后者，因为两者都可以达到一样的效果，但是后者更符合XHTML的标准，既语义化
7.图片标签img
src是图片标签的必写属性
<img src="D:\media\1rr.png" alt="加载失败" title="周杰伦" width="400" border="13">8.链接标签 a
a标签必须有href属性，链接地址必须加上协议，如http，ftp等
<a href="http://www.baidu.com">百度</a>
<a href="http://www.zhihu.com">知乎</a>
1.href属性详解：
href在意思是指定超链接目标的URL。在HTML和JSP页面代码里的作用是标签，其作用是插入一个超链接，“#”是默认当前页面，可以把#换成想跳转的页面。
我们经常看到 <a href="#">我的订单</a>
href="#" 等于单独一个“#” 意思是链接当前页面。没有什么特殊意义。
通常有如下用法： <a href="#" οnclick="window.close()">关闭</a> 。
将href="#"是指链接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击“关闭”时，会执行window.close()代码。
扩展资料:
href="URL"的作用
1、URL为绝对URL
此时指向另一个站点，比如href="http://write.blog.csdn.net",那么点击时就会直接跳转到这个链接的页面。
2、URL为相对URL
此时指向站点内的某个文件，比如href="/test.doc"，那么点击时就会直接下载文件。
3、锚点定位
当网页比较长时，点击该链接时，会跳转到网页某个位置
比如href="#top"，那么点击时就会到当前页面中id="top"的这个锚点,实现当前页面的所谓跳转。用的最多就是在可滚动页面中，添加菜单，可以直接回 到页面中的某个部分的内容。
<a href="#tedian">1 个人特点</a>
<p id="tedian">个人特点非常鲜明，好学，认真，善良。。。。。。。。。。。。。。。。。。。。。。。</p>
9.base标签
base可以设置页面中的整体链接是以何种方式打开，base 位于head标签中
<head>
<meta charset="UTF-8">
<title>Document</title>
<base target="_blank" />
</head>
<body>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.zhihu.com">知乎</a>
</body>设置target=“_blank” 则是用新标签打开，而target="_self"则是替换当前页面。默认不设置的话为_blanks
10.特殊符号
HTML中表示空格得用 这是比较常用的，如下图：
11.注释标签
<!-- 这是注释的内容 -->
12.列表
1.无序列表ul
ul 和li 配合使用，注意点有：
1.ul中只能放 li
2.li是一个容器，里面可以容纳任何元素
<h3>篮球明星</h3>
<ul>
<li>库里</li>
<li>乔丹</li>
<li>科比</li>
</ul>效果：
2.有序列表
ol 和li 配合使用
<ol>
<li>库里</li>
<li>乔丹</li>
<li>科比</li>
</ol>效果如下：
3.自定义列表dl
dl 和dt、dd配合使用，dt定义标题，dd 用来描述dt
<dl>
<dt>NBA</dt>
<dd>湖人队</dd>
<dd>勇士队</dd>
<dd>小牛队</dd>
</dl>
效果：
14.列表table
table不是用来布局的，最好用来做纯粹的表格
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>刘德华</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td>周杰伦</td>
<td>女</td>
<td>16</td>
</tr>
</table>
th代表 header 表头。tr代表row，td代表一个单元格， tr只能签套td，但是td能放任何东西。
th表头会默认加粗和单元格居中
table的主要属性：
cellspacing 就类似margin，cellpadding就是padding
thead和tbody，这两个属性用于区分表头部分和表内容部分，实际上不显示。用于区分结构。如下：
<table >
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘德华</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td>周杰伦</td>
<td>女</td>
<td>16</td>
</tr>
</tbody>
< /table>table中可以写caption标签，既标题，刚刚的th是表头，既列名，这个是标题，如下：
<table >
<caption>演员表<caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘德华</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td>周杰伦</td>
<td>女</td>
<td>16</td>
</tr>
</tbody>
< /table>
合并单元格：使用rowspan 和colspan：
如下代码，演示rowspan：colspan同理
<table border="1" cellspacing="1" cellpadding="10">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>刘德华</td>
<td>男</td>
<td >29</td>
</tr>
<tr>
<td>周杰伦</td>
<td >女</td>
<td rowspan="2" >29</td>
</tr>
<tr>
<td>成龙</td>
<td>男</td>
</tr> 
rowspan 和colspan 是从左往右，从上到下去扩展的。如上例中，删除的是成龙的29，而不是周杰伦的。
15.表单form
1.input 输入标签，单标签
可以用type来改变样式，可以是输入框，也可以是单选框，也可以是按钮。
<p>用户名: <input type="text"/> </p>
<p>密码: <input type="password"/> </p>
input标签的type和属性如下：
1.单选框radio，由name来决定是否为一组 ， 属性checked 来表示默认是否选中 如：
性别： <input type="radio" name="sex" checked="checked"> 男 <input type="radio" name="sex"> 女
2.按钮组，有button，submit，reset，image，file 等几个主要的
<!-- 普通按钮 -->
<input type="button" value="我是button按钮"><br/><br/>
<!-- 提交按钮 -->
<input type="submit" ><br/><br/>
<!-- 重置按钮 -->
<input type="reset"><br/><br/>
<!-- 图片按钮 -->
<input type="image" src="C:\33344.png"><br/><br/>
<!-- 选择文件按钮 -->
<input type="file"><br/><br/>
placeholder属性：
可以实现在输入框中显示浅色的文字，输入其他文字会覆盖，如：
<p>用户名: <input type="text" placeholder="zhangsan"/> </p>
<p>用户名2: <input type="text" value="zhangsan"/> </p>
3.label 标签：
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。但是当用户点击lable标记的元素时，会自动将焦点设置在该元素上。使用for属性来标记 配合id。lable是为了提升鼠标用户的焦点体验。如：
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
4.文本域控件textarea:
可以输入多行文本,如：
<textarea name="" id="" cols="30" rows="10"></textarea>
5.下拉框控件select
option中定义 selected=“selected” 即为默认选中项
<select name="" id="">
<option value="" selected="selected">选择城市</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
6.表单域
表单域就是form， 表单控件需要用form包括起来。如：
<form action="test.php" method="get" name="">
用户名：<input type="text" name="username"><br/><br/>
密码：<input type="password" name="pwd"><br/><br/>
<input type="submit" value="提交">
<input type="reset"><br/><br/>
</form> 
点提交的时候，因为method是get，所以会在链接中显示出属性。 post则不会
总结下HTML的单标签：
单标签就是由一个标签组成的。下面就是HTML中的单表签，其余的标签都是双标签
<br> 空格
<hr> 横线
<input> 输入标签
<img> 图片
<meta>
<link>
<embed>
<param>
16.HTML5新增标签：
1.HTML5常见的标签：
<header> 语义 :定义页面的头部 页眉</header>
<nav> 语义 :定义导航栏 </nav>
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义: 定义文章</article>
<section> 语义： 定义区域</section>
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>2.datalist:选项列表，与input配合使用
<input type="text" value="输入地区" list="diqu">
<datalist id="diqu">
<option >浙江</option>
<option >南京</option>
<option >北京</option>
<option >南昌</option>
</datalist>input标签用list属性绑定datalist的id，datalist本身并不显示
3.fiedset标签：意为字段的集合
可将表单内的元素分组，打包，与legend搭配使用，legend定义标题
<fieldset>
<legend>用户登录</legend>
用户名：<input type="text"><br> <br>
密码：<input type="password">
</fieldset> 
4.HTML5新增的input的type属性：
5.meter 标签
H5新增的，用于度量给定范围内的数据：
<p>显示度量值：</p>
<meter value="10" min="0" max="100"></meter><br>
<meter value="0.7"></meter>
Internet Explorer 不支持 meter 标签。
6.多媒体标签
-
embed：标签定义嵌入的内容
-
audio：播放音频
-
video：播放视频
4289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
