HTML & CSS 基础

HTML 基本结构

  • 基本骨架
  • DTD
  • 命名空间
  • 字符集

基本骨架：

<html>标签：根标签
<head>标签: 内部置放对网页的设置，例如<title>标签
<body>标签：浏览器的内容显示
<title>标签：设置页面标题，title关键字可以作为搜索引擎抓取的关键字

<!-- 基本骨架 -- >
<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>

DTD(Doctype Definition)

完整的HTML文件第一行内容叫做文档定义类型（文档声明类型），是为了告知浏览器解析html文件时使用哪个版本规范，在HTML5里面，只需要在第一行写：<!DOCTYPE html>即可。

命名空间

<html>元素表示整个网页文档，在开始表情设置了命名空间xmlns属性。在HTML5版本只需要书写<html lang = "en"></html>即可。

  1. 字符集
    <head>标签内部的<meta>标签通过http-equiv属性定义了当前网页所使用的字符编码。
<!-- xtml1.0版本 --> 
<meta http-equiv = "Content-type" content="text/html";charset="utf-8">
<!-- HTML5 --> 
<meta charset="utf-8">

注意：meta声明的字库，必须和编辑器软件默认的字库相同，否则浏览器在加载时会出现乱码.

HTML 常用标签

  1. html注释语法：``
  2. 标题标签：<h1></h1>~<h6></h6>

标题标签为容器级标签，不能互相嵌套，是同级关系书写.
由于<h1>权重高，内部文字对提高搜索引擎排名非常重要。为防止作弊，若一个页面有多个<h1>，反而降低权重。一个页面应只有一个<h1>.

  1. 段落和换行
    段落标签:<p></p> 文本级标签，可内嵌文本，图片、表单元素。
    换行标签：<br/>,换行符，可进行强制性换行

<p>标签作用是添加一个完整段落的语义，不负责换行.

  1. 文本格式化
    对文字进行格式化显示的设置，比如，粗体、斜体。
    文本格式化标签均为文本级标签

  2. 图像标签：<img> 相当于一个特殊的文本，在指定位置插入图片

常用属性：
src 图片路径
width 宽、height 高
title 提示文本，鼠标悬停时出现提示文本
border 边框
alt 替换文本，图片加载失败，出现的替换文本
注意：尽量使用alt属性对图片进行说明，添加相对应的关键字有利于SEO搜索引擎优化.

  1. 音频标签：<audio></audio>

音频控制条属性 <audio src="snow.mp3" controls="conrtols">
音频加载后不会自动显示播放器控制条，需要使用controls属性进行设置

  1. 视频标签：<video></video>

与音频标签类似，也需要添加视频控制条属性controls

  1. 超级链接：<a></a> 容器级标签

与网络上另一文档相连。在指定位置添加链接，提供用户点击和跳转，可以跨页面跳转、页内跳转。

常用属性：

href 超文本引用，用于链接目的地址

target 被链接文档在哪里显示,默认在当前窗口打开，__self；__blank:在新窗口打开

title 提示文本，鼠标悬停时出现提示文本

两种特殊锚点跳转
a. 页面内锚点跳转
①设置锚点：
<h1 id="mubiao>目标</h1>，给目标位置添加id属性，必须唯一。
<a name="mubiao>目标</a>，在目标位置添加一个空的<a>标签，并加上name属性，必须唯一。
②添加链接
给<a>标签设置href属性，#id属性值或#name属性值。

b. 跨页面锚点跳转
① 设置锚点。
②添加链接，href属性值路径为：路径#id或路径#name。

  1. 列表 （无序，有序，定义)
    通常将内容相关，结构相似，样式相近的内容，使用列表结构进行搭建。\
  • 无序列表：
    <ul>定义无序列表的大结构
    <li>无序列表的列表项

注意：
<ul>只能嵌套<li>标签，<li>只能存在列表标签内
<li>是容器级标签
列表项之间没有先后之分
没有添加样式前缀功能，后续可用css实现

  • 有序列表：
    <ol>有序列表的大结构
    <li>有序列表的列表项

  • 定义列表：
    <dl>定义列表的大结构
    <dt>定义列表的列表项
    <dd>定义列表的描述内容

