HTML+CSS

小灰灰 2022-03-31 02:11 122阅读 0赞

# html #

超文本标记语言 hyper text markup language  
俗称网页

## 1. head 中的常见标签 ##

文件名字后缀必须是 *.html 或者 *.htm
    ```html
    <title>网页标题</title>

标签表示是网页的标题

告诉浏览器请用这个字符串编码显示网页内容

用来包含网页的脚本

用来包含外部样式表

<link>

## 2. body 中的标签 ##

### 1) 标题标签 ###

### 2) 正文标签 ###

段落标签

<p>

换行

<br>

分割线

<hr>

特殊文字需要转义显示  
例如：  
< <  
> >  
© &copy;

**正文中常见标签**

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>p</td> 
   <td>段落文本</td> 
  </tr> 
  <tr> 
   <td>q</td> 
   <td>引用文本 简短行内引用 浏览器会添加引号</td> 
  </tr> 
  <tr> 
   <td>blockquote</td> 
   <td>块引用</td> 
  </tr> 
  <tr> 
   <td>em</td> 
   <td>强调斜体</td> 
  </tr> 
  <tr> 
   <td>strong</td> 
   <td>强调粗体</td> 
  </tr> 
  <tr> 
   <td>i</td> 
   <td>斜体</td> 
  </tr> 
  <tr> 
   <td>big</td> 
   <td>粗体</td> 
  </tr> 
  <tr> 
   <td>small</td> 
   <td>表示细则一类旁注</td> 
  </tr> 
  <tr> 
   <td>sup</td> 
   <td>下标</td> 
  </tr> 
  <tr> 
   <td>sub</td> 
   <td>上标</td> 
  </tr> 
  <tr> 
   <td>abbr</td> 
   <td>缩写  缩写 </td> 
  </tr> 
  <tr> 
   <td>ins</td> 
   <td>插入样式（下划线）</td> 
  </tr> 
  <tr> 
   <td>del</td> 
   <td>删除样式 属性 cite 指向另一个文档的URl删除原因 datatime删除时间</td> 
  </tr> 
  <tr> 
   <td>mark</td> 
   <td>标记文本（阴影） 引起用户注意 搜索引擎搜索</td> 
  </tr> 
  <tr> 
   <td>progress</td> 
   <td>进度信息</td> 
  </tr> 
  <tr> 
   <td>time</td> 
   <td>时间信息 &lt;time datatime=“2018-08-10”&gt;2018年8月10日</td> 
  </tr> 
  <tr> 
   <td>footer</td> 
   <td>脚注信息</td> 
  </tr> 
  <tr> 
   <td>address</td> 
   <td>作者信息</td> 
  </tr> 
  <tr> 
   <td>wbr</td> 
   <td>断点换行 在一行显示不够的情况下才有用</td> 
  </tr> 
 </tbody> 
</table>

### 3) 超链接标签 ###

图片标签

宽度和高度的单位都是像素

让图片有链接的功能

页面内的链接（锚）  
首先在目的地标签添加 id=“唯一编号”, 然后在超链接的 href="\#唯一编号"

### 4) 列表标签 ###

有序列表

无序列表

### 5) 表格标签(重点) ###

table>(thead>tr>td*2)+(tbody>tr*5>td\*2)  
表格合并单元格，可以使用td 的属性 colspan（合并列）rowspan（合并行）

### 6) 表单标签(重点) ###

接收用户的输入

<form action="http://www.baidu.com">
        文本框 <input type="text" name="username">
        <br>
        密码框 <input type="password" name="password">
        <br>
        按钮 <input type="button" value="点我">
        <br>
        单选框 
        男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" checked value="女">
        <br>
        多选框
        唱歌 <input type="checkbox" name="hobby" checked value="1">
        跳舞 <input type="checkbox" name="hobby" value="2">
        游戏 <input type="checkbox" name="hobby" value="3">
        睡觉 <input type="checkbox" name="hobby" value="4">
        <br>
        <input type="file">
        <br>
        <input type="date" value="2018-12-30">
    
        <br>
        <input type="submit" value="提交">
        <input type="reset" vlaue="重置">
    </form>

### 7. iframe ###

内嵌另一个页面

# CSS #

层叠(级联)式样式表  
cascade style sheet

美化html 网页的

## 颜色相关的样式 ##

前景色

color: 单词
           rgb(红色, 绿色, 蓝色)  范围从 0~255
           16进制值  格式 `#红绿蓝` 范围从 0~FF       
           rgba(红色, 绿色, 蓝色, 0.0~1.0)
           特殊取值
           白色 rgb(255,255,255)
           黑色 rgb(0,0,0)

