HTML基础（2）、CSS基础

表头单元格标签

一般位于表格的第一行或第一列，文本内容加粗居中显示

<th>标签表示HTML表格的表头部分

语法：

<table>

  <tr>

 <th> 姓名</th>

</tr>

</table>

表格属性

属性名    属性值                   描述

align    left、center、right      规定表格相对周围元素的对齐方式

border     1或””      规定表格单元是否拥有边框，默认为””，表示没有边框

cellpadding  像素值          规定单元边沿与其内容之间的空白，默认1像素

cellspacing   像素值            规定单元格之间的空白，默认2像素

width      像素值或百分比     规定表格的宽度

表格结构标签

为更好的表示表格的语义，将表格分割成表格头部和表格主体两大部分。

在表格标签中，用<thead>标签表示表格的头部区域，<tbody>标签表示表格的主题区域。

<thead></thead> ：用于定义表格头部，内部必须有<tr>标签，一般位于第一行。

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

以上两个标签均位于<table></table>中。

合并单元格

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

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

目标单元格：跨行：最上侧单元格为目标单元格，写合并代码

            跨列：最左侧单元格为目标单元格，写合并代码

三步曲：先确定是跨行还是跨列合并

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

        删除多余的单元格

列表标签

列表

用于布局

特点：整齐、整洁、有序

分类：无序列表、有序列表和自定义列表

无序列表（重点）

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

基本语法格式：

<ul>

  <li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

</ul>

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

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字不被允许。

<li>与</li>之间相当于一个容器，可容纳所有元素。

无序列表带有自己的样式属性。

有序列表

有排列顺序的列表，各个列表项按照一定顺序排列定义

用<ol>标签定义有序列表，列表排序以数字显示，且使用<li>标签定义列表项

基本语法格式：

<ol>

  <li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

</ol>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字不被允许。

<li>与</li>之间相当于一个容器，可容纳所有元素。

有序列表带有自己的样式属性。

自定义列表（重点）

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

用<dl>标签定义描述列表（或定义列表），该标签会与<dl>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

基本语法：

<dl>

  <dt>名词1<dt>

  <dd>名词1解释1</dd>

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

</dl>

<dl></dl>中只能包含<dt>和<dd>。

<dt>和<dd>没有个数限制，里面可以放任何标签，经常是一个<dt>对应多个<dd>。

表单标签

表单的组成：表单域、表单控件（也称表单元素）和提示信息。

表单域

一个包含表单元素的区域

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

<form>会把其范围内的表单元素信息提交给服务器。

语法：

<form action=”url地址”  method=”提交方式”  name=”表单域名称”>

   各种表单元素控件

</form>

常用属性：

属性     属性值     作用

action    url地址    用于指定接收并处理表单数据的服务器程序的url地址

method   get/post   用于设置表单数据的提交方式，其取值为get或post

name    名称       用于指定表单的名称，以区分同一个页面中的多个表单域

表单控件（表单元素）

<input>输入表单元素，用于收集用户信息

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

语法：<input type=”属性值” />

<input />标签是单标签

type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值及其描述：

属性值     描述

button     定义可点击按钮

checkbox   定义复选框

file        定义输入字段和“浏览”按钮，供文件上传。

hidden     定义隐藏的输入字段

image      定义图像形式的提交按钮

password   定义密码字段。该字段中的字符被掩码。

radio       定义单选按钮

reset       定义重置按钮。重置按钮会清除表单中的所有数据。

submit      定义提交按钮。提交按钮会把表单数据发送到服务器。

text      定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

除type属性外，<input>标签还有其他很多属性，其常用属性如下：

属性     属性值         描述

name    由用户自定义   定义input元素的名称

value    由用户自定义   规定input元素的值

checked    checked      规定此input元素首次加载时应当被选中

maxlength   正整数      规定输入字段中的字符的最大长度

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

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

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

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

<label>标签

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

<label>标签用于绑定一个表单元素，当点击<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>

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

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

<textarea>文本域元素

使用场景：当用户输入内容较多的情况下使用

在表单元素中，<textarea>标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法：

