HTML5+CSS3语法糖（一）

• Html 结构
• css 样式
• js 行为

语义化

语义化：根据具体内容选择标签

呈现出内容结构

利于搜索引擎爬虫更好理解网页

方便第三方设备解析

便于团队开发与维护

文本修饰

文本修饰

强调加粗

斜体

sub 是下标

sup是上标

del 删除文本标签 ins 插入文本标签 .两个配合使用

跳转链接

<base target="blank">
<a href="www.baidu.com"></a>

<a href><img src="." /></a>

特殊符号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LevTMvJM-1615595417922)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614417455713.png)]

ps:ul 和 li 之间不能有其他标签 ul type=“square” ol type=“自定义”

表格标签

table tr th td

th是副导航做第一行当表头,用tHead包住

身体部分用tBody包住

caption是表格的大标题

三个语义化标签：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gTXUMdvS-1615595417933)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614437262850.png)]

仅仅是语义化，没有实际作用

表格属性

针对此table可以通过 cellpadding设置单元格内部间距，cellspacing设置单元格外部间距

对于某一个td可以合并单元格 colspan 合并列 rowspan 合并行

水平对齐：align ：center left right

垂直对齐： valign : top middle bootom

表单

​ 用户:

​ 密码:

​ 男:

​ 女:

​

​ 香蕉

​ 苹果

​ 菠萝

​ 提交

​ 重置

​

表单标签

多行文本 textarea

下拉菜单 select option

<select>

​        <option selected disabled>请选择</option>

​        <option >北京</option>
​        <option >上海</option
​        <option >广州</option>

</select>

label 辅助表单 label的for和 input的id绑定

<form action="#" method="get">
  <table border="1px solid red" cellpadding="30">
      <tbody>
          <tr>
              <td rowspan="4">总体信息</td>
              <td colspan="2">用户注册</td>
          </tr>
          <tr align="right">
              <td>用户名</td>
              <td><input type="text" placeholder="enter username"></td>
          </tr>
          <tr align="right">
              <td>密码</td>
              <td><input type="password" placeholder="enter password"></td>
          </tr>
          <tr align="center">
              <td colspan="2">
                  <input type="submit" value="提交"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="reset" value="重置">
              </td>
          </tr>
      </tbody>
  </table>
</form>

div与span

div划分区域

span上内敛样式

CSS语法格式

div{

color : #ccc;

}

百分比是看父元素的相对值

外部样式：

颜色表示法：

1. 单词表示法
2. 16进制表示法
3. rgb法，三原色标表示法

网页提取颜色工具

背景样式

background-color

background-image

background-repeat 平铺

background-position 图片位置

repeat-x -y 或者norepeat

background-attachment 背景图随着滚动条移动方式scroll按照当前元素偏移，fixed按照浏览器窗口进行偏移

边框样式

border: solid dotted double dashed

针对一条边单独设置

border-right-style:

三角形案例

文字样式

font-family:字体类型, , , 多添加几个保险，可以多匹配直到匹配到

针对于中英文两种

ariea就是只能对英文起作用

中文字体有对应的英文名称

font-size:20px;字体大小 偶数px

font-weight 字体加粗 bolder 或者数值500~900是加粗

font-style:斜体 italic(有的字体不能设置) oblique可以设置所有字体倾斜操作

文本修饰t-decoration:overline line-through underline给一段话加线

text-transform :uppercase,把所有小写变大写，lowercase，，capitalize把首字母变大写

text-indent:32px; 首行缩进两个字（一个字是16px)

​ 2em; 以字体为单位

text-align:left;文本对齐方式 ，justify 两端点对齐

line-height 定义行高，这个行高就是文字的蓝色区域

letter-spacing 字间距

wrod-sapcing 词间距（主要针对英文）

英文和数字都自动这行 word-break = break-all

文字上下居中： line-height=行高就行了

id、class、标签选择器

简单

伪类选择器

:hover 鼠标移入的时候

:actived 点击时候

:link 访问前 a

:visited 访问后 a

一般设置顺序为 L V H A

:after 、:before 通过伪类方式给元素添加文本内容，，设置样式方便了

:checked{width:1000px;height:20000px} 当元素具有checked属性的时候，就会触发

和disabled一样

:focus{bg:red;} 当拿到焦点的时候背景色就是红色

li:nth-of-type(1){ bg = color;} 表示第一个li的背景色变红

2n就是偶数 2n+1就是奇数行换色

li:first-of-type{background-color:red}

CSS继承

div>p 文字样式可以继承，但是布局样式不能继承

但是p可以强制继承 P{border:inherit}

CSS优先级

群组选择器和单一选择器优先级都是一样的，只需要比较顺序

后来者居上

行内>内部>外部

行内 > id > class > 标签tag > * > 继承

1000 100 10 1 权重

!important 强制提升优先级[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MJOISR0v-1615595417936)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614569992627.png)]