<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
</ul>
<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
</ol>
<dl>
    <dt>定义列表项</dt>
    <dd>定义列表项描述1</dd>
    <dd>定义列表项描述2</dd>
</dl>
  1. 布局标签div和span （俗称盒子）
    <div></div>和<span></span>没有具体的语义，是经典的容器级标签。

<div>用于划分网页布局。
<span>在不改变整体效果的情况下，可以辅助进行布局调整。

  1. 表格
  • 表格基础
  • 合并单元
  • 表格分区

①表格基础
<table></table> 定义整个表格大结构
<tr></tr> 定义表格的行
<td></td> 定义表格的单元格
<th></th> 定义表头单元格，可替换td的位置，默认样式：文字显示粗体居中

使用<table>的属性 border
<table border="1">，行与单元格默认有空隙，会使得表格有双线效果。
解决方法
设置样式：border-collapse:collapse //表边框塌陷

<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <th>普通单元格1</th>
        <th>普通单元格2</th>
    </tr>
</table>

②合并单元
表格单元格氪合并，通过<th>和<td>的两个属性可设置。
rowspan: 跨行合并，上下的合并
colspan：跨列合并，左右的合并
属性值：数字

小技巧：

  1. 先列出所有<tr>,以最小单元格为标准
  2. 添加每行的/<td>或/<th>单元格
  3. 划分单元格所在的行，顶边对齐的属于同一行
  4. 将所有行和列写完后，在查看哪些单元格有跨行、跨列、属性值的个数要参展最小单元格。

③表格分区
完整的表格包括：
表格标题<caption><caption>
表格头部<thead></thead>
表格主体<tbody></tbody>，内嵌套<tr>、<td>、<th>
表格页脚<tfoot></tfoot>

注意：不论书写顺序如何，浏览器都会按照<caption>,<thead>,<tbody>,<tfoot>顺序加载

  1. 表单，用来收集用户信息
  • 表单域
  • 表单控件(表单元素)
  • 提示文本

①表单域：<form></form> 容器级标签。功能性标签，可将收集数据提交后台服务器

属性 / 属性值：
action / url 表单提交处理的url
method / get/post 提交方式

②表单元素
a. <input>标签,相当于特殊文本，不会换行，根据属性type的值对应不同的表单控件。

<input type="text">   
<!-- 单行文本输入，属性value:默认输入文字 -->
<input type="password">   
<!-- 密码输入框，字码会作掩码处理 -->
<input type="radio'">   
<!-- 单选框，name相同属性值可让单选实现互斥效果，checked可设置默认选择 -->
<input type="checkbox">   
<!-- 复选框，name相同属性值的为同一组复选框，checked可设默认选择 -->
<input type="button"> 
<!-- 普通按钮 -->  
<input type="reset"> 
<!-- 重置按钮 -->  
<input type="sumit"> 
<!-- 提交按钮 -->  
<input type="image"> 
<!-- 图片按钮 -->  
<input type="file"> 
<!-- 上传文件的按钮，multiple属性可多选文件 -->

b. 文本域标签：<textarea><textarea>
可输入多行文本的区域，相当于一个特殊文本，在标签之间书写文字为默认输入文字。
可设置区域大小：rows 最大行数；cols 最大字节数(一个汉字2个字节)。
c. 下拉菜单
<select></select>标签，下拉菜单整体结构，文本级标签
<option></option>标签，表示定义下拉菜单选项，文本级标签\

<!-- 默认选中第一项，可用selected设置默认选中项 -->
<select>
    <option>选项一</option>
    <option>选项二</option>
</select>

分组管理：对<option>进行分组管理，使用<optgroup></optgroup>

<select>
    <optgroup label="分组一">
        <option>选项一</option>
        <option>选项二</option>
    </optgroup>
    <optgroup label="分组二">
        <option>选项一</option>
    </optgroup>
</select>

d. <label></label>标签
所有表单元素都可以通过绑定其他内容去扩大触发点击范围，这是需要一个label标签。

绑定方法一

  1. 给表单元素设置id
  2. 将绑定内容用label包裹
  3. 给label设置for属性值等于id的值
<input type="radio" id="male"><label for="male">男</label>

绑定方法二
使用场景：绑定内容与表单元素挨在一起，直接用label标签包裹

