Web 标准构成
Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
结构（HTML5）
表现（CSS3）
行为（JavaScript）
HTML结构格式
html语言的标签都是放在一对尖括号里面的<>，有开始就要有结束（开始和结束的区别就是结束多了一个反斜杠）
<html><head><title>我是网页的标题</title></head><body>大家早上好</body></html>
什么是HTML5
HTML： Hyper Text Markup Language.[ 超文本标记语言 ]
超文本: 本质就是一个文本[在网页中,用来实现页面跳转的文本 —-超链接标签]
标记: 记号. [各种HTML标签] 标签
HTML5是HTML语言发展到现在的第5个版本，所以5是一个版本号；HTML最主要作用就是负责网页的结构；
html5={ html5（标签）+ css3（样式）+ JavaScript（行为）+ api（应用程序说明书）}；
HTML5标签关系
标签的相互关系就分为两种：
第一种、嵌套关系<head>//父<title>我是网页的标题</title>//子</head>如同父子关系第二种、并列关系<head><title>我是网页的标题</title></head>标签上下的位置并列对齐 并列关系<body>大家早上好</body>如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。
字符集（UTF-8）
utf-8是目前最常用的字符集编码方式，UTF-8则包含全世界所有国家需要用到的字符—-相当于英文。
记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。
HTML5涉及的标签
h1~h6都是标题标签
段落标签
左对齐
align-对齐方式 left左对齐居中对齐
center—居中对齐右对齐
right—-右对齐单标签
只有开始没有结束
单独标签一定不能作为父元素
换行
水平线
注释标签: ctrl + /
文档类型: <!doctype html>
盒子标签
div标签——大盒子，没有固定定义，就是一个容器、一个大盒子，可以用来承载任何的内容和标签，经验：用来给网页分区
span标签——-小盒子，也是一个容器，一般用来承载文字或者小图片。（span自身的语义较轻。）
<div> 这是头部 </div> <span>今日价格</span>
文本格式化标签
<b>文字粗体</b> <strong> XHTML 加粗文字推荐使用strong </strong>
<i>斜体</i> <em> XHTML 斜体文字推荐使用em </em>
<s>删除线</s> <dei> XHTML 删除线文字推荐使用dei </dei>
<u>加下划线</u> <ins> XHTML 加下划线文字使用ins </ins>
b i s u 只有使用 没有 强调的意思
strong em del ins 语义更强烈
图像标签img
用img标签 可以添加图片
vertical-align: middle———————可以让图片与文字对齐
<img src="" ait="" title="" width="" height="" border="" />
//该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
图像标记属性
src="url" ————图像的路径
ait="文本" ————图像不能显示时显示的内容
title="文本" ————鼠标停留时显示的内容
width="像素" ————设置图像的宽度
height="像素" ————设置图像的高度
border="数字"————设置图像边框的宽度
链接a标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href:用于指定链接目标的路径进行跳转，具有超链接功能
target：用于跳转链接的页面打开方式，默认代替原链接 seif为默认值
_blank 在新窗口中打开的方式
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，
表示该链接暂时为一个空链接。
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
锚点链接跳转<a href="#box" >锚点链接</a>,
需要跳转的标签，添加一个ID 与锚点名一致的<div id="box">跳转</div>
伪类选择器
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */
cursor:pointer;———————— 鼠标移入显示小手标签
base 标签
base 可以设置整体链接的打开状态
base 写到 里面 例如：
列表标签
容器里面装载着文字或图表的一种形式，叫列表。
最大的特点就是整齐、整洁、有序
无序列表ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
//ul等于队长 li就是队员 可以有多个队员
//无序列表的特点 没有顺序级别之分
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
有序列表ol
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
所有特性基本与ul 一致有序列表会显示有顺序
自定义列表dl、dt、dd
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
表格
表格中的属性级其他标签介绍：
1. border属性： 设置边框
2. width属性： 改变宽度
3. height属性： 改变高度
4. 去掉td与td之间的距离 cellspacing的默认是2
5. 设置内容居中显示 align: left | center | right
◆如果希望表格中的内容对齐，那么将align属性设置给tr或者td
◆如果将align属性设置给table，只能改变table整体的对齐方式，不会影响内容的对齐方式
6. 如果希望给表格设置表头，那么请使用th标签替代td标签，th在表格中就是表示表头，默认实现文字居中加粗显示
7. 设置背景颜色属性： bgcolor="颜色"；
8. 设置表格的标题： <caption>人员信息表</caption>
<table border="1" width="400" height="400" cellspacing="0" align="center" bgcolor="pink">
<caption>人员信息表</caption>
<tr bgcolor="red">
<th bgcolor="green">姓名</th>
<th>年龄</th>
<th>职业</th>
<th>性别</th>
</tr>
</table>
注意：
1. 在浏览器中所有的元素（文字，图片），默认都是左对齐
1.表格的标准的结构写法：
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
表格合并单元格：
1. 横向合并： colspan="2"
2. 纵向合并： rowspan="3"
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
border-collapse:collapse; 重复边框合并
表单
表单组成：
1. 表单域 （form）：
◆属性 action 设置一个后台程序，处理表单控件中的数据
◆属性 method 设置一个提交数据方式 （get | post）
2. 提示信息
3. 表单控件
表单控件：
1. 输入框：
属性： name设置控件名称
maxlength设置当前控件最多能输入多少个字符
readonly=”readonly” 设置当前控件为只读模式（不能输入）
disabled=”disabled” 当前控件没有被渲染成功（没有被激活）【不能输入】
value设置控件默认值
type=”password“ =密码输入框
select 包含 optgroup label=’显示’ 包含option 内容= 下拉列表框
或者
select 包含option 内容= 下拉列表框
属性： **selected=“selected” 设置默认选中项
type=”checkbox“ = 复选框
checked=”checked“ 设置默认选中项
type=”radio“ =单选框
type=”file“ =上传控件
<textarea></textarea> = 填写多内容的文本域
type=”submit“ = 提交表单数据
type=”reset“ =重置按钮
type=”button“ value=”按钮“ = 普通按钮不能提交数据 可以配合js使用
<button> 普通按钮 </button**> 这个兼具提交按钮的功能
拓展点
fieldset: 表单内元素分组
lenged: 分组元素添加标题
datalist:定义选项列表 html5新增的标签 必须配合input一起使用 对于input需要设置list属性
label: 为input标签定义标记(关联)
视频标签
video用来显示视频
☞ 属性:
src: 设置显示视频路径
controls: 显示控制栏
loop: 控制视频循环播放
autoplay: 自动播放
解决视频或音频标签自动播放在谷歌浏览器中不起作用:
在chrome 浏览器中输入：chrome://flags
再搜索audio,找到Autoplay policy
再在右侧的选项中设置为 no user gesture is required 即可
或者
给video标签 添加muted属性
音频标签
CSS
css 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。总结——就是对网页进行修饰，打扮得更好看
要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则
具体格式如下：
div ————(选择器){
color:red;————（属性：值；）
height:20px;————（属性：值；）
}
文字控制属性
font———-基本语法 font: 字体样式 字体粗细 字体大小/行高 字体家族;
font-size—————-控制文字的字号大小，需要加上px单位；
color——————控制文字的颜色，只针对文字有效；
font-family————-设置文字的字体，中文需要用引号括着；
font-weight———-设置文本字体粗细直接用100~900或者bold（加粗）normal（不加粗）
font-style———-设置字体是否要倾斜加粗等
text-align————-设置文本水平对方式，值有三个：left center right；可以在容器的 文本、 图片、在容器中使用
text-indent—————文本缩进
line-height—————行高用于设置行间的距离（行高）。可以控制文字行与行之间的距离
margin:auto—————-可以让又宽度的 块级 标签水平居中
文本修饰线-text-decoration
text-decoration：underline 添加下划线
text-decoration： none 取消下划线
font字体的综合写法
font: 字体样式 字体粗细 字体大小/行高 字体家族;
body{ font: font-style font-weight font-size/line-height font-family;}
注意：
若有收获，就点个赞吧
0 人点赞
