HTML基本结构、语法以及常用标签

时间：2020-12-24 12:02:09 收藏：0 阅读：0

前端的概述

web的发展史
- web1.0 简单的静态页面早期三大门户搜狐新浪网易
- web2.0 更注重用户之间的交互用户即是信息的消费者也是制造者微博
- web3.0
  - 人工智能
  - 复杂的页面功能
  - 即时通讯
web的前景
- pc端的网页
- 移动端的网页
- ios android

vscode编译器的使用

快捷键
- 复制本行到下一行 shift+alt+↓
- 复制本行到上一行 shift+alt+↑
- 查找 ctrl+F
- 替换 ctrl+H
- 同时写多行 1.按住鼠标滑轮向下滑动，可以出现多个光标 2.按住alt键，点击左键，可以不同位置，出现光标

浏览器内核

浏览器的渲染引擎，作用是解析我们代码成为画面
五大浏览器及其内核(都是自主研发内核)
chrome谷歌 firefox火狐 opera欧朋 ie（微软） safari(苹果)

blink（webkit分支） gecko（高版本兼容谷歌内核） presto（后来版本改成blink） trident webkit
360、qq、UC、搜狗：双内核（blink&trident）

chrome谷歌	firefox火狐	opera欧朋	ie（微软）	safari(苹果)
blink（webkit分支）	gecko（高版本兼容谷歌内核）	presto（后来版本改成blink）	trident	webkit

网页三层结构

HTML 结构层--页面有什么东西
CSS 表示层--拥有的东西是什么样子的
JS(javascript) 行为层--用户的行为触发的事情

HTML语言

html定义

hyper text markup language （超文本标记语言），不是编程语言

html文档(扩展名或者后缀名)

.txt .doc .xls
.html

html基本语法

标签结构
- 开始标签开始，结束标签结束，内部可以包含文字或者其他标签
- ```
<关键字>
    文字内容
    <关键字>
        文字内容
    </关键字>
</关键字>
```
- 空标签，只有开始标签，没有结束标签
标签属性
- ```
<cxl name="cxl" age="25" profession="singer"></cxl>
```
- 标签的属性只能设置在开始标签。

html基本结构

<!-- 不是标签，是一个声明，声明文档类型，告诉浏览器以哪种规范来解析文档，这是html5的写法 -->
<!DOCTYPE html>
<!-- html是文档的最大标签 -->
<html lang="en">
?
<!-- head头部标签，内部写，css样式，元信息，标题 -->
<head>
    <!-- 
        设置字符编码格式
        gb2312 中文简体
        GBK 中文简体和繁体
        UTF-8 万国码，中文，英文，日文，韩文，法语
     -->
    <meta charset="UTF-8">
    <!-- 
        配置窗口信息（移动端需要配置）
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 文档的标题 -->
    <title>Document</title>
</head>
?
<body>
<!-- body身体标签，内部写，所有的文档结构标签 -->
</body>
?
</html>

常用标签

常用块级标签及特点

div
- 最常用的块级标签
- 网页应用场景
p
- 段落标签
h1-h6
- 标题标签
特点：垂直上下排列，独立成行

常用内联标签及特点(行内标签)

span
- 常用的行内标签，用户图标
strong
b
- 加粗
em
i
- 斜体
sub
- 定义下标字
sup
- 定义上标字
del
s(基本淘汰)
- 删除线
特点：默认在一行排列，超出一行会折行

其他标签

br
- 换行标签
hr
- 水平分隔线

图像标签

img

自带属性：

src 引入文件的路径

绝对路径

网络路径 http:// https://

本地磁盘路径 C:/ D:/

相对路径

同级目录下 ./ (可以省略)

上级目录 ../ (上上级目录 ../../)

alt 友好提示

title 鼠标悬停时展示

width 图片宽度，只设置宽度时，高度会等比例缩放

height 图片高度

html字符实体

https://www.w3school.com.cn/html/html_entities.asp

css样式：

text-align: center 设置文本对齐方式为居中

color: red 字体颜色为红色

font-size: 20px 设置文字大小为20像素

格式

style="属性名:属性值;属性名:属性值;属性名:属性值;...."