一、HTML
1.HTML简介
HTML（HyperText Markup Language）就是超文本标记语言。"超文本"就是表示⻚面内可以包含非文字元素，如：图片、链接、音乐等等。
1.1 基础语法
1.1.1 标签
HTML 标记是由"<“和”>"所括住的指令标记，用于向浏览器发送标记指令。
主要分为：单标记指令、双标记指令（由"<起始标记>“＋内容＋”</结束标记>"构成）。
1.1.2 整体结构
<!-- 声明当前HTML的版本是HTML5 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--主体内容-->
</body>
</html>
2.常用标签
HTML⻚面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染，我们需要记忆常用的标签即可。大致可分为如下几类：标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div 和 span等。
2.1 标题和水平线
2.1.1 标题
h1 - h6 标签可定义标题，标题依次递减，由于 h 元素拥有确切的语义，因此请慎重地选择恰当的标签层级来构建文档的结构。请不要利用标题标签来改变同一行中的字体大小。
h999这样的标签不产生错误，但是不具有标题的效果。
h1标签可以为搜索引擎获取，便于⻚面在被搜索的时候检索到，但是一个⻚面最好只有一个h1标签，否则可能进入搜索引擎的黑名单。
<!--标题（块级元素：元素会自动换行）h1~h6,依次递减-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
...
2.1.2 水平线
hr 标签在 HTML ⻚面中创建一条水平线（horizontal rule）可以在视觉上将文档分隔成各个部分。在 HTML 中，hr 标签没有结束标签。
<!--hr 水平线-->
<hr />
<hr>
<hr width="80%" />
<hr width="80%" align="left" size="5" />
<hr width="80%" align="left" size="5" color="red" />
常用属性：
2.2 段落和换行
2.2.1 段落
p标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
<!--p 段落，行之间会有间隙
属性：align对齐方式
center 居中对齐
left 居左对齐（默认）
right 居右对齐
-->
<p align="center">p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
<p align="right">p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
常用属性：
2.2.2 换行
br标签为换行符号 br 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。
注意：br 标签只是简单地开始新的一行，而当浏览器遇到 p 标签时，通常会在相邻的段落之间插入一些垂直的间距。请使用br 来输入空行，而不是分割段落。
<!--br 换行，单标签
<br>
<br/>
-->
你好<br />
HELLO
2.3 列表
2.3.1 无序列表
由 ul 和 li 标签组成。
<!--列表：
无序列表
<ul>
<li></li>
</ul>
可以改变无序列表前面点的形状 type
dise：实心圆（默认）circle：空心圆square：方块
-->
<ul type="circle">
<li>好好学习</li>
<li>天天向上</li>
<li>天天向上</li>
</ul>
常用属性：
2.3.2 有序列表
由 ol 和 li 标签组成。
<!--列表：
有序列表
<ol>
<li></li>
</ol>
可以改变有序列表前的数字type
a,A,1,i,I
-->
<ol type="a">
<li>好好学习</li>
<li>天天向上</li>
<li>天天向上</li>
</ol>
常用属性：
2.4 div和span
2.4.1 div
div是一个块级元素，通常与css配合使用，用于布局。
div 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 div 固有的唯一格式表现。可以通过 div 的 class 或 id 应用额外的样式。
<!--div
层，默认宽度占父元素的总宽度（默认含一行）
属性：
对齐方式 align
宽度 width
高度 height
-->
<div style="width: 200px;">你好</div>
<div>Hello</div>
常用属性：
2.4.2 span
span标签被用来组合文档中的行内元素，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
<!--span
块，默认是有多少内容占多少地方
-->
<span>你好</span>
<span>Hello</span>
2.5 格式化标签
2.5.1 font
规定文本的字体、字体尺寸、字体颜色。
<!--font
规定文本的字体，字体尺寸，字体颜色
-->
<font color="red" size="4" face="楷体">规定文本的字体、字体尺寸、字体颜色</font>
2.5.2 pre
定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体（原样输出）。
<!--pre
定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体
-->
<pre>
定义预格式化的文本。
被包围在 pre 元素中的文本通常会保留空格和换行符。 而文本也会呈现为等宽字体
</pre>
2.5.3 文本标签
<!--
<b>（粗文本）、<i>（斜体文本）、<u>（下划线文本）、
< del >（中划线文本）、<sub>（下标文本）、<sup>（上标文本）
-->
你好<br />
<b>你好</b>
<strong>你好</strong>
<i>你好</i>
<u>你好</u>
<del>你好</del><br />
H<sub>2</sub>O
2<sup>3</sup>
3.a标签
a标签定义超链接，用于从一张⻚面链接到另一张⻚面。
a元素最重要的属性是 href 属性，它指示要链接的目标位置，同时没有href属性a标签内的内容与普通文本没有区别，也就失去了超链接的功能。
若是想要跳转到当前⻚面，那么href的值为#。被链接⻚面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
<!--
a标签
超链接，用来从一个页面链接到另一个页面
属性：
href：需要链接的页面地址 （如果不设置这个标签，则和普通的文本没有区别）
target：打开的方式
_self：当前窗口（默认）
_blank：新开空白窗口
-->
<a href="http://www.baidu.com">百度</a><br>
<a href="http://www.baidu.com" target="_self">百度</a><br>
<a href="http://www.baidu.com" target="_blank">百度</a><br>
常用属性：
锚点的实现：
<!-- 锚点的实现
设置锚点：
1. a标签
设置name属性值
2.其他标签（包含a标签）
设置id属性值
锚点定位：
<a href="#name属性值或id属性值"></a>
-->
4.图片
img 元素向网⻚中嵌入一幅图像。
注意：从技术上讲，img 标签并不会在网⻚中插入图像，而是从网⻚上链接图像。img 标签创建的是被引用图像的占位空间。
<!-- img标签
图片标签，引入一张图片 （图片的地址）
属性：
src：需要引入的图片的地址
width：宽度
height：高度
title：当鼠标悬停在图片上时，显示的文字
-->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
<img src="img/test.jpg" width="200px" height="200px" border="3" alt="新安" title="雨后新安江薄雾轻罩 楼阁若隐若现如仙境" />
必须属性：
常用属性：
5.表格
table 标签定义 HTML表格。
tr 标签定义表格的行。tr元素包含一个或多个th或td元素
td 标签定义 HTML 表格中的标准单元格。
th 定义表格内的表头单元格。th元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对⻬的普通文本。
简单的HTML表格由table元素以及一个或多个tr、th、或td元素组成。
理解：table相当于一个表格的外框，tr为行，td为一个一个单元格，th为有标题作用的单元格，th中的内容同时有加粗的效果。
<!-- table表格
style="border-collapse: collapse;"
边框的显示效果
collapse 合并边框
separate 分离边框（默认）
-->
<table border="1" width="600px" height="300px" align="center" style="border-collapse: collapse;">
<tr>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
</tr>
<tr align="center" valign="top" bgcolor="aquamarine">
<td>张三</td>
<td>123456</td>
<td>18</td>
</tr>
常用属性：
tr常用属性：
td 的colspan和rowspan分别规定单元格横跨的列数和行数。
6.表单
6.1 form
form 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元素。
表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。
<form action="" method="get">
</form>
常用属性：
method：表单提交方式：get、post。
get：默认，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存。
post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存。
6.2 input
input 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等。
<!-- 文本框 text -->
用户名称：<input type="text" id="uname" name="uname" value="zhangsan" readonly="readonly" /> <br />
<!-- 密码框 password -->
用户密码：<input type="password" name="upwd" maxlength="6" /> <br />
<!-- 单选框 radio 注：一组单选框必须设置相同的name属性值 -->
用户性别：<input type="radio" name="usex" value="man" checked="checked" />男
<input type="radio" name="usex" value="woman" />女
<input type="radio" name="usex" value="unknown" disabled="disabled" />未知
是否已婚： <input type="radio" name="isMarried" />是
<input type="radio" name="isMarried" />否
<!-- 复选框 checkbox 注：一组复选框必须设置相同的name属性值 -->
兴趣爱好：<input type="checkbox" name="hobbys" value="sing" checked="checked" /> 唱歌
<input type="checkbox" name="hobbys" value="dance" /> 跳舞
<input type="checkbox" name="hobbys" value="rap" /> Rap
<!-- 文件域 file -->
上传头像：<input type="file" name="uhead" />
<!-- 普通按钮 button -->
<input type="button" value="普通按钮" />
<!-- 重置按钮 reset 注：不能重置默认值-->
<input type="reset" value="重置按钮" />
<!-- 图片提交按钮 image -->
<input type="image" src="img/test.jpg" width="20px" height="20px" />
<!-- 隐藏域 hidden-->
<input type="hidden" name="uId" value="1" />
常用属性：
若上传文件，请求方式为post，且表单添加一个属性:enctype=“multipart/form-data”
注意：
- 没有name属性的属性是无法提交到后台的！！！！
- Radio单选按钮以name相同为一组。
- Checkbox复选按钮以name相同为一组。
6.3 textarea
该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols规定文本区内的可⻅宽度。rows规定文本区内的可⻅行数。
<!--textarea 文本域 -->
个人简介：
<textarea cols="50" rows="10" name="uremark"></textarea>
6.4 label
label 标签为input 元素定义标注（标记）。
label元素不会呈现任何的特殊效果。
label标签的for属性应当与相关元素的id属性相同，此时点击label标签会自动为元素聚焦。
<label for="uname">用户名称：</label><input type="text" id="uname" name="uname" value="zhangsan" readonly="readonly" /> <br />
6.5 button
<!-- 提交按钮 submit-->
<input type="submit" value="提交" />
<!-- button按钮 -->
<button type="button">普通按钮</button>
常用属性：
6.6 select
<!-- select 下拉框-->
选择颜色：<select name="color" multiple="multiple" size="3">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue" selected="selected">蓝色</option>
<option value="black">黑色</option>
<option value="white">白色</option>
</select>
<select name="color" >
<option >红色</option>
<option value="green">绿色</option>
<option value="blue" selected="selected">蓝色</option>
<option value="black" disabled="disabled">黑色</option>
<option value="white">白色</option>
</select>
select常用属性：
option常用属性：
7.常用字符实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
实体名称对大小写敏感！
8.标签的分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
8.1 块级元素
元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
8.2 行内元素
和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
8.3 行内块状元素
和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
扫一扫
1390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
