html 笔记

阅读目录

1. web的三大标准:
2. 标准的分类:
   • 公共的属性:

 

---

回到顶部

web的三大标准:

(1)html 结构标准
(2)css 表现(样式标准)
(3)js 行为标准

回到顶部

标准的分类:

公共的属性:

（1）id:
身份证 一个页面中只有一个唯一的id
<p id = 'aaa'>文字1</p>
<p class = 'aaa'>文字2</p>
<p class = 'aaa'>文字2</p>
<p class = 'aaa'>文字2</p>

css选择器:
*{
通配符选择器
}
标签选择器
div{

}
id选择器
#aaa{
color:red
}
类选择器
.aaa{
}
（2）class:
（3）title: ***
鼠标悬浮到内容显示的标题

(1)行内标签

 

 

a属性：
　　href:链接网络资源或者本地资源地址
　　target:
　　_self:默认的在本页打开网址
　　_blank:在空白页面打开新的网址
　　span:

strong
em
i

img:行内块
属性:
src:链接的图片资源(本地图片资源或者cdn)

alt:图片加载失败的时候显示的文本

(2)块级标签:

div:
division 分割
作用:分页面中的每块区域
p:
段落标签:
p标签内部只能放行内(span,a,img,input)的标签,不能放块标签
ul:
它的孩子只能是li

li
ol
dl
dt
dd

特点:

(1)行内标签:
1.在一行内显示
2.不能设置宽高,默认是字体的大小
(2)块级标签:
1.独占一行
2.可以设置宽高,如果不设置宽 默认是父亲的100%的宽度
(3)行内块标签:(img,input)
1.在一行内显示
2.可以设置宽高

标签嵌套的问题
文档 index.html

html
head body


今日内容:
(1)table表格标签
table:设置border:'1'属性,单元格带边框的效果
style="border-collapse:collapse;" 表格中很细表格边线的制作：
tr:每行
td:每行单元格的数据

(2)form表单标签:
action:提交的地址
method:提交的方式
get:不安全
post:相对安全


input表单控件:
type:
text: 明文显示用户输入的数据
password 密文显示用户输入的数据
radio单选按钮
checkbox:复选框
file:上传文件所用
submit:功能固定化，负责将表中中的表单控件提交给服务端

value:控件的值既要提交给服务器的数据
name:控件的名称，服务端用
disabled:该属性只要出现在标签中，表示的是禁用该控件


注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data

https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c


状态码简单介绍:
200以上:表示成功请求的状态码
300以上: 缓存
400以上: 404 网页加载失败 前端出错
500以上: 后端逻辑出错,后端业务逻辑出错

(3)css的作用:修饰页面的结构,让页面好看
(1)css的引入方式
1.行内样式

<div style='color:red;'></div>
2.内接样式
3.外接样式
外接式
导入式
(2)基础选择器
id选择器:
#app
类选择器:
.app
它选择的是共性,而不是特性
标签选择器:
div
通配符选择器

总结：

不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
每个类要尽可能的小，有公共的概念，能够让更多的标签使用
玩好了类 就等于玩好了css中的1/2

到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id

原因：id一般是用在js的。也就是说 js是通过id来获取到标签


(3)高级选择器
后代选择器:
选中的是儿子 孙子.....

子代选择器
并集选择器
交集选择器