标签＋类 > 单类

层次优先级

ul li .box p inpupt{} 1 +1+10+1+1

尽量三层就够了

盒子

由内向外： content->padding->borderr->margin

背景色包括border

box-sizing: border-box 如果要求是长宽200px的盒子，这时候添加这个属性无论你设置多少border和padding和content，整个盒子都是200px，省去了计算。还能解决百分比问题

margin叠加问题 ，如果两个盒子都有margin，不会都加上，而是哪个值大，就margin哪个。所以尽量只给一个元素添加margin

margin传递只针对margin-top，会带着其他盒子也受影响，必须给其他盒子加边框border才能避免被影响

margin: 0 auto ; 盒子左右自适应

width 不设置 盒子可以自我调整。在盒子嵌套的时候

标签分类（类型）

1. block:块 div p ul li h1
   • 独占一行
   • 支持所有样式
   • 宽默认是父元素一样宽
2. inline:内敛 span a em strong img labelb，i，u，sub，sup标签
   • 不独占一行
   • 有些样式不支持 width height margin padding
   • 宽度由内容撑开
   • 两个内敛之间的元素有空隙
3. inline-block 内敛块 input select
   • 挨一起但是支持宽高（块和内敛的特性都有）

空隙解决法：body{font-size:0;} span{font-size:12px;}

标签分类（内容）

1. flow 流数据，打开一个网站能直观的感受到的东西
2. section 划分区域有 article footer header
3. metadata 元数据 有的看的见title 有的看不见style
4. heading 标题 h1 h2 h3 h4之类的
5. interactive 互动 input
6. embedded 嵌入标签 img的src和 audio
7. phrasing 措辞 用来强调strong和em等

标签分类（显示）

1. 替换标签 img的src 引用的路径来替换 input的type
2. 非替换标签 直接告诉浏览器显示出来 div p h1

display

1. block
2. inline
3. inline-block
4. none (不占空间的隐藏) 而visibility:heiiden 占据空间

标签嵌套规则

块里面一定嵌套内敛

块不一定嵌套块 p不能嵌套

内敛不能嵌套块 span不能嵌套div

all in all ：块一定嵌套内敛，可能嵌套块

溢出隐藏overflow

visible

hidden

scroll 无论多少内容都会显示滚动条

auto 如果内容多了就会出现滚动条

overflow-x

透明度

opacity 0透明 1不透明

会让嵌套里的元素也透明 比如div>p 这个p也会透明

解决办法就是用rgba

手势

cursor默认是箭头

pointer是手

move 移动箭头

也可以使用自定义图片[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dYiQMqgC-1615595417939)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614603358337.png)]

弹性盒子

div{

​ min-height:200px;

​ min-width:200px;

}如果太大了内容，就可以撑开盒子

百分比是根据父容器的比例的

CSS默认 样式

无默认样式 div span

有默认样式：

body 有margin的8个像素，h1有margin上下21.440px,p上下margin:16px

ul>li 也有margin ul: list-style 有点

a默认是pointer和下划线

reset样式 *会影响性能

body,p,div,ul,li {padding:0;margin:0;}

ul{list-style:none}

a{test-decoration:none;}

img{display:block} 图片底部容器有空隙，内敛标签都是按照基线对齐的，但是块元素是底线对齐。解决方法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VnWuGCSt-1615595417942)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614608241066.png)]

PS快捷键

ctrl + R 显示标尺

png 半透明

jpg=jpeg 色彩丰富

psd 有图层，自动切图

1. 编辑-首选-增效工具-启动生成器
2. 文件生成图像资源

文档流

float使元素脱标（浮起来了），然后放在父容器的左边，如果已经有浮动元素，则挨着那个浮动元素

left right none

浮动只会影响下面的元素，可以做图文混排

浮动元素在父容器放不下 了就会折行

清除浮动 clear;left 清除左浮动 还有right 。可以使得我这个元素不会被上面浮动了的元素影响到。具体方法是：设置空标签

clear只能操作块，对内敛不起作用

用伪类after

