Html小总结

一.基本概念：

1.网页和网站

网站有N个网页组成

网页中包含：文字，图片，视频，音频，链接，程序等

网页的内容是由HTML技术实现

网页的后缀通常都是.html (.htm为历史遗留问题 现在统一写为.html)

2.浏览器和渲染引擎

常见浏览器：Google Chorme，Firefox，Edge，Safa，Opera（不同的浏览器渲染内核不同）

3.网页的三层结构

结构层：通过HTML实现，也就是网页的内容

样式层：给网页提供样式（布局，美化等）

交互层：通过JavaScript实现，JS是前端最最最需要掌握的技术

4.开发工具

推荐使用VScode  优点：小巧灵活，拓展多

VScode常用快捷键：

shift + alt + 向下箭头  =>  复制上一行
tab  => 向后移动代码
shift + tab  => 向前移动代码
! + tab => html基本骨架  !是英文的!
div.wraper + tab  =>  生成一个带名字的div
鼠标中键 + 向下拽  => 同时选中多行  
键盘上的del键  => 删除文件
F2  =>  重命名
shift + alt + f => 格式化代码
ctrl + f  => 查找内容并替换内容

 5.标签，属性，元素

标签：所有标签都是使用< >包裹起来的，分单双标签，分男标签（行内元素），女标签（块级元素），人妖标签（行内块元素）

标签与标签之间是有关系的，分兄弟关系和父子关系

属性：写在开始标签中，以xxx="xxx"这种形式出现，一个标签中可以有N个属性

属性也分两类：公有属性，私有属性

共有属性：class,id,title,style

元素：标签+属性+标签之间的内容 

---

二.Html的基本骨架：

1.文档声明

Html5的文档声明

告诉浏览器，以什么样的标准来解析我们的代码

2.html元素

是一个网页的根元素，只有一个

lang属性：指定网页的语言 zh-CN为中文 en为英文

3.head元素

网页的头部：基本上对网页的设置，都在head实现

title属性：指定网页标题

meta属性：charset="UTF-8" 如果不指定，网页会乱码

4.body属性

网页的主要内容都是写在body中的

---

三.常用标签：

1.h系列-标题标签 ==> h1->h6逐级递减

2.p标签-段落标签 ==>浏览器会自动适用换行

3.换行标签
强制换行，是单标签

4.文本格式化

加粗     或

倾斜     或

删除线  或

下划线  或

5.无语义标签 -> div span

6图片标签

属性：

        src: 图片的路径（来源）

        alt：当图片加载错误时显示的文字

        title:当鼠标悬停在图片上显示的文字

        width:图片的宽度

        height：图片的高度

        border:图片的边框

属性的特点：1.属性之间部分先后顺序

                      2.属性名与属性值之间以键值对的形式存在

                      3.属性名与属性值之间以等号分隔   属性值要以引号包裹

7.路径和链接

路径：绝对路径和相对路径

        相对路径->在同一个文件夹直接找名字,向上一级  ../   向下 /

链接标签 

        外部链接    写完整的 协议  域名   网址

        内部链接   直接写文件名即可

       属性：1）href:指定跳转的页面

                  2）title：鼠标悬停显示的文字

                  3）target:  _self(默认会覆盖原来的窗口)   _blank(会以新的窗口打开)    窗口的打开方式

                  4）#：会阻止页面跳转但是会刷新页面

锚点：链接使用#    目标标签id值与连接#号后面一致

8.注释与特殊字符

     编辑器使用Ctrl+/ 快捷键

---

四.列表类标签：

无序列表 


有序列表 


自定义列表

---

五.表格类标签：

1.标签

 表格
 行
 单元格
 表头    加粗  加黑 自动居中
  表格的标题   写在内部  显示外部  居中
  结构头
  结构体
 结构底

2.属性

width：宽度
height：高度
cellspacing：单元格与单元格之间的距离
cellspadding：单元格与内容之间的距离
align：left/center/right      注意：当给表格设置居中整个表格会居中 （文字不会居中） 当指定tr  或者td  文字居中    
border：表格的边框   默认的0
colspan：列合并     
rowspan：行合并     

---

六.表单类标签：

 1.input属性

1.text：文本框
2.password：密码框
3.radio：单选按钮
4.checkbox：复选框
5.button：普通按钮
6.reset：重置按钮  需要配合form表单才有作用
7.submit：提交按钮
8.image   属性  src
9.file 文件按钮   上传图片

2. name属性

1.发送后台......
2.name的标识 对于单选按钮  只能选择一个

3. value：文本框默认显示的文字
    checked：默认选中 
    可以写一个属性   也可以 属性名=属性值

4.label用法

1.请输入
2.请输入
    

5.文本域：textarea：用户留言

6.下拉列表

        请选择
        苹果
        香蕉
        橘子


下拉列表的默认选中： selected

 7.form表单

主要的作用：是收集用户信息   发送后台
action：  提交后台的地址
method="get/post"   提交（传输）后台的方式
name =“a” 告诉服务器  由哪个表单提交过来的