背景色

background-color:颜色

背景图

background-image:url(图片地址)
    background-repeat: no-repeat(不重复) repeat-x repeat-y 在哪个轴上重复

## 盒子模型 ##

margin 外间距  
margin-left  
…  
border 边框  
border-left 边框宽度 边框线类型 边框颜色

border-style 边框样式

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>dotted</td> 
   <td>点线</td> 
  </tr> 
  <tr> 
   <td>dashed</td> 
   <td>虚线</td> 
  </tr> 
  <tr> 
   <td>solid</td> 
   <td>实线</td> 
  </tr> 
  <tr> 
   <td>double</td> 
   <td>双线</td> 
  </tr> 
  <tr> 
   <td>groove</td> 
   <td>立体凹槽</td> 
  </tr> 
  <tr> 
   <td>ridge</td> 
   <td>立体凸槽</td> 
  </tr> 
  <tr> 
   <td>inset</td> 
   <td>立体凹边</td> 
  </tr> 
  <tr> 
   <td>outset</td> 
   <td>立体凸边</td> 
  </tr> 
 </tbody> 
</table>

…

padding 内间距  
padding-left 左  
padding-right 右  
padding-top 上  
padding-bottom 下

### CSS完善盒模型 ###

**box-sizing** 定义盒模型尺寸解析方式

<table> 
 <thead> 
  <tr> 
   <th>取值</th> 
   <th>解析方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>content-box</td> 
   <td>width/height=border+padding+content</td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>wigth/height=content</td> 
  </tr> 
 </tbody> 
</table>

**resize** 定义用户以拖动方式改变元素尺寸

<table> 
 <thead> 
  <tr> 
   <th>取值</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>用户不能调节元素尺寸</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>可以改变长宽 max-height max-width</td> 
  </tr> 
  <tr> 
   <td>horizontal</td> 
   <td>仅宽度</td> 
  </tr> 
  <tr> 
   <td>vertical</td> 
   <td>仅高度</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>默认继承</td> 
  </tr> 
 </tbody> 
</table>

**overflow-x/y** 溢出处理

<table> 
 <thead> 
  <tr> 
   <th>取值</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>visible</td> 
   <td>不剪切内容 也不添加滚动条</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>在需要时剪切内容 并增加滚动条</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>不显示超出元素尺寸的内容</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>当超出时 overflow-x显示为横向滚动条 overflow-y显示为纵向滚动条</td> 
  </tr> 
  <tr> 
   <td>no-display</td> 
   <td>超出尺寸不显示元素内容 类似添加display：none</td> 
  </tr> 
  <tr> 
   <td>no-centent</td> 
   <td>超出尺寸不显示内容 类似添加visibilty:hidden</td> 
  </tr> 
 </tbody> 
</table>

**outline** outline-color outline-width outline-style  
**outline-color** 设置颜色  
**outline-width** 设置宽度  
thin | medium | thick | | inher  
**outline-style** 设置样式  
auto |  
**outline-offset** 设置偏移  
定义轮廓距离容器的值  
border-image

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>border-image-source</strong></td> 
   <td>边框背景图像源</td> 
  </tr> 
  <tr> 
   <td><strong>border-image-slice</strong></td> 
   <td>如何裁切背景图像</td> 
  </tr> 
  <tr> 
   <td><strong>border-image-repeat</strong></td> 
   <td>定义背景图像重复性</td> 
  </tr> 
  <tr> 
   <td><strong>border-image-width</strong></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><strong>border-image-outser</strong></td> 
   <td>显示大小</td> 
  </tr> 
 </tbody> 
