MIKU MOE

HTML_CSS_要点复习

HTML_CSS_要点复习

 

HTML

HTML：Hyper Text Markup Language超文本标记语言

W3C ：World Wide Web Consrotium万维网联盟

  • W3C标准包括：

    • 结构化标准语言(HTML，XML)

    • 表现标准语言(CSS)

    • 行为标准（DOM文档对象模型、ECMAScript )

DOCTYPE：告诉浏览器，我们要使用什么规范，默认html

< !DOCTYPE html >

<!--meta描述性标签,它用来描述我们网站的一些信息 -->

<!--meta一般用来做SEo-->

< meta charset="UTF-8">

< meta name="keywords" content="关键字">

功能性链接:

自定义列表:

  • < dl><dt><dd></dd></dt></dl>标签 列表名称 列表内容

音频视频:

  • < video src="路径/MP4.mp4" contrals autoplay></vidio>

  • < audio src="路径/MP3.mp3" contrals autoplay></audio>

    • autoplay自动播放，contrals 控制条

1. 页面结构:

元素名描述
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一快独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏)
nav 导航类辅助内容

2. 内联框架:

  • < iframe src="引用页面地址" name="标识名" width="宽px" height="高px"></iframe>

    • 使用< a href="网址" target="标识名">可以将内联框架跳转到指定网址

3. 表单 *

< form method="post或get" action="向何处发送表单">

< p>输入框:<input type="text" name="pass"/></p>

< p><input type="submit" name="Button" value=“提交"/></p>

< p><input type="radio" value="提交的值" name="组" checked/></p>

< /from>

下拉框：

< select name="列表名称">

< option value="选项的值" checked>文字描述</option>

< /select>

  • checked默认选中

radio单选 text文本框 submit提交 reset重置 checkbox多选 password密码 textarea文本域 file文件域 buttom按钮 image图片

验证:

  • < input type="email" name="email"/>

  • < input type="number" name="num" max="10" min="0" step="1"/>

    滑块:

  • < input type="range" name="voice" max="10！0" min="0" step="2"/>

    • 步长step

    搜索框：

  • < input type="search" name="search"/>

属性说明
type 指定元素的类型。text,password,checkbox,radio,submit,reset,file,hidden,image,button，默认text
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽度。当type 为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text或 password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否是被选中

4. 补充：

  • 只读标签（不可修改内容）：readonly

  • 禁用（选择框无法点击）：disabled

  • 隐藏：hidden

  • 增强鼠标可用性：

    • <label for=""mark">点击获取for中对应的焦点元素</label>

    • < input type="text" id="mark">

  • 表单验证：

    • placeholder ： 提示信息（适用于输入框）

    • required ：非空判断

    • pattern ：正则表达式


CSS

1. 选择器

样式：

三种样式：行内样式 内部样式 外部样式（遵循就近原则）

选择器：id > class > 标签（不遵循就近）

  • 后代选择器 .body p { } 所有后代

  • 子选择器 body>p { } 仅选择后一代

  • 相邻兄弟选择器 .active + p { } 选择同级向下一个相同标签

  • 通用选择器 .active~p { } 选择同级向下所有相同标签

结构伪类：

  • ul li：first-child ul li：last-child 选中ul的第一个（最后一个）元素

  • p：nth-child（num）选中父级元素，选中父级元素下的第num个元素

    • 如果第num个元素与当前元素（p）不同，则不生效

  • nth-of-type（num）选择父元素下第num个当前元素（p）

    • 此方法仅选择当前元素（p），选择的是当前元素（p）顺序

属性选择器：

  • 选择a中存在id属性的元素

    • a[id] { } 属性 [ 属性名 ] { }

  • 选择a中存在id属性为first的元素

    • a[id=first] { } 属性 [ 属性名 = 属性值（可以使用正则表达式）] { }

  • class中含有links的元素

    • a[class *= "links"] { }

  • 选中href中以http开头

    • a[href^=http] { }

  • 选中href中以pdf结尾

    • a[href$=http] { }

= 绝对等于 *= 包含此元素 ^=以此内容开头 $以此内容结尾

2. 复习巩固

  • < span>重点使用span标签</span>

  • linear-gradient( )渐变 --网站 https://www.grabient.com/

  • display：block块元素 inline行内元素 inline-block是块元素但是可以内联在一行

  • opacity：透明度（0-1）

    • filter过滤器实现透明度：filter：alpha（opacity=50）（IE8及更早识别）

　　父级边框塌陷问题：

  1. 增加父级元素高度（不建议）

  2. 在漂浮元素后添加一个空的div标签，定义clear：both 清除浮动（手动添加空白框清除）

  3. overflow在父级元素中增加overflow：hidden；

  4. 父类添加一个伪类（：after{content：“”；display：block；clear：both}）

    浮动元素后加空div ：简单，代码尽量避免空div

    设置父元素高度：简单：元素固定高度会被限制

    overflow：简单，下拉的场景避免使用

    父类添加一个伪类after（推荐）：写法略复杂，但没有副作用，（笔试***）

　　定位：

psoition：

  1. relative 相对定位，基于原本位置移动，原位置保留

  2. absolute 绝对定位

    1. 没有父级元素定位前提下，相对于浏览器定位

    2. 如果父级存在定位，则相对于父级元素定位

    3. 在父级元素内移动

    4. 绝对定位不在标准文档流中，原位置不会保留

  3. fixed 固定定位，相对于浏览器当前屏幕，下拉不会改变其位置

z-index：图层



 

posted @ 2021-08-20 13:11  miku_moe  阅读(57)  评论(0)    收藏  举报