温故而知新——html学习笔记

1、主体标签：

<html>

</html>

2、文本标签：

加粗：

b（<b>内容</b>）仅加粗
strong（<strong>内容</strong>）加粗且表示语气强烈

倾斜：

i（<i>内容</i>）仅倾斜
em（<em>内容</em>）倾斜且表示语气强烈

删除线：

del（<del>内容</del>）
s（<s>内容</s>）

下划线：

u（<u>内容</u>）
ins（<ins>内容</ins>）

变大：

big（<big>内容</big>）变大范围115%

变小：

small（<small>内容</small>）变大范围85%

上标：

sup（<sup>内容</sup>）一元二次方程式ax²+bx+c=0

下标：

sub（<sub>内容</sub>）水分子H₂O

字体：

font（<font>内容</font>）
- 属性：
  - 字体颜色 color="red"、color="#C330C5"
  - 字体大小 size="2"、取值（1~7）
  - 字体样式 face="宋体"

3、HTML注释：

语法：

4、标签嵌套：

语法：必须有层次的嵌套，不可以交叉嵌套

5、排版标签：

默认排版方式：从上往下，从左往右，排不下会换行

【注】编辑器里面敲的回车没用，是无法换行的

换行：

br（<br>或者<br />）单标签

横线：

hr（<hr>或者<hr />）单标签
- 属性：
  - 线条宽度 width="300"、单位px
  - 线条粗细 size="6"
  - 线条颜色 color="red"
  - 线条对齐 align="left"、默认center
  - 线条阴影 noshade

段落：

p（<p>内容</p>）p标签、独占1行
- 属性：
  - 对齐 align="left"、取值（left / center / right）、默认left

【注】块元素可以设置宽高、行内元素不能设置宽高

div和span：

div（<div>内容</div>）块标签、独占1行
span（<span>内容</span>）行内标签、宽度是内容的宽

标题：

h1（<h1>内容</h1>）最大号
h2（<h2>内容</h2>）
h3（<h3>内容</h3>）
h4（<h4>内容</h4>）
h5（<h5>内容</h5>）
h6（<h6>内容</h6>）最小号
- 属性：
  - 标题对齐 align="left"

6、列表标签：

【注】有序、无序最好不要相互嵌套

有序列表：

ol、li（<ol><li>内容1</li><li>内容2</li></ol>）内容只能放在li中
- 属性：
  - 序号样式 type="a"、取值（1 / a / A / i / I / none）、默认是“1”
  - 起始位置 start="3"、从3开始排列

无序列表：

ul、li（<ul><li>内容1</li><li>内容2</li></ul>）
- 属性：
  - 序号样式 type="disc"、取值（disc / circle / square）、默认“disc”

【注】定义列表一般不会用于嵌套

定义列表：

dl>dt,dd（<dl><dt>标题</dt><dd>标题的说明</dd></dl>）
- dl 定义列表标签
- dt 定义标题
- dd 定义说明

7、图片标签：

图片：

img（<img src="picture.jpg" />）
- 属性：
  - 地址路径：src="绝对路径 / 相对路径"、必有属性
  - 图片宽度：width="100"
  - 图片高度：height="100"

8、链接标签：

链接：

a（<a href="URL">内容</a>）
- 属性：
  - 地址路径：src="绝对路径 / 相对路径"

9、表格标签：

【注】table，tr，td是严格的嵌套关系，只能按照此层次出现

表格：

table>tr>th,td
- table 表示表格整体，有多个常用属性
- tr 表示行，基本没有什么属性
- td 表示列（单元格），有多个常用属性
table标签常用属性

属性名	含义	常用属性值
border	设置表格的边框宽度	像素值（默认为0）
cellspacing	设置单元格与单元格边框之间的空白间距宽度	像素值（默认为2px）
cellpadding	设置单元格内容与边框线之间的空白间距宽度	像素值（默认为1px）
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left / center / right
bgcolor	设置表格的整体背景颜色
background	设置表格的整体背景图	背景图优先于背景色
bordercolor	设置表格的边框线颜色

tr标签常用属性：

属性名	含义	常用属性值
bgcolor	设置行的整体背景颜色
background	设置行的整体背景图
height	设置行的高度
align	设置单元格内容在行中的水平对齐方式	left / center / right
valign	设置单元格内容在行中的垂直对齐方式	top / middle / bottom

td标签常用属性：

属性名	含义	常用属性值
width	设置单元格的宽度	像素值
height	设置单元格的高度	像素值
align	设置单元格中内容的水平对齐方式	left / center / right
valign	设置单元格中内容的垂直对齐方式	top / middle / bottom
rowspan	设置要跨行（纵向）合并的单元格数	要合并的数量，合并谁就把谁删掉
colspan	设置要跨列（横向）合并的单元格数	要合并的数量，合并谁就把谁删掉
bgcolor	设置单元格的背景颜色
background	设置单元格的背景图

【注】

thead，tbody，tfoot用于对表格的tr（行）进行分组，此时thead组在表格头部，tfoot组在表格底部。

这3个标签出现的推荐顺序是：thead，tfoot，tbody，在它们内部再写tr。

thead，tfoot应该只出现1次，tbody可以出现多次。

所有没有明确归属到上述3个标签的tr（行），都默认归属到tbody。

表格高级：

caption（<caption>表格标题</caption>）
- 用于表示一个表格的“标题文字”（看起来在表格的外面），其实卸载table标签中
thead
- 用于表示一个表格的“头部区域”，其中可以包含着若干个tr（行），tr中自然应该有td（或th）
- 写在table标签中，tr外，即这样的层次：table>thead>tr
tbody
- 用于表示一个表格的“主体区域”，其中可以包含着若干个tr（行），tr中自然应该有td（或th）
- 写在table标签中，tr外，即这样的层次：table>tbody>tr
tfoot
- 用于表示一个表格的“底部区域”，其中可以包含着若干个tr（行），tr中自然应该有td（或th）
- 写在table标签中，tr外，即这样的层次：table>tfoot>tr

10、HTML的通用属性：

name：名称

class：类

id：唯一标识

title：标题

style：样式

11、标签关系：

<div>

　　<div>

　　</div>

后代关系：

包含关系
父子关系

兄弟关系：

同级关系
必须属于同父级的关系

12、表单

未完待续……

来源：https://www.cnblogs.com/tobyhan/p/11253967.html

标签

html表格

table