</table>

## 定位方式 ##

**position** 定位方式

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>static</td> 
   <td>不定位遵循HTML默认的流动模型</td> 
  </tr> 
  <tr> 
   <td>absolute</td> 
   <td>绝对定位 使用left、right、top、bottom属性(在段落文字中 left 即第一行的开始位置 bottom为第一行最后一个字右下角)</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>固定定位不随浏览器窗口滚动条滚动而变化(在浏览器中位置永远不发生变化)</td> 
  </tr> 
  <tr> 
   <td>relative</td> 
   <td>相对定位 通过left、right、top、bottom属性确定元素在正常文档流中偏移位置(即在本应该存在的位置的偏移)</td> 
  </tr> 
 </tbody> 
</table>

position: absolute; /*绝对定位*/  
坐标的原点在左上角  
left: x 轴的坐标  
top: y 轴的坐标  
**z-index** z 轴坐标 取值越大，越靠上  
width: 宽度  
height: 高度

## 字体相关 ##

**font-weight** 字体粗细  
取值：normal(400)| bold(700)| bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

**font-family**: 字体种类 （电脑上事先需要有这个字体）

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>serif</td> 
   <td>衬线字体 变宽 笔画粗细明显 字体头部尾部有装饰线</td> 
  </tr> 
  <tr> 
   <td>sans-serif</td> 
   <td>无衬线字体 变宽 笔画粗细不明显</td> 
  </tr> 
  <tr> 
   <td>cursive</td> 
   <td>草体 斜体字型</td> 
  </tr> 
  <tr> 
   <td>fantsy</td> 
   <td>奇异字体 装饰性 艺术字体</td> 
  </tr> 
  <tr> 
   <td>monospace</td> 
   <td>等宽字体</td> 
  </tr> 
 </tbody> 
</table>

