文章目录
HTML
HTML的结构
<!DOCTYPE HTML>
<html>
<head>页面头部相关信息</head>
<body>
页面主体相关内容
</body>
</html>
HTML注释
<!--这里是注释的内容-->
HTML注释里面可以写多行内容
注意事项
- HTML不支持注释嵌套
- HTML注释不能放到标签里
标签
块级元素 独占一行 可设置宽高 不设置宽度 则是浏览器的宽度
行内元素 一行内展示，不能设置宽高 宽高由内容去自动填充
行内块元素 在一行内显示 可设置 宽高
HEAD中的标签
Title标签
标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。
Meta标签
元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
属性
- http-equiv
- 重定向
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">- 指定文档类型和编码类型
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />- 告诉IE浏览器以最高级模式渲染当前网页
<meta http-equiv="x-ua-compatible" content="IE=edge"> - name
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城">
Style标签
在HTML文档内部写CSS样式代码。不推荐这样 一般都是写到外部CSS文件然后引入
网站图标
网站显示的图标
<link rel="icon" href="fav.ico">
引入外部样式文件
<link rel="stylesheet" href="mystyle.css">
BODY中的标签
标题标签（h1-h6）
标题标签有确切的语意，不应该用标题标签来改变一行中的文字的大小，应该用CSS来达到相同的显示效果
标题标签通常用来制作文章或网站的标题。
文本样式标签
1. `<b></b>`：加粗
2. `<i></i>`：斜体
3. `<u></u>`：下划线
4. `<s></s>`：删除线
5. `<sup></sup>`：上标
6. `<sub></sub>`：下标
文本段落标签（块级元素）
<body>
<p>这是一个段落</p>
</body>
显示效果和普通文本样式一样，可以通过CSS来改变样式
超链接标签
属性
- href
链接到的地址 - target
链接到的页面的打开方式 默认为 _self 在当前网页打开，target的值为_blank时 在新的网站打开链接的资源地址 - title
鼠标悬停时显示的标题
href 链接的表现形式
- 目标文档为下载资源。例如：href属性值，指定的文件名称，就是下载操作(rar、zip等)
- 电子邮件链接。前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。
- 返回页面顶部的空链接或具体id值的标签.例如：
<a href="#">内容</a>或<a href="#id值">内容</a> - javascript:是表示在触发
<a>默认动作时，执行一段JavaScript代码。
列表标签 ul，ol
通常和li标签一起用，每条li表示列表的内容
ul (无序列表)
属性
type: 列表标识的类型
1：数字
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符
ol(有序列表)
属性
type：列表标识的类型
- disc：实心圆(默认值)
- circle：空心圆
- square：实心矩形
- none：不显示标识
<span>标签
<span> 标签被用来组合文档中的行内元素。
提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。
注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
图片标签
使用<img/>标签在网页中插入图片。
语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
注意点：
-
src设置的图片地址可以是本地的地址也可以是一个网络地址。
-
图片的格式可以是png、jpg和gif。
-
alt属性的值会在图片加载失败时显示在网页上。
-
还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
-
与行内元素在一行内显示
-
可以设置宽度和高度
-
span标签可以单独摘出某块内容，结合css设置相应的样式
表格标签
表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
一个简单表格的例子
<div class="table">
<table>
<!--表格头-->
<thead>
<!--表格行-->
<tr>
<!--表格列，【注意】这里使用的是th-->
<th></th>
</tr>
</thead>
<!--表格主体-->
<tbody>
<!--表格行-->
<tr>
<!--表格列，【注意】这里使用的是td-->
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
<!--表格底部-->
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
</div>
表格行和列的合并
- rowspan 合并行(竖着合并)
- colspan 合并列(横着合并)
<div class="table">
<table border="1" cellspacing="0">
<!--表格头-->
<thead>
<!--表格行-->
<tr>
<!--表格列，【注意】这里使用的是th-->
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!--表格主体-->
<tbody>
<!--表格行-->
<tr>
<td rowspan="3">上午</td>
<!--表格列，【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<!--表格列，【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<!--表格列，【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td rowspan ="2">下午</td>
<!--表格列，【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<!--表格列，【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody>
<!--表格底部-->
<tfoot>
<tr>
<td colspan="6">课程表</td>
</tr>
</tfoot>
</table>
</div>
表单标签
表单用于显示、手机信息，并将信息提交给服务器
语法
<form>允许出现表单控件</form>
属性
如果需要提交文件 method必须为POST enctype 必须为form-data
-
action
- 表单被提交时发生的动作，提交给服务器处理的地址
-
method
- 定义表单提交数据的方式
- 取值（GET，POST）
-
enctype
-
编码类型，表单数据进行编码的方式，允许表单将什么样的数据提交给服务器
-
取值
- multipart/form-data （允许提交文件）
- text/plain （允许提交普通字符）
- application/x-www-form-urlencoded（允许提交特殊字符）
-
表单控件
- testarea
- input
- select
- lable
盒子标签
其他标签
换行标签 <br>
<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。
分割线 <hr>
<hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容
特殊符号
浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。
常用的特殊符号
| 内容 | 代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
HTML标签属性
HTML标签可以设置属性，属性一般以键值对的方式写在开始标签中。
<div id="i1">这是一个div标签</div>
<p class='p1 p2 p3'>这是一个段落标签</p>
<a href="http://www.luffycity.com">这是一个链接</a>
<input type='button' onclick='addclick()'></input>
为标签设置属性的原因
给标签设置属性是为了后来的CSS和JavaScript能够准确定位到目标标签
注意事项
1.HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。
2.属性值要用引号包裹起来，通常使用双引号也可以单引号。
3.属性和属性值不区分大小写，但是推荐使用小写。
HTML标签分类
我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。
块状元素
常用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
块状元素的特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素
常用的行内元素：
<a> <span> <br> <i> <em> <strong> <label>
特点
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素
常用的行内块状元素：
<img> <input>
行内块状元素的特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
标签嵌套规则
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️
<a href=”#”><span></span></a> ✔️
`<span><div></div></span>` ❌
块级元素不能放在p标签里面，比如
<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p
3581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