​ .clear:after{ content:’ ';clear:both; display:block }

Position

定位

1. relative
   • 不影响其他元素的布局，只是相对于自身偏移，
   • 自身原位置占据空间
   • 不脱离文档流
2. absolute
   • 脱离文档流，其他元素受影响
   • 使得内敛元素有宽高
   • 使得此盒子的宽高由内容撑开
   • 相对于上一级（已经定位的父元素）进行偏移，若没有父元素定位，则参考于body

省略号

1. 定义width
2. 取消折行 white-space:nowrap
3. overflow:hidden
4. text-overflow:elipisis

CSS雪碧

把所有图片合为一个大图，让网页加载快

圆角边框

width:100px; height:100px

border-radious: 50px或者50%; ->就是圆

border-radious:左上，右上，右下，左下

height减半就是一个半圆

轮播图的圆球

.btn ol{

​ position: absolute;

​ width:100%; 绝对定位只能让内容撑起来宽高，但是我们不会在里面添加内容

​ font-size: 0; 让每个小圆球的距离都是0

​ text-align: center;让文本居中，因为浮动起来的块级元素不好居中

​ }

​ .btn ol li{

​ list-style：none;

​ display: inline-block;转化为内敛就可以textalign居中

​ height:12px;

​ width:12px;

​ border:2px solid yellowgreen;

​ border-radius: 50%;

​ }

dl dt dd

跟ul li很像，但是可以有自己的标题dt

dl

​ dt标题说明

​ dd列表内容

XHtml

Doctype 很复杂

1. 不允许大写
2. 属性布尔值 要写全
3. alt属性
4. 标签必须成双出现

strong，b

strong和em具有语义化

b和i 不具备语义化，但是也可以加粗和斜体

不过有自己的应用场景

引用标签

更具有语义化：

blockquote： 引用大段的段落解释

q：引用小段的短语解释[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xBQIyD91-1615595417944)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614929727068.png)]

abbr：缩写或首字母缩略词 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wsSjJHAN-1615595417945)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614929734698.png)]

address：引用文档地址信息[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OCSPO4Gj-1615595417946)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614929740515.png)]

cite：引用著作标题[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tn7UqoUt-1615595417948)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614929746936.png)]

iframe标签

可以引入其他的HTML到当前HTML

可以做钓鱼网站

可以进行跨域操作，传输数据，可以局部刷新

br\wbr

wbr是软换行，不会强制换行

pre/code

code 暗示这是一个代码

pre是预文字，空格也会保留

map/area热区

map包括area

map热区，可以点击的那种

<img src="./微信图片_20210305160922.jpg" alt="" usemap="#yuanyuan"

​

​

​

rect表示矩形，对应的值空格隔开，左上，右下

circle表示圆，圆心x,y r

poly 表示 自定义，相当于多个矩形

link

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ad7V130c-1615595417949)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614991958825.png)]

写头里就有网站图标了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bmoL3S3D-1615595417951)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614992025469.png)]

预映射资源，提前解析ip地址，可以加快网站访问速度

meta

添加辅助信息

name=“description” content=“我描述自身为送外卖的美团”

再战一个标签meta name=“keywords” content=“魔方”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vPHExP6R-1615595417952)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614992649187.png)]

IE浏览器渲染时最高版本，可以用来写兼容

如果http是refresh表示刷新的意思 content表示秒数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0SANYzQd-1615595417953)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614993000549.png)]

注意url由空格隔开，也在content里面

当http-equiv的值是expires的时候，就是缓存，content可以为 日期

新语义化标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xns4ozHo-1615595417954)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614993432577.png)]

article 独立内容

section 在article里面，来分区

figure：描述图像或视频 内部的figcaption是描述标题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QL3XFZvM-1615595417956)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614993752547.png)]

time 也是一个语义化，没有实际效果

mark可以让p中的文字背景色加黄色

智能提示搜索框

​ list通过id联系起来

​

​

​

​

​

​

​

​

进度条君

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n5j733MV-1615595417957)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614994592065.png)]

progress表示进度完成加载

meter表示测量单位，多少人什么什么的，可以加上low和high，如果超出便会变色

表格美化

empty-cell:hide 隐藏内容为空的单元格

给表格设置单线除了cellpadding:0 让两条线和一块之外，还有border-collapse:collapse

针对列操作：colspan

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fjj9d706-1615595417958)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614998384676.png)]

表单美化

​

    <div></div>

​

label{

​ position: relative;

​ display: block;

​ }

​ label input{display: none;}

​ label div{width:23px;height:23px;

​ position:absolute;

​ background-image: url(./UIImage/2311144049_lanrentuku.com/input_checkbox.png) ;

​ background-repeat: no-repeat;

​ background-position: 0 0 ;

​ }

​ label input:checked + div{

​ background-position:-32px 0px;

​ }

input扩展属性标签

提交到百度吧

​

​

​

​

​

​

​

​

​

比普通的input多了一个X

​

​ 在移动端会默认调起数字键盘

​ 设置时间

​

​

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YoHtoQGI-1615595417960)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1615166726387.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BnM2ReJG-1615595417961)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1615166756775.png)]

text文本框的其他属性

​ autofocus刷新页面自动动获得焦点

​ autocomplete表示是否显示历史输入

​ require可以提示输入不能为空

​ pattern [a-z] 表示只能输入26个英文字母

method表单提交方式

enctypte 表示提交表单时候的数据类型

fieldset登录，加上lengeda主题配合使用

BFC规范

不会影响别的元素,解决margin叠加问题，解决margin传递问题

触发BFC：overflow :hidden position:absolute

BFC让你的盒子无论里面怎么折腾都不会影响外面