web1.0 静态页面 用户信息的消费者
web2.0 动态交互 用户既是信息消费者也是信息的制造
web3.0 移动互联网 基于HTML5开发
软件：VSCode
常用快捷键：
1、打开命令面板：ctrl + shift + p | F1
2、在默认浏览器打开 alt + b ， 在其他浏览器打开 alt + shift + b
3、向下复制行 shift + alt + 向下箭头
4、向上复制行 shift + alt + 向上箭头
5、向下移动行 alt + 向下箭头
6、向上移动行 alt + 向上的箭头
7、查找 ctrl + f
8、替换 Ctrl + h
9、保存 Ctrl + s
10、ctrl+ 增大字号 Ctrl-减小字号
11、注释 ctrl + / alt + shift + a
前端界面的三个组成部分：
HTML 超文本标记语言
css 样式表语言
javascript 脚本语言
HTML超文本标记语言
HTML文档——网页
后缀名.html
分类：
单标签：<标签名>
双标签：<标签名>[内容]</标签名>
<标签名 属性名1="属性值" 属性名2="属性值">[内容]</标签名>
HTML注释
<!-- html注释内容 -->
HTML基本结构
1、新建一个后缀名为.html的文件
2、在html文件中，输入英文状态感叹号!，按下回车键，生成HTML基本结构
常用html标签
块级标签
div标签 盒子 块
语法：<div>[content]</div>
特性：
1. 宽度默认撑满整个父元素
2. 高度默认由内容撑开
3.独立成行——垂直显示
h系列标签：标题标签
语法：
<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>
特性：
1.宽度默认撑满整个父元素
2.高度默认由内容撑开
3.独立成行——垂直显示
4.默认自带文字加粗
5.自带外间距
h1~h6标题字号依次减小，重要程度依次减弱；h1标签在一个页面中只能出现一次
p标签 段落标签
语法：<p></p>
特性:
1.宽度默认撑满整个父元素
2.高度默认由内容撑开
3.独立成行——垂直显示
4.自带外间距
ul li标签 无序列表
ul列表容器
li列表项，一个ul中可以有多个li标签
语法： <ul>
<li>hhh</li>
<li>hhh</li>
<li>hhh</li>
</ul>
特性
1.宽度默认撑满整个父元素
2.高度默认由内容撑开
3.独立成行——垂直显示
4.自带外间距
5.自带内填充
6.自带列表符 li{ list-style: none; } 去掉自带列表
行级标签
a标签 超链接标签
语法：<a href="链接的URL地址" title="提示信息">链接文字</a>
特性：
1.宽度、高度默认由内容撑开
2.默认横向显示
3.换行和空格会被解析
4.自带文字颜色
5.自带下划线
注意：#占位 href="#"
span标签 万能标签
em标签 文字呈现斜体效果
i标签 文字呈现斜体效果
特性：
宽度、高度默认由内容撑开
换行和空格会被解析
块级标签
dl列表容器 dt列表标题 dd列表项
语法：
<dl>
<dt>专业名词</dt>
<dd>对专业名词的解释</dd>
<dt>列表标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
特性
1.宽度默认撑满整个父元素
2.高度默认由内容撑开
3.独立成行——垂直显示
4.自带外间距
图片标签
img标签——单标签 行块级元素
语法：
<img src="图片的路径" alt="替换文本" width="" height="">
src属性：图片的URL地址
alt属性：替换文本
width属性 图片的宽度
height属性 图片的高度
特性
1.默认横向显示，一行排不下会换行
2.换行和空格会被解析
3.可以设置宽度和高度
标签嵌套规则
1.h系列标签、p标签、dt、dd不能相互嵌套
2.div标签中可以添加任意标签
3.ul标签的第一级子元素必须是li；dl标签的第一级子元素必须是dt dd
4.行级标签一般不会嵌套块级（a除外），块级标签中可以嵌套行级
网友评论