HTML基础知识（下）

HTML中的注释和特殊字符

注释标签

以<!--开头，以-->结尾。

<!--注释语句-->

快捷键：Ctrl+/

特殊字符

特殊字符	名称	字符代码
	空格符	&nbsp；
<	小于号	&lt；
>	大于号	&gt；
&	和号	&amp；
¥	人民币	&yen；
©	版权	&copy；
®	注册商标	&reg；
⁰	摄氏度	&deg；
±	正负号	&plusmn；
×	乘号	&times；
÷	除号	&divide；
²	平方号	&sup2；
³	立方号	&sup3；

表格标签

表格作用

展示、显示数据。

基本语法

<table>
	<tr>
		<td>单元格内的文字</td>
		...
	</tr>
	...
</table>

<table></table>:定义表格标签。
<tr></tr>：定义行，须在<table></table>中。
<td></td>：定义单元格，须<tr></tr>中。

表头单元格标签

<table>
	<tr>
		<th>表头名</th>
		...
	</tr>
	...
</table>

表格属性

（以后用CSS）这些属性要写在表格标签<table></table>里面。

属性名	属性值	描述
align	left、center、right	表格相对元素周围的对齐方式
border	1或" "	边框，默认为" ",表示没有
cellpadding	像素值	单元边沿与内容间的空白，默认1
cellspacing	像素值1	单元格之间的空白，默认2
width	像素值或百分比	规定表格的宽度

制作表格：
1.第一行里面是th表头单元格。
2.第二行开始是td普通单元格。
3.单元格里面可以放任何元素，文字链接、图片等。
书写属性：
1.用宽度、高度边框cellpadding和cellspacing。
2.表格浏览器中对齐align。

表格结构标签

将表格分割成表格头部和表格主体两大部分。
1.<thead>标签：表格的头部标签，其内必须有<tr>标签。
2.<tbody>标签：表格的主体区域。
以上标签必须放<table></table>标签中。

合并单元格

跨行合并

rowspan="合并单元格的个数"

跨列合并

colspan="合并单元格的个数"

目标单元格（写合并代码）
跨行： 最上侧单元格为目标单元格。
跨列： 最左侧单元格为目标单元格。

使用步骤：
1.确定跨行、跨列。
2.找目标单元格，写"合并方式=合并单元格数量"。
<td colspan="2"></td>
3.删除多余单元格。

列表标签

作用： 用来布局：整齐、整洁、有序。
分类： 无序列表、有序列表、自定义列表。

无序列表

<ul>
一般以项目符号呈现列表项，而列表项用<li>标签定义。

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	...
</ul>

各列表项间无顺序之分，各列表向前自动生成•。
<ul></ul>只能嵌套<li></li>，直接输入文字也不对。
<li></li>中可以容纳所有元素。
无序列表带有自己的样式属性，用CSS设置。

有序列表

<ol>
列表排序以数字来显示，用<li>定义列表项。

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	...
</ol>

<ol></ol>只能嵌套<li></li>，直接输入文字也不对。
<li></li>中可以容纳所有元素。
有序列表带有自己的样式属性，用CSS设置。

自定义列表

常用于对术语或名词进行解释和描述.。
定义列表的列表前无任何项目符号。
<dl>定义列表，与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
</dl>

<dl></dl>里面只包含<dt>和<dd>。
<dt>和<dd>个数无限制，经常一个<dt>对应多个<dd>。

（并列关系用无序，上下级关系用有序，解释用自定义）
列表布局在学CSS后完成。

表单标签

目的：收集用户信息。
表单组成：表单域、表单控件（表单元素）、提示信息。

表单域

包含表单元素的区域。
<form>实现用户信息的收集传递,把它范围内的表单元素信息交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
	各种表单元素控件
</form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器，程序的url地址
method	get/post	用于设置表单数据提交方式,取值get/post
name	名称	用于指定表单名称，以区分同页面中多个表单域

目前不用表单域提交数据，只需写上form标签。
（post提交比get安全）
注：
1.在我们写表单元素前，应有个表单域将其包含。
2.表单域是form标签。

表单元素

用来填信息，允许用户在表单中输入或选择的内容控件。

input输入表单元素

<input>标签

用于收集用户信息。
包含一个type属性。
根据不同type属性值，输入多种形式字段。
（文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）

<input type="属性值" />

<input/>标签为单标签。
type属性设置不同的属性值来指定不同控件类型。

属性	描述
button	可点击按钮（多通过JavaScript启动脚本）
checkbox	复选框
file	输入字段和"浏览"按钮，供文件上传
hidden	隐藏的输入文字
image	图像形成的提交按钮
password	密码字段，该字段中的字符被掩码
radio	单选按钮
reset	重置按钮（清除表单所有数据）
submit	提交按钮（把表单数据发送到服务器）
text	单行的输入字段，用户可在其输入文本，默认宽度20字符

其他属性（除type外）

属性	值	描述
name	自定义	定义input元素名称
value	自定义	规定input元素值
checked	checked	规定此input元素值首次加载时应选中
maxlength	正整数	规定输入字段中的字符最大长度

name和value是每个表单元素都有的属性值（供后台人员使用）。
name：表单元素名字。单选按钮和复选框都要有相同的name值。
checked：主要针对单选按钮和复选框（默认选择）。
maxlength：输入的最大字符数。

<label>标签（input元素定义标注标签）

绑定一个表单元素，当点击<label>标签内的文本时，浏览器自动将焦点（光标）转到或选择对应表单元素。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

select下拉表单元素

有多个选项且节约页面空间。

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>

<select>中至少包含一对<option>。
<select>应在<form>中。
<option>中定义selected="selected",默认选项。

textarea文本域元素

用户输入内容较多，替换文本框。
用于多行文本输入（留言板、评论等）。

<textarea rows="3" cols="20">
	文本内容
</textarea>

cols=“每行中的字符数”；rows=“显示的行数”
（实际用CSS）

查阅文档

1.百度：http://www.baidu.com
2.W3C：http://www.w3school.com.cn/
3.MDN：https://developer.mozilla.org/zh-CN/

文章内容为观看他人视频学习笔记，仅个人学习记录