前端学习，html常用知识总结-优快云博客

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

链接分类：

1.外部链接：直接链接到网页地址

2.内部链接：网站内部页面之间的相互链接，直接链接页面内部名称即可（路径）

3.空链接：没有链接目标时可以用“#”占位置

4.下载链接：链接文件或者压缩包

5.网页元素链接：文本，图像，表格，音频，视频都可以添加超链接

6.锚点链接：点我们点击链接，可以快速定位到页面的某个位置

在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>

找到目标位置的标签，里面添加一个id属性=刚才设置的名字，如：<h3 id="two">第二集介绍</h3>

7.注释标签和特殊字符

注释标签：

快捷键：ctrl+/

特殊字符：

在html中一些特殊的符号很难或者不方便直接使用，此时我们使用特殊字符来替代。

8.表格标签

主要作用：表格主要用于显示，展示数据。

（1）基础语法：

1.<table></table>用于定义表格标签

2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中使用

3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

4.<th></th>表头标签，自带加粗和居中对齐，一般表示html表格中的表头部分。

（2）表格属性：

不常用，一般用css来设置

（3）表格结构标签

表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和主体两个部分

1.<thead></thead>定义表格的头部，内部必须拥有<tr>标签。

2.<tbody></body>定义表格的主体，主要用于存放数据本体。

3.所以标签都是放在<table>标签中的。

（4）合并单元格

1.合并单元格的方式

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

2.目标单元格

遵循上左原则，跨行最上为目标单元格，跨列最左为目标单元格。

3.合并单元格三步骤

确定是跨行还是跨列

找到目标单元格，并写上合并方式=合并数量

删除多余的单元格

9.列表标签

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点是整齐，整洁，有序，它作为布局会使布局更加自由和方便。

根据使用场景不同，列表可以分为三大类：无序列表，有序列表和自定义列表

（1）无序列表（重点）

<ul>标签表示html中的无序列表，一般会以项目符号呈现列表，而列表项使用<li>标签定义

1.无序列表的各个列表项之间没有顺序级别之分，是并列的。

2.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>中输入其他标签是不允许的。

3.<li>和</li>之间相当于一个容器，可以包含所有元素。

4.无序列表会带来自己的样式属性，但在实际使用时，我们会使用CSS来设置。

（2）有序列表（理解）

有序顺序的列表，在html中用<ol>标签来定义，<li>标签来定义列表项

1.<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>中输入其他标签是不允许的。

2.<li>和</li>之间相当于一个容器，可以包含所有元素。

3.有序列表会带来自己的样式属性，但在实际使用时，我们会使用CSS来设置

（3）自定义列表（重点）

用<dl>标签来定义描述列表（或自定义列表），<dt>(定义项目/名字)和<dd>（描述每一项的项目/名字）一起使用

自定义场景中使用，定义列表前没有任何的项目符号

1.<dl></dl>标签中只能包含<dt>和<dd>

2.<dt>和<dd>没有个数限制

总结：

10.表单

（1）为什么需要表单

使用表单的目的是为了收集用户信息，在我们网页中，我们也需要跟用户进行交互，收集用户信息

（2）表单的组成

在html中一个完整的表单通常由表单域，表单控件（也称表单元素）和提示信息三部分构成。

（3）表单域

表单域是包含表单元素的区域

在html中，<form>标签用于定义表单域，以实现用户的信息收集和传递

form标签可以把表单元素的信息提交给服务器。

常用属性：

（4）表单控件（表单元素）

1.<input>表单元素

用于收集用户信息，其中必须包含一个tyoe标签，指定input元素的类型。

注意：

<input />标签为单标签。

type属性设置不同的属性值用来表示不同的控件类型。

type可取值有：

注意：单选按钮必须设置相同的name值，以保证单选能使用

value 用户自定义的以规定input的值，主要用于后台开发。

checked 单选和多选按钮时默认使用

maxkength 规定输入字段的最大长度（后面使用正则表达式来实现）

submit 提交按钮，可以通过value来更改默认值。（点了提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器）

reset 充值按钮还原表单中元素的值为初始状态

botton 普通按钮，需要js来搭配使用。

action 来定义提交的位置

file 上传文件

（5）<label>标签

label标签为input元素定义标签

label标签用于绑定一个表单元素，当点击label标签内的文本的时候，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，提升用户体验。

用法：

核心：label标签的for属性应当与相关元素的id属性相同。

（6）select表单元素

在页面中有多个选项让用户选择，并且想要节约页面空间的时候，可以用select标签控件下定义的下拉标签。

1.select中至少包含一对option

2.在option中定义select="selectd"时，当前项即为默认选中项。

（7）.textarea表单元素

文本框，实现多换输入

1.通过<textarea>可以轻松的创建多行文本框

2.clos=“每行的字符数”，row=“显示的行数” ，实际开发者，用css来调节大小。

自学 pink老师前端入门教程笔记