网页编程和设计：前端
HTML5
工具：vsCode
快捷键
-
一键生成浏览器文件html
-
!+回车
-
-
常用快捷键
HTML5
-
简介：用来描述网页的一种语言，被称为超文本标记语言，文件用.html结尾
-
标记语言：有一套标记标签构成，标签是由前括号包围的关键字，如
-
标签的两种表现方式：单标签
、双标签
-
DOCTYPE声明：是文档类型的缩写，h5的声明位于文档最前面，处于标签之前，是网页必备的组成部分，避免浏览器的怪异模式
-
基本框架
-
html：定义整个HTML文档，限定了文档的开始和结束点
-
head：用于定义文档的头部，描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其它文档的关系等，其包含的数据基本不会作为内容显示给用户
-
body：定义文档的主体，包含文档的所有内容（如文本、超链接、图像、表格和列表等），会直接显示出来，用户可以直观看到
-
title：可以定义文档的标题，显示在浏览器窗口的标题栏或状态栏上，是标签中唯一要求包含的东西，有利于SEO的优化
-
meta：用来描述一个HTML网页文档的属性、关键词等，如编码格式
-
注释：
标签
-
标题
-
h1~h6由大到小
-
属性：align="left|center|right" 确定标题摆放位置
（图片来源网络，侵删） -
注意不要仅仅为了生产粗体或大写文本而使用标题
-
正确使用标题有助于SEO
（图片来源网络，侵删）
-
-
段落p
-
段落结束处自动换行
（图片来源网络，侵删） -
换行br
-
在不产生一个新段落的情况下换行
-
水平线
- hr
-
属性：color="颜色" width="宽度" size="高度" align="对齐方式"(默认居中)
-
图片
-
-
属性：src="图片路径" alt="替代文本" title="鼠标悬停时显示" width="宽度" height="高度"
-
图片路径：绝对路径（电脑盘符下）、相对路径（同一路径下可以使用文件夹之间的子父级关系）、网络路径（具体网络地址）
-
-
超文本
-
属性：href="url地址"
-
显示：未访问时是蓝色字体并带有下划线、访问过的显示为紫色并带下划线、点击时显示为红色并带下划线
-
文本
-
常用文本标签p
-
-
列表
-
有序列表ol
-
无序列表ul
-
-
表格
-
表格：
行：
单元格(列)： 属性：border：边框 width：宽度 height：高度
单元格合并属性：水平合并：colspan 垂直合并：rowspan
表单
-
由容器和控件组成，表单就是容器，输入框、按钮等叫控件
-
属性：action服务器地址、name表单名称、method数据提交方式（get提交的数据url可以看到，post看不到；get一般提交少量数据，post提交大量数据）
-
表单组成：表单标签、表单域、表单按钮
-
表单元素
-
文本框
-
密码框
-
提交按钮
-
点击提交按钮会将表单内容传送到另一个文件，即action定义的目的文件
-
块元素与行内元素（内联元素）
常见块级元素：div form h1~h6 hr p table ul等
-
常见内联元素：a b em i span strong等
-
行内块级元素（特点：不换行、能够识别宽高）：button img input等
CSS3
层叠样式表，简称样式表，文件后缀名为.css，用于HTML文档中元素样式的定义
CSS规则由两部分构成：选择器，以及一条或多条声明（属性:值）
CSS引入方式
-
内联样式
-
标签内使用style属性，以字符串形式设置各属性，各属性之间用用分号隔开
-
不利于维护
-
-
内部样式
-
在标签内设置标签
-
便于维护，但是多个页面之间易造成混乱
-
-
外部样式
-
使用标签链接到样式表，在中
-
语法：
-
选择器
-
全局选择器
-
*{}可以与任何元素匹配，优先级最低，一般做样式初始化
-
-
元素选择器
-
标签名{} 选择该页面上所有这种类型的标签 所有标签都可以是选择器，不论在第几层
-
-
类选择器
-
.classname{} 灵活使用，对类名相同的元素生效 同一标签可以使用多个类选择器 空格隔开
-
-
ID选择器
-
#idname{} 针对一个标签使用，只能使用一次，对具有该id的元素生效，id是唯一的
-
-
合并选择器
-
选择器1,选择器2{} 可以提取共同样式减少重复代码
-
-
优先级
-
行内样式>ID选择器>类选择器>元素选择器>全局选择器
-
字体属性
-
颜色
-
color
-
-
大小
-
font-size:20px
-
-
粗细
-
font-weight:normal
-
-
字体样式
-
font-style
-
-
字体设置
-
font-family:"SimHei" 每个值用逗号分开，如果名称包含空格，必须加上引号
-
背景属性
-
background-image:url("图片路径")
-
background-position
-
background-repeat
-
background-size
文本属性
-
文本对齐方式text-align:left|center|right 默认left
-
文本修饰text-decoration:underline | overline | line-through 即下划线、上划线、删除线
-
文本大小写text-transform:captialize(每个单词开头大写) | uppercase(全部大写) | lowercase(全部小写)
-
文本首行缩进text-indent:50px 允许负值，如果为负值，即为左缩进
表格属性
-
表格边框 table,td{border:3px solid black}
-
折叠边框 table{border-c
-
