2，html5-CSDN博客

本文链接：https://blog.csdn.net/dashuaigeyyds/article/details/132642708

1，网页的组成

1.图片、文字、搜索框、轮播图、导航 => 网页的结构

2.大小、颜色、边框 => 网页的表现

3.可以搜索、可以滚动、可以点击 => 网页的行为

web的组成:结构、表现、行为
计算机语言:HTML、CSS、JS

2.html的注释符号使用(提示/提醒作用)

1.单行注释: ctrl+/

2.多行注释: ctrl+/

3.部分注释: alt+shift+a

3. 解释html文件中基础结构的使用

1.html标记表示浏览器整个文档对象

2.head标记表示浏览器的头部可以用来加载外部的资源

3.title标记表示网页的标题

4.body标记表示网页的结构内容

4. HTML中的语法使用

1.双标记/常规标记

- 写法:<标记的名称 属性1="属性值1" 属性2="属性值2">< /标记的名称> 
    - `<html></html> <head></head> <title></title> <body></body>`

2.单标记/空标记

 - 写法:<标记的名称 属性1="属性值1" 属性2="属性值2"/>
    - <meta/>

5. html的标签

文本标签

1.标签的名称:h 有六个 h1、h2、h3、h4、h5、h6

2.标签的默认样式

h1到h6的字体越来越小

h1到h6的加粗效果越来越弱

默认会独占一行并且换行

字体上下会有间距

3.标签的作用

h1用来存放当前网页中最为重要的部分(主题文本或者是logo)

h2~h6没有固定的用法,可以表示标题

段落标签

1.标签的名称:p
2.默认样式
- 独占一行并且换行
- 上下有间距
- 段落标签会默认在一行宽度根据当前的可视区域进行变化
3.编辑器内文本在一行显示设置属性:

{
"editor.fontSize": 18,
"editor.wordWrap": "on",
"git.enableSmartCommit": false,
"git.enabled": false,
"explorer.confirmDragAndDrop": false,
"window.zoomLevel": 0,
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"workbench.startupEditor": "newUntitledFile"
}

加粗和倾斜

加粗标签

1.标签名称:b、strong

2.区别:b和strong之间是有区别的后者的加粗多一点但是浏览器区分不明显肉眼不可见

3.strong标签表示语气加强

倾斜标签

1.标签名称:i、em

2.区别:i和em之间是有区别的后者的倾斜多一点但是浏览器区分不明显肉眼不可见

3.em标签表示语气加强

常见的标签

1.删除线标签的使用: del、s

2.下划线标签的使用: u

3.上标和下标:sup sub

4.两个单标签的使用

br 强制性换行

hr 水平线

列表标签

常见的列表标签有三种表达形式:无序列表、有序列表、自定义列表

一.无序列表

1.标签名称:

ul父级标签表示列表的盒子

li子级标签表示列表中的内容

2.默认样式

无序列表默认的符号是黑色的实心圆

独占一行并且换行

如果需要有多个子级的时候书写li即可

3.属性:type类型

disc 实心圆

circle 空心圆

square 方形

4.常用于新闻列表页面或者一些轮播图

二:有序列表

1.标签名称:

ol父级标签表示列表的盒子

li子级标签表示列表中的内容

2.默认样式

有序列表的默认符号是序号默认是1

独占一行并且换行

如果需要有多个子级的时候书写li即可

3.属性

type类型 - A/a I/i

start开始 - 属性值只能是数字表示从第几个开始数的

4.常用于新闻列表页面或者一些轮播图

三:自定义列表

1.标签名称

dl父级标签表示列表盒子

dt+dd子级

2.默认样式

文本是有缩进效果的

当子级元素较多的时候不可以写在一起

图片标签

1. 标签名称： img <单标签>
2. 标签中的属性应用

src ：设置图片的路径

alt：提示文本（当图片加载失败的时候）

3. 只需要了解的属性：width/height/border 宽度/高度/边框单位 px

路径的使用

1. 绝对路径的使用：这种方式只能在自己电脑中使用，不可以在工作中使用

- 含有盘符的路径地址

2. 相对路径的使用

- 同级找同级：目标文件的名称.后缀名

- 父级找子级：目标文件的文件夹/目标文件的名称.后缀名

- 子级找父级：

- ../ 跳出当前文件夹走到上一级

- ../../ 跳出几次有几个

3. 总结

- / 根目录

- ./ 当前目录

- ../ 跳出当前

- .../ 错误的

超链接标签

超链接标签的使用：点击可以跳转到相应的页面

1. 标签名称：a
2. 属性
href 路径
target 目标 _self 打开会覆盖原窗口 _blank 打开新窗户
3. 默认样式
没有设置 href属性值的时候默认字体颜色是紫色
设置href属性值的时候默认字体颜色是蓝色
文本有下划线
4. 拓展 base标签
a标签的背景颜色怎么设置 =》伪类选择器

其他

div：是一个没有任何含义的盒子用来作为网页布局的
span：是一个没有任何含义的盒子用来包裹文字的
这两个是用的比较多的标签
  不换行的空格

标签之间的嵌套关系

1.固定搭配:ul>li、ol>li、dl>dt+dd

2.常见搭配:b>i、a>img

3.错误搭配:p和h之间、p和p

4.总结:div可以嵌套一切(元素类型:块级元素)

透明属性

opacity：数值（0-1）

表单

表单的使用：收集用户信息

常用于登录模块

1. 表单框/表单域
标签名称： form
标签作用：就是一个盒子让用户填写个人信息的
action 行为动作地址（表单提交的地址或者说接口）
method 方法方式前后端交互的方式 get/post
get携带参数， post不会携带参数(具体体现在url地址上)
get相对于post而言安全低一些
在参数前面的问号的意思：接参数
2. 表单控件：表单框就是一个盒子在浏览器中是看不见需要在表单框中让用户填写个人信息需要表单控件 (输入框)
标签名称：input单标签
type属性：默认的属性值 text 表示文本框

表单控件的使用(现在学习的是H4)

1. 属性
type 类型可以设置成不用的效果
name 姓名/名字记录数据保存
value 提示文本占位置用户输入个人信息的时候需要手动删除
placeholder 提示文本不占位置 HTML5里面新增的属性
2. 属性值
text 默认为文本输入框
password 密码框
radio 单选设置相同的name属性即可
checkout 多选
默认选择 checked
禁止选择 disabled
3. 功能按钮：需要放在form 表单域中才会有作用
submit 提交按钮
reset 重置按钮
4. 特殊的空按钮标签
input 中的type类型为button 需要绑定js事件才有意义
button 标签需要绑定js事件才有意义会跳转页面和submit的作用一样（默认提交一次）