目录
一、html基础知识
1.lang语言种类
en定义语言为英语
zh-CN定义语言为中文
2.字符集
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应使用哪种字符编码。
<meta charset=”UTF-8” />
charset常用值有：GB2312、BIG5、GBK和UTF-8
| GB2312 | BIG5 | UTF-8 |
| 简体中文 | 繁体中文 | 都包含（万国码） |
二、部分标签语法及注意事项
1.段落标签和换行标签
<p></p>是段落标签，并且段落与段落之间会有间距
<br />是换行标签
2.布局标签
这两个标签都是用来布局，但是一行只能放一个<div></div>，<span></span>一行可以放多个。且<div></div>比<span></span>要大
3.图像标签
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名
图像标签的其它属性：
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上显示文字 |
| width | 像素 | 设置图像的宽度 |
| heigh | 像素 | 设置图像的高度[宋1] |
| border | 像素 | 设置图像的边框粗细 |
①图像标签可以拥有多个属性，必须写在标签名的后面。
②属性之间不分前后顺序，标签名与属性、属性与属性之间均以空格分开。
③属性采取键值对的格式，即key=”value”的格式，属性=”属性值”
图片引用的相对路径
| 相对路径分类 | 符号 | 说明 |
| 同一级路径 | 图像文件位于HTML文件同一级 如<img src=”baidu.gif” /> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如<img src=”images/baidu.gif” /> |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级 如<img src=”../baidu.gif” /> |
4.超链接标签
语法格式
<a href=”跳转目标” target=”目标窗口的弹出方式”>文本或图像</a>
| 属性 | 作用 |
| href | 用于指定链接目标url地址（必须属性） |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口打开 |
链接分类
①外部链接：例如<a href=”http://www.baidu.com”>百度</a>
②内部链接：网页内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href=”index.html”>首页</a>
③空链接：如果当时没有确定链接目标时<a href=”#”>首页</a>
④下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
⑤网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
⑥锚点链接：当我们点击链接，可以快速定位到页面中的某个位置
•在链接文本的href属性中，设置属性值为#名字的形式，如<a href=”#two”>name</a>
•找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id=”two”>name</h3>
5.注释
<!--注释语句--> 快捷键：ctrl + /
6.特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|
| 空格符 | |
| < | 小于号 | &It; |
| > | 大于号 | > |
7.表格标签
基本语法
<table>
<thead>
<tr>
<th>表头，表格内文字加粗居中显示</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格内的文字</td>
…
</tr>
<tbody>
…
</table>
①<table></table>是用于定义表格的标签。
②<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
③<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
④字母td指表格数据，即数据单元格的内容。
⑤<thead></thead>用于定义表格的头部；
<tbody>用于定义表格的主体</tbody>。
表格属性
| 属性名 | 属性值 | 描述 |
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或“” | 规定表格单元是否拥有边框，默认为“”，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认为1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
合并单元格
①先确定是跨行还是跨列合并。
•跨行合并：rowspan=“合并单元格的个数”
•跨列合并：colspan=“合并单元格的个数”
②找到目标单元格。写上合并方式=合并的单元格数量。比如：<td colspan=”2”></td>
③删除多余的单元格。
8.列表标签
无序表签
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
…
</ul>
①无序表签的各个列表项之间没有顺序级别之分，是并列的。
②<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
③与之间相当于一个容器，可以容纳所有元素。
④无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
…
</ol>
①<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
②<li>与</li>之间相当于一个容器，可以容纳所有元素。
③有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
①<dl></dl>里面只能包含<dt>和<dd>
②<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。
9.表单标签
<form action=”url地址” method=”提交方式” name=”表单域名称”>
各种表单元素控件
</form>
| 属性 | 属性值 | 作用 |
| action | 地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
表单元素
⑴input标签
①type属性的属性值及其描述
| 属性值 | 描述 |
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）。 |
| checkbox | 定义复选框。 |
| file | 定义输入字段和“浏览”按钮，供文件上传。 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码。 |
| radio | 定义单选按钮。 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据。 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器。 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。 |
②其余常用属性
| 属性 | 属性值 | 描述 |
| name | 由用户自定义 | 定义input元素的名称。 |
| value | 由用户自定义 | 规定input元素的值。 |
| checked | checked | 规定此input元素首次加载时应该被选中。 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度。 |
•••name和value是每个表单元素都有的属性值，主要给后台人员使用。
•name表单元素的名字，要求单选按钮和复选框要有相同的name值。
•checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素。
•maxlength是用户可以在表单元素输入的最大字符数，一般较少用。
⑵<label>标签
<label for=”sex”></label>
<input type=”radio” name=”sex” id=”sex”>
①<label>标签为input元素定义标注（标签）
②<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
③<label>标签的for属性应当与相关元素的id属性相同。
⑶<select>
<select>
<option></option>
<option></option>
<option></option>
…
</select>
下拉标签，用于当有多个选项去选择时节约空间。
⑷<textarea>
<textarea rows=”3” cols=”20”>
文本内容
</textarea>
①通过<textarea>标签可以轻松地创建多行文本输入框。
②cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小。
三、标签
<p></p> 段落标签
<br /> 换行标签
<strong></strong> 加粗
<b></b>
<em></em> 倾斜
<i></i>
<del></del> 删除线
<s></s>
<ins></ins> 下划线
<u></u>
<div></div> 无语义，用来布局
<span></span> 无语义，用来布局
<img src=”图像URL” /> 图片标签
<a></a> 超链接
<table></table> 表格标签
<thead></thead> 表格头部
<tbody></tbody> 表格主体
<tr></tr> 行
<td></td> 行中每个元素
<th></th> 表头部分的元素
<ul></ul> 无序标签
<li></li>
<ol></ol> 有序标签
<li></li>
<dl></dl> 自定义列表
<dt></dt>
<dd></dd>
<form></form> 表单域
<input></input> 输入
<label></label> 标注标签
<select></select> 下拉列表
<textarea></textarea> 文本框标签
[宋1]高度与宽度一般只设置其中之一，另一个会等比缩放
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
