HTML入门全解

牛青 • 2022年8月8日 pm2:37 • web开发技术 • 242 阅读

一.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="http://www.bubuko.com/%E8%BF%99%E6%98%AFURL">
<style>...省略代码</style>
<base href="http://www.bubuko.com/%E8%BF%99%E6%98%AFURL">
<script>...省略代码</script>
<noscript>...省略代码</noscript>
<!-- 4.body元素 -->
...省略代码

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="http://www.bubuko.com/%E8%BF%99%E6%98%AFURL">
<base href="http://www.bubuko.com/%E8%BF%99%E6%98%AFURL)">
<script>...省略代码</script>
<noscript>...省略代码</noscript>

meta元素（元数据）：用来描述数据的数据
- charset：字符编码
- viewport：暂时不用了解，是适配移动设备的
head是对网页进行一些基本操作
title 网站标题
link
- rel = stylesheet 可以用来引入css文件
- rel = icon 改变网页的图标
- href是超链接
style 用来写css文件
base元素：和a元素同步使用
script元素

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="http://www.bubuko.com/%E8%BF%99%E6%98%AFURL" alt="这是图片无法显示后显示的文字">

单标签
src属性
- 绝对路径和相对路径
  - 绝对路径
  - 相对路径：
    - ../是上一层路径
    - ./是这一层路径（也就是同一层路径）（这个可以省略）
alt属性：当图片失效时加载的文本
src属性和alt属性是img元素必须的属性，缺一不可

7.a元素

<a href="http://www.bubuko.com/%E8%BF%99%E6%98%AFURL" 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="http://www.bubuko.com/img/bd_logo1.png">百度logo</a>
<a href="http://www.bubuko.com/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.字符实体

&nbsp; 一个空格
< > (< 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）

如何对你要的元素进行选择？使用选择器
三种主要的选择器：
1. 元素选择器div
2. 类选择器 .box
  - 一个元素是可以有多个类的，多个类用空格进行分割(重点)
  - 类的名字“见名知意“
  - 当用多个单词时，以-进行连接
3. 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)使用后代选择器（注意有个空格），才能完成这个意思

: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不能删，可以没有内容

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></div>
<!-- div.header -->
<div></div>
<!-- div[title] -->
<div title=""></div>
<!-- div[title="haha"] -->
<div title="haha"></div>
<!-- div#box.hearder[title="haha"] -->
<div title="haha"></div>

2.2 {} (生成元素的内容)

<!-- div{这是我的内容} -->
<div>这是我的内容</div>
<!-- div#main.box{我是div元素} -->
<div>我是div元素</div>

2.3 $ (生成的结构有数字)

属性中有数字

<!-- div.box$*4 -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></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></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

3.隐式标签

.box 或者 #main会直接生成div对应的类或者id
ul里面会生成li

<!-- .box -->
<div></div>
<!-- #main -->
<div></div>
<!-- ul>.item${列表元素$}*5 -->
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<li>列表元素4</li>
<li>列表元素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是兄弟元素
常见组合：
- 事物的名称、事物的描述
- 问题、答案
- 类别名、归属于这类的各种事务

1.4 列表的属性

这些属性都可以被继承

list-style-type
- 设置li前面的样式
  - disc 实心圆
  - circle 空心圆
  - square 实心方块
  - decimal 阿拉伯数字
  - lower/upper-roman 大小写罗马数字
  - none 什么都没有（开发常用）

<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
- td的属性
  - valign 单元格的垂直对齐方式
    - top middle bottom baseline
  - align 单元格的水平对齐方式
    - left center right
  - weight 单元格的宽度
  - height 单元格的高度
  - rowspan 单元格可以横跨的行数
  - colspan 单元格可以横跨的列数、

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">
</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就是你输入的（比如文本框）

4.4 input 和 label

 <div>
<label for="phone">手机：</label>
<input type="text" name="">
</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 (行内元素)

快捷键

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等

HTML入门全解

原文：https://www.cnblogs.com/autoloop/p/15302477.html

以上是HTML入门全解的全部内容。

THE END

二维码

)">

js正则出现第一次匹配是true，第二次匹配是false

< <上一篇

)">

flutter 2.X报错 Bad state: Insecure HTTP is not allowed by platform:

下一篇>>

HTML入门全解

一.HTML代码结构剖析

1.文档声明

2.html元素

3.head元素

4.body元素

二.HTML基本元素

1.h元素

2.p元素

3.strong、code、br、hr元素

4.span元素

5.div元素

6.img元素

7.a元素

7.1.a元素的基本使用

7.2.a元素和base元素结合使用

7.3.锚点链接：跳转到页面的相应位置

7.4.伪链接：不希望打开新的URL，而是希望干点别的事情

8.字符实体

三.URL： Uniform Resource Locator(统一资源定位符)

四.CSS基本学习

1.如何将CSS样式应用在元素上？

2.选择器（selector）

3.最常用的css属性

五.文本/文字属性

1.文本属性

2.文字属性

六.更多选择器

七.伪类和伪元素

1.伪类(pseudo-classes)

1.1动态伪类(dynamic pseudo-classes)

1.2结构伪类（structural pseudo-classes)

1.2.1 :nth-child 与 :nth-last-child

:nth-child (数字)

:nth-child(n)

1.2.2 :nth-of-type 与 :nth-last-of-type

1.2.3 其余的结构伪类

1.3目标伪类(target pseudo-classes)

1.4元素状态伪类(UI element states pseudo-classes)

1.5否定伪类 与 语言伪类

2.伪元素(pseudo-elements)

2.1 ::before 与 ::after

2.2 ::first-line 与 ::first-letter

八.Emmet语法

1.基础Emmet语法

1.1用 ! 或者 html:5 生成html5代码

1.2 > (子代) 和 + (兄弟)

1.3 * (生成多个元素)

1.4 ^ (生成上一个层级的元素)

1.5 () (分组)

2.属性和内容

2.1 生成元素的属性

2.2 {} (生成元素的内容)

2.3 $ (生成的结构有数字)

3.隐式标签

4.CSS的emmet语法

九.CSS特性

1.继承

2.层叠

十.HTML进阶元素

1.列表

1.1 有序列表 (ol li)

1.2 无序列表 (ul li)

1.3 定义列表 (dl dt dd)

1.4 列表的属性

2.表格

2.1 table tr td 的基本认识

2.2 表格中的其它元素

2.3 单元格的合并

2.4 border-spacing

2.5关键知识点

2.5.1. 边框的合并

2.5.2. css居中表格

2.5.3.第一行特殊操作

3.表单

3.1 form

3.2 input

3.3 fieldset 和 legend

3.4 select 和 option

3.5 textarea

1.5否定伪类与语言伪类