HTML入门全解
一.HTML代码结构剖析
<!-- 1.文档声明 -->
<!-- 2.html元素 -->
<!-- 3.head元素 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 下面是非自动生成 但是可以写在head里的元素 -->
<link rel="stylesheet" href="这是URL">
<style>...省略代码</style>
<base href="这是URL">
<script>...省略代码</script>
<noscript>...省略代码</noscript>
<!-- 4.body元素 -->
...省略代码
1.文档声明
<!-- 1.文档声明 -->
- 不能省略
- 放在最前面
2.html元素
...省略代码
- 根元素 ->它只存在一个
- lang属性 (language) 给语音合成工具/翻译工具提供帮助:我的HTML文件是什么语言
3.head元素
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 下面是非自动生成 但是可以写在head里的元素 -->
<style>...省略代码</style>
<link rel="stylesheet" href="这是URL">
<base href="这是URL)">
<script>...省略代码</script>
<noscript>...省略代码</noscript>
- meta元素(元数据):用来描述数据的数据
- charset:字符编码
- viewport:暂时不用了解,是适配移动设备的
- head是对网页进行一些基本操作
- title 网站标题
- link
- rel = stylesheet 可以用来引入css文件
- rel = icon 改变网页的图标
- href是超链接
- style 用来写css文件
- base元素:和a元素同步使用
- script元素
4.body元素
<!-- 4.body元素 -->
...省略代码
- body元素就是网页的具体结构和内容
二.HTML基本元素
1.h元素
<h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
- h有h1到h6,依次从大到小
- h元素有利于SEO(Search Engine Optimization)的优化
- 也就是百度在数据库中对你的网页优先性考虑,在正则中,h标签的权重较重,所以爬虫时会优先考虑一个网页里面一个就可以了(所以h标签不是完全没有用的)
2.p元素
<p>原标题:必须抵制挑衅现代文明的行径</p>
- 是paragraph的简写
- p元素内部不能写div元素!
3.strong、code、br、hr元素
<strong>这是strong元素</strong>
<code>这是code元素</code>
<br>
<hr>
- 四个元素都不常用
- strong 双标签:只是个加粗字体而已
- 使用font-
- code 双标签:它只是给你设置了一个样式: font-family: monospace (等宽字体)
- 我们会用span元素会精准控制一段东西
- br 单标签:换行符 br是break的意思
- 如果要换行,那么我们用div元素进行包裹即可换行,但是不要在p元素内写div元素。
- hr 单标签:分割符
- 可以用div元素来充当分隔符。注意div的高度是line-height来决定的(详见文字属性的line-height)。
4.span元素
<span>这是span元素</span>
- 用于区分特殊文本和普通文本,结合css使用
- 用class对其进行精准控制
5.div元素
<div>这是div元素</div>
- 一般作为其它容器的父容器,用于把网页分割成多个部分
6.img元素
<img src="这是URL" alt="这是图片无法显示后显示的文字">
- 单标签
- src属性
- 绝对路径和相对路径
- 绝对路径
- 相对路径:
- ../是上一层路径
- ./是这一层路径(也就是同一层路径)(这个可以省略)
- 绝对路径和相对路径
- alt属性:当图片失效时加载的文本
- src属性和alt属性是img元素必须的属性,缺一不可
7.a元素
<a href="这是URL" target="_self">这是超链接</a>
7.1.a元素的基本使用
- 双标签
- 定义超链接,打开新的url
- target属性: 在哪里打开页面
- _self(默认值):自己
- _blank:在空白页打开
- 和iframe使用时才有效果的属性:(现在不用)
- _parent
- _top
- 具体的name
7.2.a元素和base元素结合使用
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- base base是href的重复字段抽取 (如果说你前面没有写)-->
<!-- 甚至可以默认所有超链接的target -->
<base href="https://www.baidu.com" target="_blank">
<a href="">百度一下</a>
<a href="/img/bd_logo1.png">百度logo</a>
<a href="s?wd=abc">搜索abc</a>
<a href="https://www.taobao.com">淘宝一下</a>
- base相当于缺省文件,在a元素没有的时候进行补充
- 可以加入a元素的很多属性
- 当a元素有自身的属性时,自身的属性优先级大
7.3.锚点链接:跳转到页面的相应位置
- 所有元素都有title,id,class 三个元素
- id通过 # + name 索引
- class通过 . + name 索引
- a元素的href属性不能省略 否则就不是a属性了
- 当href属性只有一个'#'时,链接会跳到页面的顶部
7.4.伪链接:不希望打开新的URL,而是希望干点别的事情
-
伪链接没有指定指定具体地址
-
用a元素代替button(也就是把链接当按钮使用)
-
和img元素结合
a元素一定是跳转链接吗?不一定,可以通过超链接下载,发送邮件等
8.字符实体
一个空格
< > (< left than, > great than)
& (表示&符号)
"(表示双引号)
三.URL: Uniform Resource Locator(统一资源定位符)
- 资源的地址(位置) 互联网上的每个资源都有唯一的URL
- URL的格式: protocol://hostname/path = 协议://主机地址/路径
- 常见的协议:
- http https 超文本传输协议 https://
- file 本地资源(不需要主机地址)file://
- mailto 访问的是电子邮件地址 mailto:
- ftp 访问的是共享主机的文件资源 ftp://
- ed2k thunder 等
- URL的完整语法格式是:protocol://hostname[:post]/path/[;parameters] [?query]#fragment
- https://www.baidu.com:80/s?wd=ios#page
- port表示端口 从0 - 65535 默认 80,端口号是用来区分服务的
- ?表示query(查询)请求参数,提交给服务器数据
- fragment(片段)也就是锚点
四.CSS基本学习
- 什么是css?
- 给网页的每一个元素设置样式
- css的全称是 Cascading Style Sheets 层叠样式表
- 目前不存在真正意义上的CSS3,是对CSS2.x后对某一些CSS模块进行升级更新后的称呼
- 常见的css属性...(过于多)属性名都是小写
- CSS出来的时候不是就是标准了,而是从草稿->备选->推荐。只有推荐了才是标准
- 属性名:属性值 如 color: red;
1.如何将CSS样式应用在元素上?
- 内联样式(inline style)
- 文档样式表(document style sheet)、内嵌样式表(embed style sheet)
- 外部样式表(external style sheet)
- 外部样式表引入的两种方法:
- 使用link:
- 使用style的@import:@import url(./css/style/css);
- 你可以在一个css样式中使用import url来引入另一个css
- 外部样式表引入的两种方法:
- 关于层叠:后面引入的css会覆盖(层叠)掉前面的css
- 如果外部样式表,指定css编码。在css文档头中加入 @charset "utf-8";
2.选择器(selector)
-
如何对你要的元素进行选择?使用选择器
-
三种主要的选择器:
- 元素选择器div
- 类选择器 .box
- 一个元素是可以有多个类的, 多个类用空格进行分割(重点)
- 类的名字“见名知意“
- 当用多个单词时,以-进行连接
- id选择器#id
- id选择器 +空格+ class选择器 形成一组后代选择器在对应id和class下进行更改
- 不要在同一个页面中用多个id,id是用来分块的
-
通用选择器(*):选择所有的元素(包括body)进行一个初始化
- 常见的操作:对全部元素去掉margin 和 padding
3.最常用的css属性
- color(前景色 不只是文字颜色,下划线删除线,边框颜色等等)
- font-size(文字大小)
- background-color(背景色)
- width(宽度)(行内非替换元素是不生效的)
- height(高度)
五.文本/文字属性
1.文本属性
- text-decoration 装饰线
- none 无装饰线(去掉a元素的默认装饰线)
- underline 下划线(u和ins元素就是设置了这个)
- overline 上划线
- lint-througth
- letter-spacing/word-spacing 字间距和词间距
- text-transform 用于设置文字的大小写转换
- capitalize 将每个单词的首字符变成大写 capital是首都的意思
- uppercase 大写字母
- lowercase 小写字母
- none: 无
- text-indent 用于设置第一行内容的缩进
- text-align 用于设置元素内容在元素中的水平对齐方式
- left
- right
- center
- justify 两端对齐
2.文字属性
-
font-size 决定文字的大小
- 具体数值+单位
- 也可以使用em单位 1em表示100%,2em表示200%
- 谷歌浏览器最小是12px,所以设置12px以下的大小,默认都是12px
-
font-family 设置网页字体
- 字体和操作系统有关系。为了防止字体在操作系统中不存在 我们会设置多个字体。
- 如果都没有,会用默认字体。
- 把英文字体写前面,中文字体写后面。
-
font-weight 用于设置文字的粗细(重量)
- 一般设置为100 - 900
- normal = 400
- bold = 700
-
font-style 用于设置常规和斜体
- normal 常规
- italic 字体的斜体
- em、i、cite、address、var、dfn等元素默认是italic
- oblique 文本倾斜
- 使用italic的时候 需要font-family支持斜体
- oblique是让文字倾斜
-
font-varient (基本不用)
- small-caps 把小写字母变成大写字母 但是按小写字母的规格
-
line-height 行高
- 注意区分height和line-height的区别
- height:元素的整体高度
- line-height:元素中每一行文字所占据的高度
- 应用:让这行文字在div内部垂直居中
- line-height = 文字的高度 + 行距
- 假设line-height是30px,文字高20px,那么上下行距就是各5px
- 如果div的height是200px,那么我设置line-height也为200px,那么文字就居中了
- 这是上下行距对半分的特性
-
font 缩写属性
- 写法:font-style font-variant font-weight font-size/font-height font-family
- font-style font-variant font-weight 顺序可以调换 也可以不写
- line-height 可以省略 但是要写的时候/行高不能省略
- font-size 和 font-family不能省略 缺一不可
六.更多选择器
- 类选择器 .class
- id选择器 #id
- 元素选择器 div p span ...
- 通配选择器 *
更多选择器:
- 属性选择器
- [att = val] 属性值等于什么的元素
- [att *= val] 属性值包含什么的
- [att ^= val] 属性值是什么开头的
- [att $= val] 属性值是什么结尾的
- [att |= val] 属性值刚好等于val,或者val开头且后面紧跟连字符- 的,一般用在lang属性
- 后代选择器 descendant combinator
- div span (div里面的span元素 包括直接和间接元素)
- div p span (div里面的p里面的span元素 包括直接和间接元素)
- 子选择器 child combinators
- div > span (div的直接子span元素)
- .box > .title(类也可以子代)
- 相邻兄弟选择器
- div+p (div元素后面紧挨着的p)
- 全兄弟选择器
- div~p (div后面的全部p)
- 交集选择器
- div.box(div中,class为box的元素(中间没有空格))
- 并集选择器
- div, .box(div这个元素 和 class为box的元素)
七.伪类和伪元素
1.伪类(pseudo-classes)
1.1动态伪类(dynamic pseudo-classes)
- :link
- 未访问的状态
- a:link(a元素的未访问的状态)
- :visited
- 已经访问的状态
- a:visited(a元素的已经访问的状态)
- :hover
- 鼠标悬浮的状态
- a:hover(a元素的鼠标挪到上面)
- 它必须放在link 和 visited之后才有效(在有link和visited的情况下)
- :active
- 鼠标按住不送手的状态
- a:active(a元素的鼠标按住不送手的状态)
- 它必须放在hover后面才有效(在有hover的情况下)
- :focus
- 获取焦点时的状态
编写顺序建议: Link Visited Focus Hover Active
- 去掉a元素的焦点状态(用tab换的时候)
- 假装去掉:用focus状态,里面outline:none; 这样只是没有框线,但是还是选中了的
- a元素中的属性tabindex="-1",tab选择元素的顺序, 如果是-1 那么不可能被选中了
- 如果直接给a元素设置样式,那么相当于对a的所有动态伪类都设置了样式
1.2结构伪类(structural pseudo-classes)
1.2.1 :nth-child 与 :nth-last-child
:nth-child (数字)
- nth就是第n个 n-th
- 这个意思是选中第几个子类
- 这个(1)就是选中第一个子类
- 首先它必须是子类,并且必须是第几个子类
- 注意!body元素也有子元素
- p:nth-child(3)
- 注意!这个意思是p元素是子元素中的第三个(交集选择器)
- 所以p如果是body的第三个子元素,它也会被选择!
- 不要理解成
p元素中的第三个子元素,这是错的!- p :nth-child(3)使用后代选择器(注意有个空格),才能完成这个意思
- 注意!这个意思是p元素是子元素中的第三个(交集选择器)
:nth-child(n)
-
n代表的是自然数(0,1,2..),也就是子元素全部都是
-
:nth-child(2n) / :nth-child(even)
- 所有的偶数
-
:nth-child(2n-1) / nth-child(2n+1) / :nth-child(odd)
- 所有的奇数
-
:nth-child(3n+2)
- 2 5 8 ...的数
- 当然还有其它等差数列
-
:nth-child(-n+3)
- 取前3个
- 在排行榜里面可以操作
:nth-last-child 和 :nth-child一样,只不过是从后往前数
1.2.2 :nth-of-type 与 :nth-last-of-type
- 与nth-of-child基本一致
- 这个是找相同类型的第n个元素
- 也就是计数的时候只计算相同的元素
1.2.3 其余的结构伪类
- :first-child
- 相当于nth-child(1)
- :last-child
- 相当于nth-last-child(1)
- :first-of-type
- 相当于nth-of-type(1)
- :last-of-type
- 相当于nth-last-of-type(1)
- :only-child
- 是父亲中唯一的子元素
- 注意:html元素是文档的唯一子元素
- 如果直接写这个结构伪类,就会全选所有元素
- 因为html根元素的儿子会继承html
- 可以这样写:body :only-child
- :root
- 根元素。如果直接写就是html元素
- :empty
- 空元素
- 这个元素是没有内容的
1.3目标伪类(target pseudo-classes)
-
:target
-
让成为锚点(跳转的目标)会让其变成什么
1.4元素状态伪类(UI element states pseudo-classes)
- :enabled
- :disabled
- :checked
1.5否定伪类 与 语言伪类
-
:not(x)
- x是一个简单选择器
- 包括元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类
- 就是代表除了什么,都选择
- 注意,直接选的时候,是包括了body和html的
- not的意思是:只要不是这个东西,那就都可以
- 不是html?那body也可以,div也可以,其它都可以
- 只支持简单选择器,就是只有一个,不要写一些交集和并集
-
语言伪类(language pseudo-classes)(基本不用,省略)
- :lang()
2.伪元素(pseudo-elements)
- 为了区分伪元素和伪类,伪元素一般用::(两个冒号)
2.1 ::before 与 ::after
- 都是用来对一个元素的内容之前或者之后插入一个内容
- content属性(不能省略)插入的内容
- content可以是文字
- content: url()就可以插入图片了
- 伪元素可以看作是行内元素,不能修改宽和高
- 可以display中更改特性
- inline-block
- 但是content不能删,可以没有内容
- 可以display中更改特性
2.2 ::first-line 与 ::first-letter
- ::first-line 第一行会怎么样
- 只有字体属性、颜色属性、背景属性(还有一些其它属性)
- ::first-letter 第一个字母会怎么
- 字体属性,margin属性等等(还有一些其它属性)
八.Emmet语法
1.基础Emmet语法
1.1用 ! 或者 html:5 生成html5代码
1.2 > (子代) 和 + (兄弟)
-
想要写一个 div 嵌套p元素 嵌套 span元素 嵌套strong元素
- div>p>span>strong
-
写一个h2和div和p并列的
- h2+div+p
-
<!-- 如何生成这个代码 div>h2+a+p>span --> <div> <h2></h2> <a href=""></a> <p> <span></span> </p> </div>
1.3 * (生成多个元素)
<!-- div>p*5 -->
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
1.4 ^ (生成上一个层级的元素)
<!-- div>p>span^h2+a^h1+strong -->
<div>
<p><span></span></p>
<h2></h2>
<a href=""></a>
</div>
<h1></h1>
<strong></strong>
- 可以用 ^^跳两个层级
<!-- div>p>span^^h1+strong -->
<div>
<p><span></span></p>
</div>
<h1></h1>
<strong></strong>
1.5 () (分组)
<!-- div>p>span^h2+a^h1 -->
<!-- div>(p>span)+h2+a -->
<div>
<p></p>
<span></span>
<h2></h2>
<a href=""></a>
</div>
2.属性和内容
2.1 生成元素的属性
- 生成class:div#box
- 生成id:div.header
- 生成普通属性:div[title]
- 普通属性和值:div[title=“haha”]
- 这些值都可以连续嵌套(一次性添加多个属性)
<!-- div#box -->
<div id="box"></div>
<!-- div.header -->
<div class="header"></div>
<!-- div[title] -->
<div title=""></div>
<!-- div[title="haha"] -->
<div title="haha"></div>
<!-- div#box.hearder[title="haha"] -->
<div id="box" class="hearder" title="haha"></div>
2.2 {} (生成元素的内容)
<!-- div{这是我的内容} -->
<div>这是我的内容</div>
<!-- div#main.box{我是div元素} -->
<div id="main" class="box">我是div元素</div>
2.3 $ (生成的结构有数字)
- 属性中有数字
<!-- div.box$*4 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
- 内容中有数字
<!-- div>p{文字内容$}*5 -->
<div>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
</div>
- 数字要00x,要补几个0就用几个$
<!-- div>p.item$$$*5 -->
<div>
<p class="item001"></p>
<p class="item002"></p>
<p class="item003"></p>
<p class="item004"></p>
<p class="item005"></p>
</div>
3.隐式标签
- .box 或者 #main会直接生成div对应的类或者id
- ul里面会生成li
<!-- .box -->
<div class="box"></div>
<!-- #main -->
<div id="main"></div>
<!-- ul>.item${列表元素$}*5 -->
<ul>
<li class="item1">列表元素1</li>
<li class="item2">列表元素2</li>
<li class="item3">列表元素3</li>
<li class="item4">列表元素4</li>
<li class="item5">列表元素5</li>
</ul>
4.CSS的emmet语法
- w h m p
- weigth height margin padding
- 加号表示连续
- 减号(连续号)表示一个内容多个参数
.box1 {
/* w200+p200+m20+p30 */
width: 200px;
padding: 200px;
margin: 20px;
padding: 30px;
}
.box2 {
/* m20-30-40-50 上右下左*/
margin: 20px 30px 40px 50px;
/* p-10-20--30 上 左右 下*/
padding: -10px 20px -30px;
}
- fz20 font-size: 20px;
- fz1.5 font-size: 1.5em;
- fw font-weight: ;
- dib display: inline-block;
九.CSS特性
1.继承
- 一个元素如果没有设置某属性的值,就会跟随父元素的值
- 如果有自己设置的值,就使用自己值
- color font-size等属性会被继承
- 如果这个属性不继承,那么可以强行用这个属性的 inherit 强行继承
- 具体查官方文档 MDN
- 继承的是计算值,不是百分比
- 如果你是百分之50,你的儿子是继承计算后的值
2.层叠
- 普通层叠:后面的覆盖前面的
- 前提:选择器相同
- 优先级层叠(自上而下,从大到小):
- !important
- 内联样式
- id选择器
- 类选择器、属性选择器、伪类
- 元素选择器、伪元素
- 通配符
- 比较优先级的方法
- 从权重大的开始比较每一种权值的数量多少,数量多的优先级高
- 如果数量相同,比较下一个权值
十.HTML进阶元素
1.列表
1.1 有序列表 (ol li)
- ol (ordered list) li (list item)
- ol 的直接子元素 只有 li
- 使用emmet语法快速生成列表 ol>li*5
- 使用tab键进行切换
1.2 无序列表 (ul li)
- ul(unorder list) li (list item)
- ul 的直接子元素 只有 li
- 使用emmet语法快速生成列表 ul>li*5
- 使用tab键进行切换
1.3 定义列表 (dl dt dd)
- dl (definition list)
- dl的直接子元素只能是dt和dd
- dt (definition term) 列表中每一项的项目名
- dd (definition descroption)
- 一个dt后面跟着1个或者多个dd
- dt和dd是兄弟元素
- dl的直接子元素只能是dt和dd
- 常见组合:
- 事物的名称、事物的描述
- 问题、答案
- 类别名、归属于这类的各种事务
1.4 列表的属性
这些属性都可以被继承
- list-style-type
- 设置li前面的样式
- disc 实心圆
- circle 空心圆
- square 实心方块
- decimal 阿拉伯数字
- lower/upper-roman 大小写罗马数字
- none 什么都没有(开发常用)
- 设置li前面的样式
<style>
/* 去掉多余部分 */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* 使用后代选择器 调节想要的样式*/
ul li span {
background-color: aliceblue;
color: beige;
padding: 0 5px;
}
</style>
<ul>
<li> <span>1</span> 海王</li>
<li> <span>2</span>海贼王</li>
<li> <span>3</span>药王</li>
<li> <span>4</span>上海堡垒</li>
<li> <span>5</span>诛仙</li>
</ul>
- list-style-image
- 设置某张图片为li元素前面的标记
- 会覆盖list-style-type的设置
- 格式一定是 list-style-image: url()
- list-style-position(不常用)
- 设置li元素前面标记的位置
- inside 不算到margin里面
- outside 算到margin里面
- list-style
- 缩写属性
- type image style
- 一般直接设置为none
- 缩写属性
2.表格
2.1 table tr td 的基本认识
- tr (table row)行
- td (table define)单元格
- table里面放tr,tr里面放td
- table的属性(开发不用)
- border 边框宽度
- cellpadding 单元格内边距
- cellspacing 单元格间距
- width 表格宽度
- align 水平对齐方式
- left center right
- tr的属性
- valign 单元格的垂直对齐方式
- top middle bottom baseline
- align 单元格的水平对齐方式
- left center right
- valign 单元格的垂直对齐方式
- td的属性
- valign 单元格的垂直对齐方式
- top middle bottom baseline
- align 单元格的水平对齐方式
- left center right
- weight 单元格的宽度
- height 单元格的高度
- rowspan 单元格可以横跨的行数
- colspan 单元格可以横跨的列数、
- valign 单元格的垂直对齐方式
- table的属性(开发不用)
2.2 表格中的其它元素
- tbody
- 表格的主体(和th联合使用)
- caption
- 表格的标题
- thead
- 表格的头
- tfoot(很少用)
- 表格的页脚
- th
- 表格的表头单元格(和tbody联合使用)
2.3 单元格的合并
- 合并的要领
- 合并方向是向右、向下
- 向右是跨列
- 向下是跨行
2.4 border-spacing
- 用于设置单元格之间的水平、垂直间距
- 设置到table上面
- 第一个值是水平方向的值
- 第二个值是垂直方向的值
- 只写一个就是水平和垂直都是同一个值
2.5关键知识点
2.5.1. 边框的合并
- border-collapse 边框重叠 css属性
- collapse 合并(合并两个线,不管距离有多远)
- separate 分割(默认)
2.5.2. css居中表格
- 对整个表格margin: 0px auto;
2.5.3.第一行特殊操作
- 在没有tbody重构的时候
- table tr:nth-child(1)(注意空格)
- 或者 table first-child(注意空格)
3.表单
3.1 form
- 一般情况下,其它表单相关元素都是它的后代元素
- action
- 用于提交表单数据请求的URL
- method
- post请求和get请求(默认是get)
- target
- 同a元素的target
- enctype
- encode编码 type类型
- 对数据进行编码
- multipart/form-data 文件上传必须是这个值
- 文件上传必须是post的method
- accept-charset
- 规定了提交时候的字符(一般不用设置)
- 不设置会使用文档默认的字符格式
3.2 input
- 是行内替换元素(把某个你的代码替换成一个东西,这里是输入框)并且是行内的
- type (input的类型)
- text 文本输入框(明文)
- password 密码输入框(密文)
- radio 单选框
- checkbox 复选框
- button 按钮
- 单标签显示文本: value属性
- reset 重置
- 重置是重置表单内的所有内容(没填之前的内容)
- value属性可以不写,默认是“重置”
- 所有的内容必须在同一个表单(form)中才能进行重置
- reset必须也在form内部
- submit 提交表单数据给服务器
- file 文件上传
- maxlength (最大输入上限)
- placeholder (占位文字-提示你输入啥的)
- readonly 只读(不可修改)
- disabled 禁用
- checked 默认被选中
- autofoucs 页面加载时自动获取焦点
- name 名字
- value 取值
- form 表单
3.3 fieldset 和 legend
- fieldset 是表单元素组(包在外面的)
- legend 是fieldset的标题
3.4 select 和 option
- select 是选择器
- option是select内部的选项
- multiple
- 让select可以多选
- selected
- 默认选中(和input区分)
- size
- 显示多少项
3.5 textarea
- 多行的文本输入框
- cols 默认多少列
- rows 默认多少行
3.6 input和label的关系
<div>
<label for="phone">手机:</label>
<input type="text" id="phone">
</div>
- 点击input text前的文字,可以让焦点聚焦文本框
- 用label实现
- for属性:填写text的id
4.按钮的实现方式
4.1普通按钮的实现
button的默认type是submit(提交)
- input实现 (这是个替换元素)
- 将type选为button
- value 更改名字
- button
- 将type选为button
4.2重置按钮的实现
- input实现
- 将type选为reset
- button
- 将type选为reset
4.3提交按钮的实现
- 注意!表单提交需要form外面包裹
- form的action是你要提交给哪个服务器
- 表单提交,提交的元素必须要有name属性
- 协议头://主机地址/路径?query的时候会提交一个key=value格式的内容
- key就是name ,value就是你输入的(比如文本框)
- 协议头://主机地址/路径?query的时候会提交一个key=value格式的内容
4.4 input 和 label
<div>
<label for="phone">手机:</label>
<input type="text" name="" id="phone">
</div>
- 在lable中点击文字,可以将焦点指向对应的input
- 将for中写上input的id即可
其它问题
1.布尔属性
- 没有属性值,写上这个属性名就代表了使用这个属性
2.去除input的tab键的选中效果
- 不想用tab键切换到上面出现样式,就把对应的表单tabindex=-1
3.textarea不让其进行缩放
- resize:none
4.表单的提交
- 传统的表单提交
- 将所有的input包裹到一个form中
- input必须要有name,name就是query的key
- 同样的name值(如radio,checked,select里面的option)那么需要用value值进行区分
- 如果默认的话,那么value值会是on(选中)
- form设置action(你要提交到的服务器地址)
- input/button的类型是submit
- 点击submit,自动将form中表单的所有数据提交到服务器
- 弊端一:会进行页面的跳转
- 意味着服务器必须将一个页面写好
- 这个是服务端渲染
- 并且将写好的页面返回前端,然后前端直接展示这个页面
- 意味着服务器必须将一个页面写好
- 弊端二:不方便进行表单数据的验证
- 前后端分离
- 通过JavaScript获取所有表单的内容
- 通过正则表达式进行表单的验证
- 发送ajax请求,将数据传递给服务器
- 验证成功后,服务器会返回结果,需要前端解析这个数据
- 并且决定显示什么内容(前端渲染和前端路由)
5.name和value
- name 是 key, value 是 value
- 在radio/checkbox里面需要设置value,因为value不是用户填写的
6.get和post请求
- get是在?后面加上key=value,且多个数据中用&隔开,大小最多1kb
- post请求是放在一个请求体里面的,大小无限制
十一.CSS进阶
1.元素类型的划分
块级、行内级元素
- 根据元素的显示(能不能在同一行显示)类型,HTML元素可以主要分为两大类
- 块级元素(bolck-level elements)
- 独占父元素一行
- 比如div,p,pre,h1-h6,ul,ol,li,dl,dt,dd,table,form,article等等
- 行内级元素(inline-level elements)
- 多个行内级元素可以在父元素的同一行中显示
- 比如a,img,span,stong,code,iframe,label,input,button等
替换、非替换元素
- 替换元素(replaced elements)
- 元素本身没有实际内容,浏览器根据元素的类型和属性,来决定元素的具体显示内容
- 如img,input,iframe,video等
- 非替换元素(non-replaced elements)
- 和替换元素相反,元素本身是有实际内容的,浏览器会直接将其内容显示出来,而不需要类型和属性来判断到底显示什么内容
行内元素才有替换素,块级全是非替换元素
行内元素只有非替换元素才不能随意设置宽高
2.display属性
- display能改变元素的显示类型
- block 让元素变成块级元素
- inline 让元素变成行内级元素
- none 隐藏元素
- 元素会不再占据空间(消失)
- inline-block 让元素同时具备行内级、块级元素的特征
- 可以和其它内容在同一行显示
- 设置宽度和高度
- 宽高默认由内容决定
- 对内是行内元素,对外是块级元素
- 让行内非替换元素能随时设置宽度考高度
- 让块级元素能够跟其他元素在同一行显示
3.visibility属性
- visible 显示
- hidden 隐藏
- 这个只是隐藏,display是消失
4.overflow属性
- 图片超出部分会怎么样
- visible 依然可见
- hidden 超出部分隐藏
- scroll 溢出的内容被裁剪,但可以进行滚动
- auto:自动根据内容是否溢出来决定是否提供滚动机制
5.元素之间的空格
- 行内级元素都会产生空格
- 包括inline-block
- 设置父元素(body)的font-size为0,然后在元素中重新设置自己需要的font-size
- 因为字的大小是0了
- 不推荐使用
- 设置浮动(正解)
6.元素之间的嵌套关系
- 块级元素和行内块级元素可以嵌套任意元素
- 除了p里面嵌套div不行
- 行内元素(span/a/strong)里面不要嵌套块级元素
- 只包含行内元素
十二.盒子模型
在HTML内的所有元素都可以看作一个盒子
1.盒子的构成
- content 内容
- padding 内边距
- border 边框
- margin 外边距
2.content相关属性
- min-weight,max-weight,min-height,max-height
- min-weight是用来限制你网页缩小的时候不让布局改变的
- max-weight是用来限制强行换行的
- min-height是你缩小到一定地步会出现滚动条
- max-height内容如果多余控制的话,会被超出(或者使用overflow属性)
3.padding
- 缩写属性的时候
- 四个值:上右下左
- 三个值:上,左右,下
- 两个值:上下,左右
4.maigin
4.1 上下margin的传递
- 如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素
- 如果块级元素的底部线和父元素的底部线重叠,并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素
如何防止进行传递?
- 给父元素设置padding-top/padding-bottom
- 给父元素设置border
- 触发BFC block format context
- BFC相当于一个结界
- 浮动可以触发
- 设置一个元素的overflow为非visible
- hidden
- auto
- scroll
margin一般设置兄弟元素之间的间距
padding一般设置父子元素之间的间距
4.2 margin的上下折叠
垂直方向上相邻的两个Margin有可能会合并为一个margin,这种现象叫做collapse
其它:
word-break
- 让单词可以断开(换行)
Flex布局
- flexible(弹性布局)
- 开启flex布局的元素叫 flex container
- flex container 里面的直接子元素叫做 flex items
- 如何开启flex布局?(让这个元素成为flex container)
- 在css样式中,display设置
- flex (块级元素)
- inline-flex (行内元素)
- 在css样式中,display设置
快捷键
- alt+鼠标点击 多重光标
- alt+shift+鼠标拉选 多重光标
- w200+h200 (宽高200px)
- m0 (margin: 0;)
- p0 (padding:0;)
- f-s (font-size)
- f-sy (font-style)
- f-f (font-family)
- f-w (font-weight)
- bg-c (background-color)
- t-d (text-decoration)
- l-sp (letter-spacing)
- w-sp (word-spacing)
- t-t (text-transform)
- t-i (text-intent)
- t-al (text-align)
标签语义化
- 选择标签的时候要尽量让每一个标签都有正确的语义
- 比如不要用strong 去做img
- 让正确的标签去做正确的事情
css注意点
- 把不同的css放不同的文件(不用担心css太多, 会打包的)
- 把公共的样式抽离到base.css中
- 不要用标签的属性去控制样式,用css控制
- 设置网页图标用ico,png格式,常用大小16x16等