HTML知识梳理

文本格式化标签

图像标签

<img src="https://blog.csdn.net/qq_44317018/article/details/图像URL" />

超链接标签

<a href="https://blog.csdn.net/qq_44317018/article/details/跳转目标" target="目标窗口的弹出方式">文本或图像</a>

表格标签

<table>
  <tr>
    <th>表头单元格,文字会加粗居中显示</th>
    ...
  </tr>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

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

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

   标签中。

3. <th> 标签表示 HTML 表格的表头部分(table head 的缩写)

4. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。字母 td 指表格数据（table data），即数据单元格的内容。

表格属性

表格结构标签

1. <thead></thead> ： 用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
2. <tbody></tbody> ： 用于定义表格的主体，主要用于放数据本体 。
3. 以上标签都是放在 <table></table> 标签中。

合并单元格

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

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

步骤

1. 先确定是跨行还是跨列合并。

2. 找到目标单元格 , 写上合并方式= 合并的单元格数量。比如：<td colspan= " " ></td>

3. 删除多余的单元格。

列表标签

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

自定义列表的使用场景:

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

去掉 li 前面的项目符号(小圆点) : list-style: none;

表单标签

使用表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

表单域是一个包含表单元素的区域。
<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器 , 写表单元素之前 , 应该有个表单域把他们进行包含

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

常用属性

表单控件(表单元素)

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

input输入表单元素

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）

<input type="属性值" />

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

type属性的属性值

除type 属性外，标签还有其他很多属性

1.name 和value 是每个表单元素都有的属性值,主要给后台人员使用.

2.name 表单元素的名字, 要求单选按钮和复选框要有相同的name值.

3.checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.

4.maxlength是用户可以在表单元素输入的最大字符数, 一般较少使用

1.有些表单元素想刚打开页面就默认显示几个文字怎么做 ?
答: 可以给这些表单元素设置value 属性=“值”
用户名: <input type="text" value="请输入用户名" />

2.页面中的表单元素很多，如何区别不同的表单元素 ?
答: name 属性：当前input 表单的名字，后台可以通过这个name 属性找到这个表单。页面中的表单很多，name 的主要作用就是用于区别不同的表单。
用户名: <input type="text" value="请输入用户名" name="username"/>

• name 属性后面的值，是自定义的

• radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

3.如果页面一打开就让某个单选按钮或者复选框是选中状态 ?
答: checked 属性：表示默认选中状态。用于单选按钮和复选按钮。

<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

4.如何让input表单元素展示不同的形态? 比如单选按钮或者文本框 。
答: type属性：type属性可以让input表单元素设置不同的形态.

<input type="radio" name="sex" value="男" checked="checked" />男
<input type="text" value=“请输入用户名”>

label标签

<label>标签为input 元素定义标注（标签）,
<label>标签用于绑定一个表单元素 , 当点击标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上 , 用来增加用户体验。

用法 :

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

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

select下拉表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表.

用法：

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

1. <select> 中至少包含一对<option>。

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

textarea文本域元素

使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。在表单元素中，<textarea>标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

用法:

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

1. 通过标签可以轻松地创建多行文本输入框。

2. cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS 来改变大小。

防止拖拽文本域 resize : 实际开发中，文本域右下角是不可以拖拽的。

textarea{ resize: none;}

表单元素总结

1. 表单元素包含三大组 , input输入表单元素 , select下拉表单元素 , textarea文本域表单元素

2. 这三组表单元素都应该包含在form表单域里面,并且有name 属性

<form>
  <input type=“text" name=“username”>
  <select name=“city”>
    <option>北京 </option>
  </select>
  <textareaname="message"></textarea>
</form>

Emmet语法

快速生成HTML结构语法

1. 生成标签 直接输入标签名 按tab键即可 , 比如 div 然后tab 键，
   就可以生成 <div></div>

2. 如果想要生成多个相同标签 加上*就可以了 , 比如 div*3 就可以快速生成3个div

3. 如果有父子级关系的标签，可以用 > , 比如 ul > li就可以了

4. 如果有兄弟关系的标签，用 就可以了 , 比如 div p

5. 如果生成带有类名或者id名字的 ， 直接写 .demo 或者 #two tab键就可以了

6. 如果生成的div类名是有顺序的，可以用 自增符号 $

7. 如果想要在生成的标签内部写内容可以用 { } 表示

快速生成CSS样式语法

CSS 基本采取简写形式即可

1. 比如 w200 按tab 可以 生成 width: 200px;

2. 比如 lh26px 按tab 可以生成 line-height: 26px;

快速格式化代码

Vscode 快速格式化代码 : shift alt f

也可以设置 当保存页面的时候自动格式化代码:

1）文件 ------.>【首选项】---------->【设置】；

2）搜索emmet.include;

3）在settings.json下的【工作区设置】中添加以下语句：

“editor.formatOnType”: true,

“editor.formatOnSave”: true

这篇好文章是转载于：学新通技术网