HTML学习总结

标签语言毕竟不是真正的编程语言

直奔主题
小技巧：英文！+Tab可以在vscode一键生成html模板（当然，你需要下载对应插件并在设置打开）

本文旨在记录一些易忘记的知识点。

类选择器和id选择器

.data {
    color: red;
}
/* class="data" */

#apply {
    color: red;
}
/* id="apply" */

字体样式和文本样式

字体类型font-family，常用字体类型为serif；



字体风格font-style，常使用italic设置字体倾斜；



字体粗细font-weight，粗体可以设置为bold，粗细也可以用100到900的数值表示；



字体大小font-size，设置字体大小为数字，紧跟长度单位，单位常用像素px。
/*********************************************/

文本水平对齐 text-align，默认值为左对齐left，常用的还有右对齐right，居中对齐center；



文本缩进text-indent，用于指定文本的首行缩进，通常是将段落元素p的首行缩进；



文本修饰text-decoration，最常用的是设置值为none，来清除<a>标签的默认下划线，也可以给指定元素设置下划线，上划线、删除线等效果；



行高line-height，用于设置文本的行高，可以是数字和长度单位，比如32px；也可以是单独数字，比如3，表示为默认行高的3倍。

```  

>注意区分后代选择器和分组选择器
>1. p h3 {}
>2. p, h3 {}

定义列表和表格元素  

```html
<dl>
  <dt>标题</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>  

<table>标签，定义一个表格元素；

<tr>标签，定义表格中的行；

<th>标签，定义表格中的表头单元格；

<td>标签，定义普通的表格单元格。
<!-- 注意样式里设置表格边框是为table, th, td {}  -->

table, th, td {
  border-style: solid;/* 边框样式 */
  border-collapse: collapse;/* 边框距 */
}

合并单元格（表格）

<td rowspan="2">111</td><!-- 行 -->
<td colspan="2">111</td><!-- 列 -->
```  

表单元素  
```html
<form>
  <input type="text" name="email" placeholder="邮箱">
  <input type="submit" value="提交">
</form>


<!-- 单选按钮 -->
<form>
  <input type="radio" name="第一组" id="a">
  <label for="a">111</label>
  <!-- 同一组单选按钮的name属性的值必须相同。
   保证<label>标签（按钮的文本描述标签）中的for属性值和对应的<input>中的id属性值一样。-->
</form>


<!-- 复选按钮 -->
<form>
  <input type="checkbox" name="第二组" id="a">
  <label for="a">111</label>
  <input type="checkbox" name="第二组" id="b">
  <label for="b">222</label>
</form>

<!-- 下拉菜单 -->
<form>
  <label for="type">菜单的描述</label>
  <select name="shop_type" id="type">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  
</form>

伪类：状态为类+结构为类+伪元素

/* 状态 */
:link 未访问状态
:visited 已访问状态
:hover 鼠标悬停状态
:active 点击状态
:focus 获得焦点元素

/* 结构 */
:first-child 第一个元素
:last-child 最后一个元
:nth-child(n) 匹配第n个元素

/* 伪元素 */
概念： 创建了新元素，并通过新元素来添加样式。

插入图片：无需引号，比如content: url(图像的链接);

插入文本：需要引号，比如content: "文本内容";

注意，::before和::after伪元素必须有content属性，

没有需要插入的内容时可以设置为空，即content: "";

盒子的概念: 边框圆角内容区内边距外边距

（1）用width属性可以指定内容区的宽度