HTML基础(1)～元素，定位方式，列表，表格，语义化标签，css选择器

1，html简介

HTML ：超文本标记语言 (Hyper Text Markup Language)。
HTML 不是一种编程语言，而是一种标记语言(markup language)。
标记语言是一套标记标签 (markup tag)。
HTML 使用标记标签来描述网页。

2，元素

元素=标签+属性+内容
布局：static，静态流式布局。

2.1，块元素

块元素：独占一行，可以设置宽高。标签：div，p，h1—h6。
如果不设置宽高，宽度就继承父元素的宽度，高度是0。如果有内容，高度就是内容的高度。

2.2，行元素

行元素：不能设置宽高，宽高取决于元素本身的内容。
多个元素占用一行，到最后会自动换行。标签：a，b。

2.3，行内块元素

行内块元素：既有行元素的特性，也有块元素的特性。标签：bottom，img，input。
可以为元素设置宽高，不独占一行，多个行内块会左右排列。

3，元素定位方式

3.1，默认定位

默认定位：position:static，采用流式布局，不能通过top等样式来设置位置。

3.2，相对定位

相对定位：position:relative，元素还在流式文档中，通过top等属性进行样式的微调。

一般情况下，如果是父子元素中，父元素中可以设置相对定位。

3.3，绝对定位

绝对定位：position:absolute，元素脱离文档流，不在参与父元素的流式布局，不在撑开父元素。
absolute在定位置后，不使用left等值设置时，元素会跑到原有的位置上，开发中不能这样做。
absolute相对于离自己最近的position为非static的祖先元素进行定位。

3.4，固定定位

固定定位：position:fixed，脱离文档流。当对于根标签进行定位时，页面滚动时不随着页面的滚动而滚动。

4，列表

列表：1.有序列表(OL),2.无序列表(ul)。
列表项：li。

//删除列表项的前缀。
list-style：none;

定义列表：dl。

<dl>
    <!-- 描述项目中的标题 -->
    <dt>html</dt>
   <!-- 具体内容 -->
    <dd>当今最流行的前端语言之一</dd>
</dl>

5，伪类和伪元素

伪类：通过一定的条件才会触发的样式。

• hover：当鼠标指针放到元素上悬停时触发
• focus：当元素成为焦点时触发
• visited：A标签专属的伪类，表示访问过的网址

#link:hover {}

6，表格

Table标签：块元素，显示一个表格。
Thead标签：表头部，显示表的头部数据。
Tbody标签：表主体。
Tr标签：代表一行。
Th标签：代表表头中的一个单元格。

行合并：rowspan
<td rowspan="2">张三</td>当前td所占的行高是两行的高度 
列合并：colspan
<td colspan="2">25</td>表示当前单元格要占用两列的宽度

7，html语义化标签

text-decoration：line-through；添加横向的线段。
header标签表示头部内容，
footer表示页面尾部内容；
nav可以设置导航菜单。

8，B标签和strong标签的区别？

b标签可以实现文本加粗，内容不进行强调；strong也可以实现文本加粗，还有强调的语义。

9，S标签和del标签

s标签会让文本有一个删除线的效果，del具有删除的语义。

10，Css选择器

 中文全角空格 英文空格　中文空格

最后
1，如果文章有地方错误，请联系我，
2，如果你想学习，交流前端知识，
那么请扫码进群，欢迎你的加入。