<label><input type="radio">男</label>
  1. 字符实体
    对一些特殊的字符，可以用字符实体去进行书写，只需要记住常见的几个即可，其余可查看文档字符实体列表进行参考。
    常见的字符实体：&lt; &gt; &nbsp; &copy;

CSS层叠样式

静态的修饰网页，对元素进行格式化。

书写位置

. 内联式（内行式）

在html标签上的style属性直接书写：<p style="color:red">这里是一个段落</p>
缺点
1. 没有完全脱离html标签。
2. 不利于html结构的解读。
3. 只能给一个标签使用。

. 内嵌式

在html文件中，<head>标签的<style>标签内书写：

<html>
    <head>
        <title>这里是标题</title>
        <style>
            p,div{
                color:red;
            }
        </style>
    <head>
</html>

优点
1. 实现结构、样式处不分离
2. 多个标签可以利用同一代码设置
缺点
1. 结构、样式没有完全分离。
2. css样式只能给一个html文件使用。
3. 在html中css太多，会造成头重脚轻，不利于修改和阅读。

. 外联式（外链式）

在单独的扩展名为.css文件中。
引用方式：
①在html的<head>内使用<link>标签

<html>
    <head>
        <title>这里是标题</title>
        <link ref="stylesheet" href="01.css" type="text/css">
    <head>
</html>
<!--
    ref="stylesheet" 表示引入外部文件与html的关系，为样式表
    href="01.css" css文件路径，超文本引用
    type="text/css"  按纯文本样式加载css
-->

注意：在.css文件中书写，不用<style>标签

优点
1. 实现html和css完全分离
2. 多个html文件可共用一份css文件，便于提取公共css
3. 可实现一个css变化，多个页面同时变化
4. 一个html可引入多个css文件

. 导入式

在内嵌样式<style>标签内部或外联样式内部，导入其他外部.css文件
导入方式： 利用一条@import url(路径)语句进行引入
问题
1. 导入式样式表作用与外链式基本相同
2. 在浏览器加载时，会在html结构加载完成后再对该语句进行编译。若网速慢，会导致没有出现css样式效果

总结:
在实际应用中，小型案例可用内嵌式，实际工作、大型网址，推荐使用外链式。

CSS语法

css语法规则：

由两部分组成，选择器以及一条或多条声明。
p {width: 300px; font-size:14px}

css样式规则：

①css在给标签设置样式之前，必须先用选择器选择该标签
②属性名和属性值用键值对写法K：V
③添加的样式都必须在{}里面

<!-- 以内联式为例，代码如下所示  -->
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-bottom:10px;
    }
</style>

注意：
a.分号的必要性：每条属性后面的分号必须书写，不然浏览器会加载错误。
b.css中对所有属性与属性之间的空格、缩进、换行不敏感。

css样式规范

样式格式

在开发中，为了代码可读性强，便于调试，使用展开格式对css样式进行书写：

<!-- 展开式 -->
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-bottom:10px;
    }
</style>

在上传服务器时，减少不必要的空白，压缩文件大小，利于传输，使用紧凑格式对css样式进行书写：

<!-- 展开式 -->
<style>
    div {width: 200px;height: 200px;background-color: red;margin-bottom:10px;}
</style>
英文大小写

css中英文可用大写，也可用小写，建议使用时全部用小写。

空格规范

为了书写起来的易读性，可在选择器于大括号{}间保留一个空格；冒号后，属性值前，保留一个空格。例：

<style>
    selector(空格){
        k:(空格)v;
    }
</style>

CSS常用样式

文字三属性

颜色color

作用是给文字设置颜色，k:color,v:颜色值或颜色名。

颜色值可用颜色英文字母，rgb模式或16进制来表示。

p {
    color: red;
    color: rgb(255,0,0);
    color: #ff0000;
}
字体font-family

作用是定义元素内文字的字体，k:font-family,v:字体名称，包裹在引号中，属性值可多个用逗号分隔。
如果不设置字体属性，不同浏览器有自己默认字体

注意：
1、font-family可设置多个字体名称，实际加载时只会选择一种加载。按书写顺序进行加载，如浏览器不支持第一个字体，则会尝试下一个直到第一个支持字体。
2、浏览器中加载的字体是用户机器中自带的，若用户的电脑中没有设置的字体则会加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体。
3、中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面。