<textarea rows=”3” cols=”20”>

   文本内容

</textarea>

通过<textarea>标签可以轻松地创建多行文本输入框。

cols=”每行中的字符数”，rows=”显示的行数”。

CSS

CSS简介

CSS是层叠样式表的简称，也称为CSS样式表或级联样式表。

CSS是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS可以美化HTML，让页面布局更简单。

最大价值：由HTML专注做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。

CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

语法：

选择器 {属性:值; 属性:值;}

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。

属性和属性值以“键值对”的形式出现。

属性是对指定的对象设置的样式属性，如字体大小、文本颜色等。

属性和属性值之间用英文“:”分开。

多个“键值对”之间用英文“;”进行区分。

CSS代码风格

1.样式格式书写

紧凑格式：

h3 {color:deeppink;font-size:20px;}

展开格式：

h3 {

   color: pink;

   font-size: 20px;

}

2. 样式大小写

h3 {

   color: pink;

}

H3 {

   COLOR: PINK;

}

一般情况样式选择器、属性名、属性值关键字全部使用小写字母，特殊情况除外。

空格规范

h3 {

   color: pink;

}

属性值前面，冒号后面保留一个空格

选择器（标签）和大括号中间保留空格

CSS基础选择器

CSS选择器的作用：选择器（选择符）根据不同的需求把不同的标签选出来。

选择器的分类：基础选择器和复合选择器

基础选择器：由单个选择器组成

复合选择器：包括标签选择器、类选择器、id选择器和通配符选择器。

标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式。

语法：

标签名 {

属性1: 属性值1;

属性2: 属性值2;

属性3: 属性值3;

}

作用：可以把某一类标签全部选择出来

优点：能快速为页面中的标签统一设置样式

缺点：不能设计差异化样式，只能选择全部的当前标签

类选择器

差异化选择不同的标签，单独选一个或某几个标签

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示。

语法：

.类名 {

   属性1: 属性值1;

}

结构需要使用class属性来调用class类的意思

如：<div class=’red’>变红色</div>

注意：类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义）。

可以理解为给这个标签起了一个名字来表示。

      长名称或词组可以使用中横线来为选择器命名。

      不要使用纯数字、中文等命名，尽量使用英文字母来表示。

      命名要有意义，尽量使别人一眼就知道这个类名的目的。

多类名

可以给一个标签指定多个类名从而达到更多的选择目的，这些类名都可以选出这个标签。

使用方式：<div class=”red font20”>亚瑟</div>

在标签class属性中写多个类名

多个类名中间必须用空格分开

这个标签就可以分别具有这些类名的样式

多类名开发中使用场景

可以把一些标签元素相同的样式（共同的部分）放到一个类里面

这些标签都可以调用这个公共的类，然后再调用自己独有的类

从而节省CSS代码，方便统一修改

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

语法：

#id {

  属性1: 属性值1;

}

id属性只能在每个HTML文档中出现一次.

id选择器和类选择器的区别

类选择器（class）好比人的名字，一个人可以有多个名字，一个名字也可以被多个人使用。

id选择器好比人的身份证号码，是唯一的不能重复。

id选择器和类选择器最大的不同在于使用次数上。

类选择器在修改样式中用的最多，id选择器一般用于页面唯一性元素上，常与JavaScript搭配使用。

通配符选择器

在CSS中，通配符选择器使用“*”定义，表示选取页面中的所有元素（标签）。

语法：

* {

  属性1: 属性值1;

}

通配符选择器不需要调用，自动就给所有的元素使用样式

特殊情况才使用

基础选择器总结

基础选择器   作用                      特点            使用情况  用法

标签选择器  可以选出所有相同的标签  不能差异化选择    较多    p {color: red;}

类选择器    可以选择1个或者多个标签  可以根据需求选择  非常多  .nav {color: red;}

id选择器    一次只能选择一个标签  ID属性只能在每个HTML文档中出现一次  一般和js搭配   #nav {color: red;}

通配符选择器   选择所有标签  选择的太多，有部分不需要  特殊情况使用  * {color: red;}