**font-style**:字体样式  
取值：normal | italic(斜体） | oblique(倾斜）

**text-align**: 文本对齐  
取值： left | right | center | justify(两端对齐）

**text-decoration**： 下划线  
none | underline(下划线) | blink(闪烁) | overline(上划线) | line-through(贯穿)

**letter-spacing** 定义字距  
**Word-spacing** 定义词距  
**line-height** 行高  
normal | length(最佳1.2em~1.8em)

**text-indent** 首行缩进 2em  
**text-shadow** 文本阴影 水平偏移 垂直偏移 阴影模糊度 阴影颜色，  
**text-overflow** 定义溢出文本

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>clip</td> 
   <td>表示不省略标记（…） 简单裁剪</td> 
  </tr> 
  <tr> 
   <td>ellipsis</td> 
   <td>表示显示省略标记（…）</td> 
  </tr> 
  <tr> 
   <td>ellipsis 表示显示省略标记（…）</td> 
   <td>插入位置是最后一个词</td> 
  </tr> 
 </tbody> 
</table>

要加上 white-space：nowrap //文本一行内显示

**overflow:hidden** 溢出内容隐藏

## 美化图像 ##

**border-style** 边框样式  
border-top-style  
border-right-style  
border-bottom-style  
border-left-style

**border-color** 边框颜色  
**border-width** 边框宽度  
border-top-color\\width  
border-right-color\\width  
border-bottom-color\\width  
border-left-color\\width

**opacity**:0~1 定义图像不透明度

**border-radius** 定义圆角图像 12px\\50%  
border-top-right-radius  
border-bottom-right-radius  
border-bottom-left-radius  
border-top-left-radius

**box-shadow** 定义阴影图像  
水平偏移 垂直偏移 模糊半径 颜色

## 美化背景图像 ##

**定义背景图像**：background-image：url( );

**background** 设置渐变背景

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>linear-gradient</td> 
   <td>线性渐变创建背景图像</td> 
  </tr> 
  <tr> 
   <td>radial-gradient</td> 
   <td>径向(放射性)渐变创建背景图像</td> 
  </tr> 
  <tr> 
   <td>repeating-linear-gradient</td> 
   <td>重复线性渐变</td> 
  </tr> 
  <tr> 
   <td>repeating-radial-gradient</td> 
   <td>重复径向渐变</td> 
  </tr> 
 </tbody> 
</table>

background: linear-gradient(to bottom, #00adee,#0078a5);

**background-repeat** 定义显示方式

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>repeat-x</td> 
   <td>图像在横向上平铺</td> 
  </tr> 
  <tr> 
   <td>repeat-y</td> 
   <td>图像在纵向上平铺</td> 
  </tr> 
  <tr> 
   <td>repeat</td> 
   <td>图像在横向和纵向上平铺</td> 
  </tr> 
  <tr> 
   <td>no-repeat</td> 
   <td>图像不平铺</td> 
  </tr> 
  <tr> 
   <td>round</td> 
   <td>背景图像自动缩放直到适应且填充整个容器</td> 
  </tr> 
  <tr> 
   <td>space</td> 
   <td>背景图像以相同的间距来平铺且填充满整个容器或某个方向</td> 
  </tr> 
 </tbody> 
</table>

\*\*+background-attachment \*\*定义固定背景图像

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fixed</td> 
   <td>背景图像相对于浏览器窗口固定</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>背景图像相对于元素固定</td> 
  </tr> 
  <tr> 
   <td>local</td> 
   <td>背景图像相对于元素内容固定</td> 
  </tr> 
 </tbody> 
</table>

**background-origin**: 图像定位方式

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-box</td> 
   <td>从边框开始</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>从补白开始</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>从内容开始</td> 
  </tr> 
 </tbody> 
</table>

**background-clip** 图像裁剪区域

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-box</td> 
   <td>从边框开始向外裁剪</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>从补白开始向外裁剪</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>从内容开始向外裁剪</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>从前景内容(如文字）开始向外裁剪</td> 
  </tr> 
 </tbody> 
</table>

\*\*background-size \*\* 背景图像大小

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>像素 ， 像素</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>百分比 ， 百分比</td> 
   <td>（以容器大小为基础 0%~100%）</td> 
  </tr> 
  <tr> 
   <td>cover</td> 
   <td>保持本身比例，将图像缩放到正好覆盖(可能图片不完整)</td> 
  </tr> 
  <tr> 
   <td>contain</td> 
   <td>保持本身比例，将图片缩放到宽或高刚好覆盖</td> 
  </tr> 
 </tbody> 
</table>

**linear-gradient(angle,color1,color2 ,…,)** 定义线性渐变  
angle: to left | to right | to top | to bottom  
color: 颜色 角度  
**repeating-linear-gradient()** 重复线性渐变  
eg: repeating-linear-gradient(red,blue 20% ,red 40%)

\*\*radial-gradient(shape size at position,color1,color2,…,) \*\*径向渐变  
shape :circle | ellipse  
size : 若circle 则半径 若 ellipse 则x轴半径和y轴半径  
closest-side 指向径向渐变的半径长度为从中心点到最近的边  
closets-corner 指向径向半径的半径长度从中心点到最近的角  
farthest-side 指向径向渐变的半径长度为从中心点到最远的边  
farthest-corner 指向径向半径的半径长度从中心点到最远的角  
position :中心点坐标  
left | center | bottom | right | top  
repeating-radial-gradient() 重复径向渐变  
eg; repeating-radial-gradient(circle at center bottom,\#00a340,\#00a340 20px,\#d8ffe7 20px,\#d8ffe7 40px)

## 美化超链接 ##

**target=’\_blank"** 在新窗口打开  
**target="\_top"** 跳出框架

**超链接样式**

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>a:link {color: }</td> 
   <td>默认样式</td> 
  </tr> 
  <tr> 
   <td>a:visited {color: }</td> 
   <td>访问后</td> 
  </tr> 
  <tr> 
   <td>a:hover {color: }</td> 
   <td>鼠标经过</td> 
  </tr> 
  <tr> 
   <td>a:active {color: }</td> 
   <td>激活时</td> 
  </tr> 
 </tbody> 
</table>

**清除下划线样式** a\{ text-decoration:none；｝  
**鼠标经过时加上** a:hover\{ text-decoration:underline;\}  
**border-bottom** 显示下划线效果

**立体效果**：通过边框和颜色  
**动态效果**：通过缩放字体大小 改变背景图像

## 美化列表 ##

有序列表属性：  
**reversed**.降序  
\*\*start=“number” \*\*起始值  
\*\*type="1 | A | a | I | i " \*\*标记类型

**list-style-type** 列表项目符号类型

**list-style-image** 自定义项目符号 允许指定一个外部图标文件

**list-style-position** 列表项目符号显示位置  
取值：outside | inside

## 美化表格 ##

*colspan*\* 定义可横跨的列数  
**rowspac** 定义可横跨的行数

**border-collapse** 定义表格的行和单元格的边是合并还是分开  
初始-sepaeate(分开) collapse(合并)  
**border-spacing** 定义行和单元格边在横向和纵向上的距离  
**caption-side** 定义表格的caption对象位于表格的底部还是顶部  
取值：top | bottom  
**empty-cells** 定义单元格无内容时是否显示边框  
取值 show | hide  
\***table-layout** 定义布局算法  
fixed 一次一行显示  
auto 全部读取完之后显示

**技巧**  
隔行换色：  
tr:nth-of-type(odd)\{ \} 奇数行  
tr:nth-od-type(evev)\{ \} 偶数行  
鼠标经过时：  
tr:hover\{ ｝  
\#\#美化表单

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>alt</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>max</td> 
   <td>输入字段最大值</td> 
  </tr> 
  <tr> 
   <td>maxkength</td> 
   <td>输入字段中字符的最大长度</td> 
  </tr> 
  <tr> 
   <td>min</td> 
   <td>输入字段的最小值</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>input字段高度</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>input字段的宽度</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>pattern</td> 
   <td>输入字段的格式 pattern="[0~9]" 输入值必须是数字</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td>字段为只读</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>不可用状态</td> 
  </tr> 
  <tr> 
   <td>required</td> 
   <td>字段值是必须的</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>字段的宽度</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>以提交按钮形式显示的图像URl</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>设置Input元素的值 输入框中显示</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>表单类型</td> 
  </tr> 
 </tbody> 
</table>

**textarea**  
文本区域 大容量输入  
属性 cols | rows

点击提示文字获得焦点的两个办法  
1.  
<label for=:username">用户名  
2.表单中每一个元素都有三属性  
1.accesskey 快捷访问建  
IE: ALT+属性值 Firefox:ALT+shift+属性值  
2.tabindex Tab访问键  
0 默认设置  
\-1 禁止标签使用Tab键  
属性越小优先级越高 若相同按照顺序获得焦点  
3.disable 禁止文本框使用

## CSS隐藏属性： ##

visibility:hidden 设置元素不可见 占据空间  
display:none 设置元素不可见 不占据空间  
display: block; 显示

## 样式表 ##

### 1. 类选择器 ###

`.名字` 之后使用标签的 class=“名字引用”

### 2. ID选择器 ###

根据标签的id属性来进行匹配  
`#id值` 之后使用标签的 id=“id值”

### 3. 元素选择器 ###

根据标签的名字进行匹配

优先级: 如果不同的选择器匹配到了同一个元素，

*  style属性定义的样式最高，id选择器优先级次之，类选择器次之，元素选择器最低,
 *  同级选择器，后定义的优先
 *  可以用 !important 改变优先级，可以把优先级提升到最高

### 4. 父子选择器 ###