2023/7/3大约 4 分钟
WEB入门
协议
域名
请求服务器
服务器查询响应
浏览器 客户端 下载 渲染
URL：
协议://主机地址:端口号/文件资源目录/文件
比如:https://180.97.33.108:80/index.html
HTML5
- HTML 超文本标记语言
- 元素
- 开始标签
- 结束标签
- 内容
- 元素:开始标签、结束标签与内容相结合，便是一个完整的元素
- 标签的属性
网站标题
网页正文- HTML注释:
常用标签：
- 标题
标题 1
标题 2
标题 3
标题 4
标题 5
标题 6- 段落
普通文- 水平线标签hr
- div和span标签 这两个标签都用于结构布局，表示创建一片区域。
1：我是一个div。
2：我是一个div。
1：我是一个span。
2：我是一个span。- 字体样式标签
我加粗
我加粗
我倾斜
我倾斜
我下划线
我删除线
我下标
我上标- 预设文本样式标签 pre
...标签可以保留段落文本的样式。
与p标签不同，p标签中的连续多个空格，或者回车会被忽略，但是pre标签中的文本会保留这些格式。
如果在p标签中想连续键入多个空格。需要使用 特殊字符串来进行转义。- 常用转义字符
图片和超链接：
1. img 单标签 浏览器中展示一张图片
2. img标签展示图片,三个属性:
- src:必需属性用于指示显示图片的位置，可以使用绝对路径或者相对路径
- alt:非必需属性当图片无法加载时，用于替代显示的文字，开发中为了界面友好，推荐加上
- title:非必需属性所有标签都可以加上该属性，当鼠标悬浮在标签上时，弹出的提示标注文字
```html
绝对路径,使用Internet地址访问
```
```html
同一级路径
图像文件位于HTML文件同一级
如
下一级路径
/
图像文件位于HTML文件下一级
如
上-级路径
../
图像文件位于HTML文件上一级
如.
```
超链接标签 a
...标签用于用户点击后，向指定的地址发起请求，然后浏览器会打开所请求的页面。该过程称为页面跳转。
- a标签的target属性:用于指示浏览器如何打开请求的资源:
- _self :默认值,标识在当前页面打开页面
- _blank:浏览器会打开一个新选项卡,打开新页面
- parent:在父窗口中打开新页面,如果没有父窗口,那么和_self效果一样
- top：在顶层窗口中打开新页面,如果自己就是顶层窗口,那么和_self效果一样
- iframe的name值: 浏览器会在指定的iframe标签中打开新页面
在当前页面打开百度
在新选项卡打开百度
在父窗口中打开百度
在顶层窗口打开百度
在下面的iframe中打开百度- a标签还可以用于创建锚点:以便用户能够快速定位到目标内容
- 创建一个a标签,设置href属性的值为:"#目标id"
- 创建任意一个标签,作为锚点目标,设置id属性的值
点击我去往目标。
使用pre标签是为了能够空出位置。
(可以自己多空几行，方便看到测试效果)
注意这里写的target要和a标签href中#后面的id一样。
``` a标签不会自动换行，所以可以在每一行后面加上<br>标签，做出换行效果
### HTML列表：
#### 1. 列表类型:
- 主要分为无序列表，有序列表，定义列表三类
```html
...：无序列表，Unordered List。
...：有序列表，Ordered List。
...：定义列表，Definition List。无序列表ul
- 无序列表中的各个项之间没有顺序级别之分，是并列的
- ul标签需要搭配列表项li标签一起使用:
第一个表
第二个表
第三个表有序列表ol
有序列表
第一个表
第二个表
第三个表
第一个表
第二个表
第三个表
第一个表
第二个表
第三个表- type：已经不被推荐使用的属性，推荐使用CSS样式来设置。用于指示索引展示的方式，可取值：1,a,A,i,I。
- start：HTML5标准中再次被启用的属性，指示索引的起始值。
定义列表dl
主题1
解释1
解释2
解释3
主题2
主题2-解释1
主题2-解释2
主题2-解释3