HTML + CSS 笔记

​​

HTML

1. 排版标签

h1最好写一个，h2-h6多个，h1-h6不能互相嵌套，p标签不能含有h1-h6、p、div

1. 语义化标签

特定的标签表达特定的意思

优势：代码结构清晰可读性强，有利于SEO，方便社保解析

3.块级元素和行内元素

块级元素独占一行，里面几乎什么都可以写

行内元素中能写行内元素，但不能写块状元素

4.文本标签

em 着重阅读

strong 十分重要内容

span 没语义，包短语

5.图片标签

img （单） src alt width height

6.相对路径

./ 同级 / 下一级 ../ 上一级

7.常见图片格式

jpg (有损压缩图片，支持颜色丰富，占用空间小，对图片细节没极高的要求)

png (无损压缩格式，支持颜色丰富，占用空间大，支持透明背景)

bmp格式（不进行压缩，最大程度保留更多图片细节，支持颜色丰富，保留的细节更多，对图片细节要求更高）

gif格式（支持简单透明背景，支持动态图）

webp格式 谷歌推出一种格式。专门网页呈现图片，具备上述几个格式的优点，但兼容性不太好 使用在网页上各种图片

base64 一串特殊的文本 较小图片

8.超链接

a href target (self 默认值 本页签打开 blank 新页签打开 )

行内元素 a 元素可以除自身以外任何元素

8.1 a 可以跳转到页面

<a href = "https://baidu.com/" target="_black">百度</a> <a href = "https://baidu.com/" target="_self">百度</a>

8.2 跳转到文件

浏览器可以直接打开的文件

<a href = "./1.jpg || 1.mp4 || 1.gif || 1.pdf" ></a>

浏览器不能打开的文件，会触发下载

<a href = "1.zip" ></a>

强制浏览器下载

<a href = "1.MP4" download = "hao.mp4" ></a>html

8.3 锚点

设置锚点

<a name ="test1"></a>       <a id = 'test2'></a>

跳转锚点

<a href = "#test1"></a>     <a href = "#test2"></a>

执行一段js

<a href ="javascript:alert(1);">点我弹窗</a>

8.4 唤起指定应用

<a href="tel:1320000000">电话联系</a>   <a href = "sms:10086">短信联系</a>   <a href = "mailto:119@qq.com">邮箱联系</a>

超文件 ：从当我阅读跳转到超链接指定的内容 （页面 文件 锚点 应用）

9 有序列表 ordered list ( ol ) 无序列表 unordered list ( ul ) 自定义列表 definiton list (dl)

10 表单

form action :表单提交后地址 target 表单提交后如果打开页面 _self 本窗口打开 _blank 新窗口打开 method 提交方式 （get post）

input type 输入框类型 name 用于指定提交数据的名字 maxlength 输入框最大长度

禁用表单控件

input textarea button select option 都可以设置disabled 属性

<form action="https://baidu.com/s">  <input type="text" name="wd"> <button>搜索 </button>  </form>
<form action="https://search.jd.com/search" target="_self">  <input type="text" name="keyword" > <button>搜索 </button>  </form>
<a href="https://baidu.com/s?wd= 手机">搜索</a>

<form action="" method= "post">
  <label for="userName">姓名：</label>  <input id="userName" type="text" name="userName" maxlength=10 value="tom" disabled>
   <label>密码： <input type = "password" name="pwd" ></label>
   <label for="man">男</label><input id="man" type= "radio" name="sex" value="man" checked>
   <label for="woman">女</label><input id="woman" type= "radio" name="sex" value="woman">
    <input type="checkbox" value="hejiu" name="hobby" checked > 喝酒
    <input type="checkbox" value="chouyan" name="hobby" > 抽烟
    <select name='hobby2'>
        <option value="study">学习</option>
         <option value="read" selected>读书</option>
    </select>
    <textarea rows="10" cols="10" name="textarea"></textarea>
    <input type = "submit" value="提交">
    <input type = "reset" value="重置">
    <input type = "button" value="加测">
</form>

11 fieldset 和 legend 的使用

<fieldset>  
<legend>主要信息</legend>
<label>密码：<input id = "mima" type ="password" name="pwd">
</fieldset>

12 框架标签

iframe name width height framborder

<iframe name='container' framborder="0" width="900" height="300">
</iframe>
<a href="https://toutiao.com" target="container">点我看新闻</a>
<a href="https://taobao.com" target="container">点我看淘宝</a>
<form action="https://so.toutiao.com/search" target="container">
    <input type="text" name="keyword">
    <input type="submit" value="搜索">
</form>

13 字符实体

< 小于号

&lt ; > 大于 >

& &amp

￥ ¥

C &copy ;

乘法 * ×

除法 &dvide;

CSS

行内样式

内部样式

外部样式

css 语法规范

选择器 声明块

ID选择器

并集选择器 就是或 #id,.rich{}

交集选择器 且 p.beauty{}

子代选择器 div>a{} 儿子

后代选择器 ul li {} 所有后代

兄弟选择器 div+p{} 我下面的兄弟 div~p 我所有的兄弟

属性选择器

[属性名] [属性名=“值”] [属性名 ^= "值"] [属性名 $="值"] [属性名 *= “值”]

[title="tome"] [title] [title^='tom'][title$='tom'] [title*='tom']

结构伪类选择器

:first-child :last:child :nth-child(n) 所有兄弟元素中的第几个

:first-of-type :last-of-type :nth-of-type（n） 所有同类型兄弟元素中第几个

关于n 中的第几个 1~正无穷整数 2n或even 2n+1 odd 奇数

:only-child (没兄弟元素 独生子女)

:only-of-type 选择没同类型兄弟元素

:root 跟元素

:empty 内容为空元素

动态伪类

:link :visited :hover :active :focus

input:focus,select:focus{
    color:orange;
    background-color:green
}

否定伪类

:not(选择器)

:not(div)

UI 伪类 :cheked :enable :disabled

目标伪类 :target 选中锚点指向的元素

语言伪类 :lang 指定语言选中元素

伪元素选择器

选中元素中一些特殊的位置

常用伪元素 ::first-letter （第一个文字） ::first-line（第一行文字） ::selection （鼠标选中的内容） ::placeholder(选中输入框提示的文字) ::before（在元素最开始的位置） ::after （在元素结束的位置）

选择器优先级

行内样式 >ID 选择器 > 类选择器 >元素选择器>适配选择器

CSS 三大特性

层叠性 继承性 优先级

颜色表现形式

r 红色 g 绿色 b 蓝色 a 透明度

h 色相 s 饱和度 l 亮度

hex hexa #fffffff

字体大小 字体风格 字体重量 font-weight 字体复合写法

文本颜色 color 文件间距 letter-spacing text-decoration 文本修饰

text-decoration:overline dotted

文本缩进 text-indent :40px

文本对齐 text-align

行高 line-height

div{
    line-height:1.5;
    font-size:12px
}

Js