p {
    font-family: "arial","微软雅黑","宋体"l
}
字号font-size

作用是设置字体大小，k:font-size,v:相对长度单位或绝对长度单位。

注意：
1 、如果 HTML 中不设置字号，不同的浏览器有自己默认的加载字号，比如 chrome、IE，默认显示字号为 16px。
2、 不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。chrome 浏览器最小加载显示字号为8px，IE 浏览器最小可以支持1px的字号。

盒子实体化三属性

想在浏览器具体看到一个盒子占有的实际位置，需要设置盒子可以实体化的三属性。

属性名 属性值 说明
width px单位的数值 定义元素占有的宽度
height px单位的数值 定义元素占有的高度
background-color 颜色名、颜色值 定义元素占有的高度

CSS选择器

选择器：选择要添加样式的 HTML 标签的一种方法、模式。

标签选择器(基础选择器)

• 通过标签名去选择标签元素。
• 书写方式：标签名。
• 选择范围：选中的是HTML文件中所有的同名标签。

注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管
嵌套多深，都能被选中

标签选择器特点

• 优点：可以选中所有的同名标签，设置所有同名标签的公共样式。
• 缺点：只能实现全选，不能对局部的标签添加特殊样式。

id选择器

• 通过标签上的 id 属性去选择标签。
• 书写方式：#id 属性值
• 选择范围：只能选中一个标签。
• id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分
大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。

注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。

id 选择器特点(基础选择器)

• 缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。

类选择器

• 通过标签的 class 属性去选择标签。
• 书写方式：.class属性值
• 选择范围：是页面中所有 class 属性值相同的标签。
• class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。

类选择器特点(基础选择器)

特点 1：多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同
一个类选择器选中。
特点 2：一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性
值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一
个标签。

类选择器优点

①通过一个类选择器进行多选，选中多个标签，添加公共样式。
②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样
式和单独样式，节省代码量。
实际工作中的使用规律：类上样式(CSS)，id 上行为(JavaScript)。

通配符选择器(基础选择器)

• 通过一个特殊符号选择页面内所有的标签。
• 书写方式：*
• 选择范围：包含 <html>标签在内的所有标签

通配符特点

• 优点：可以实现全选，简化书写。
• 缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使
用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
• 注意：实际上线的网站不允许使用 * 去清除默认内外边距。

后代选择器(高级选择器)

• 通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择
器。
• 后代选择器也叫包含选择器。
• 书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中
的标签必须是后面选择器选中标签的祖先级。
• 选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后
一个选择器确定选中的标签。
• 注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是
父子关系。

后代选择器特点

• 优点：减少 class 属性的定义使用，选择效率更高。

交集选择器(高级选择器)

• 通过一个标签之上满足所有的基础选择器的需求去选择标签。
• 书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开
头。
• 选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能
被选中。
• 比较常见的是标签与类的交集。

并集选择器(高级选择器)

• 不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成
浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
• 书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
• 选择范围：是所有的单独选择器选中的标签的并集集合

并集选择器用途

①如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。
②可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。

CSS层叠式

继承性

如果一个标签没有设置过样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。

层叠式

多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。
优先级判断：

选中目标标签
  • 第一步：比较多个选择器的权重，权重高的层叠权重低的。
    • 基础选择器的权重：根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择器 < id 选择器。
    • 高级选择器权重比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。
    • 比较顺序：( id 个数, 类的个数, 标签的个数 )
  • 第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写的。
选中目标标签的组先级

如果选择器选中的是祖先元素，文字的样式可以被继承。

  • 第一步：比较就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近，近的层叠远的。
  • 第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的。
  • 第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的。
! important 关键字

• 如果在比较选择器权重的过程中，遇见一个 !important 关键字，可以将某条 CSS样式属性的权重提升到最大。
• 书写位置：在某个css属性的属性值后面空格加 !important 。

注意：
① 就近原则中，不需要比较选择器权重，所有 important 会失效。
② important 不能提升选择器的权重，只能提升某条属性的权重到最大

行内式权重

• 行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。
• 但是，与 !important 关键字相比权重要低

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,332评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,508评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,812评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,607评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,728评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,919评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,071评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,802评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,256评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,389评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,032评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2赞 350