一.网站
网站是网页的集合
网页通常是HTML格式的文件，包括图像，视频，文字，语音.....元素组成，用html标签描述出来在浏览器上显示给用户的
二.HTML
HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言
超文本的含义
1.指可以放置多媒体的内容（超出了文本的限制）
2.指可以从一个文件跳往另一个文件（超级链接文本）
它不是一种编程语言，而是一种标记语言（markup language）
标记语言是一套标记标签（markup tag）
三.浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息,计算网页的显示方式并显示页面
IE Trident
firefox Gecko
Safari Webkit
chrome/opera Blink
四.Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准集合。W3C（万维网联盟）是国际最著名的标准化组织。
需要Web浏览器的理由：
浏览器不同，其显示页面或排版就有些差异
Web标准构成：
结构（Stucture）:结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现（Peresention)：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为（Behavior）：行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript
Web标准提出的最佳体验方案：结构、样式、行为相分离
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到Javascript文件中
五.HTML标签语法规范
< html>为开始标签 < /html>为结束标签
< br />为单标签
< html>< /html> 为双标签,一般情况标签是成对出现的
标签关系：包含关系和并列关系
包含关系:
< head> < title>< /title> < /head>
并列关系：
<head></head>
<body></body>
六.HTML基本结构标签
每一个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写的
HTML页面也称为HTML文档
<html></html>定义：HTML标签
说明：是页面中最大的标签，我们称为根标签
<head></head> 定义：文档的头部
说明：注意在head标签中我们必须要设置的标签是title
定义：文档的标题
说明：让界面拥有一个属于自己的网页标签
<body></body>定义：文档的主体
说明：元素包含文档的所有内容，页面内容基本都是放到body里面的
七.VSCode工具生成骨架标签新增代码
1.文档类型声明标签
< !DOCTYPE>文件声明标签，作用就是告诉浏览器用哪一种HTML版本来显示网页 注意它不是HTML标签，它就是文档类型声明标签
2.lang语言种类
用来定义当前文档显示的语言，en是英语网页，zh-CN是中文中文网页
3.charset
字符集（Character set）是多个字符的集合。以遍计算机能够识别和存贮各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档该用哪种字符编码
charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符
否则就会乱码
八.HTML常用标签
1.标题标签< h1>-< h6>
2.段落标签< p>
3.换行标签< br/>【特殊的单个标签】
4.文本格式化标签：
加粗< strong>< /strong>或者< b>< /b>
斜线< em>< /em>或者< i>< /i>
删除线< dei>< /dei>或者< s>< /s>
下划线< ins>< /ins>或者< u></ u>
5.盒子
分区< div > 盒子标签，独占一行，是大盒子
跨度 < span >盒子标签，一行上有多个，是小盒子
6.图像标签<img>
图像属性设定
src ：（图片路径）用于指定图像文件的路径和文件名
alt ： （文本）替换文本。图像不能显示的文字
title ： （文本） 提示文本。鼠标放到图像上，显示的文字
width：（像素）设置图像的宽度
height：（像素）设置图像的高度
border：（像素）设置图像的边框粗细 【图像标签可有多个属性，要写在标签名后】
【属性不分先后顺序，之间用空格隔开就行】
【属性采取键值对的格式，即key="value"的格式，属性="属性值"】
【图片要和html文件放在一起】
7.路径
目录文件夹
根目录：打开目录文件的第一层
1.相对路径，图片相对于HTML页面的位置
同一级：
下一级路径 【/】 ：
上一级路径【../】：
2.绝对路径，指目录下的绝对位置，直接达到目标位置，通常是从盘符开始的路径
如，"D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif"
8.超链接标签 <a>
作用是从一个界面链接到另一个页面
1.语法格式
<a href="跳转目标"target="目标窗口弹出方式">文本或图像</a>
注意：
href 用于指定链接目标的url地址，（必须属性）当为标签应用herf属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其中_ self为默认值，就是此界面打开，_ blank为在新窗口打开方式
2.链接分类
1.外部链接，如< a href="百度一下，你就知道" >百度< /a >
2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可
同一级，上下级与上述语法一样
例如：< a href="index.html">首页< /a>
3.空链接，如果没有确定目标时
< a href="#">首页< /a>
4.下载链接：如果href里面地址是一个文件或压缩包，就会下载这个文件
< a href="文件名称">下载文件< /a>
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
< a href="百度一下，你就知道">< /a>
6.锚点链接：点击链接可以快速定位到页面中的某个位置
-
在链接文本的href属性中，设置属性为#名字的形式
如：< a herf="#two">第二集< /a>
-
找到目标位置的标签，里面添加一个id属性=刚才的名字
如：< h3 id="two">第二集介绍< /h3>
9.添加 < sub> 标签 和 < sup> 标签
< sub>标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，但是与当前文本流中文字的字体和字号都是一样的。
下标文本能用来表示化学公式，比如 H2O。
< sup>标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。
上标文本能用来添加脚注，比如 WWW[1]。
九.HTML中的注释和特殊字符
注释
以 < !-- 为开头 ， 以 -- > 结束 【提示：没有空格】
快捷键：ctrl+/
特殊字符
空格符  ；
＜ 小于号 <；
＞ 大于号 >；
& 和号 &；
￥ 人民币 ¥；
© 版权 ©；
℃ 摄氏度 °；
± 正负号 ±；
× 乘号 ×；s
十.表格标签
1.表格作用
用于显示、展示数据
2.表格基本语法
< table>
< tr >
< td>单元格文字< /td>
.......
< /tr >
....
< /table>
1.< table >< /table> 是用于定义表格的标签
2.< tr></ tr> 是用于定义表格中的行，必须嵌套在< table >< /table>中的
3.< td>< /td>是用于定义表格中的单元格，必须嵌套在< tr></ tr> 中的
4.字母td指表格数据( table data )，即数据单元格的内容
3.表头单元格标签
< th> 表示HTML表格的表头部分（table head）
4.表格属性
一般用css来设置
align （left、center、right） 规定表格相对周围元素的对齐方式
boeder （1或""） 规定表格单元是否拥有边框，默认为"",表示没有边框
cellpadding （像素值） 规定单元边沿与其内容之间的空白，默认1像素
cellspacing （像素值） 规定单元格之间的空白，默认2像素。
width （像素值或百分比） 规定表格的宽度
height （像素值或百分比） 规定表格的高度
5.表格结构标签
用< thead>标签表示表格的头部区域、< tbody>标签表示表格的主体区域
6.合并单元格
方式1.上下跨行合并单元格：rowspan="合并单元格的个数"（最上侧单元格为目标单元格，写合并代码）
2.左右跨列合并单元格：colspan="合并单元格的个数"（最左侧单元格为目标单元格，写合并代码）
十一、列表标签
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐，它作为布局会更加自由和方便。
类别：无序列表、有序列表和自定义列表
1.无序列表
< ul> 一般以项目符号呈现列表项，而列表项使用< li>标签定义
如:< ul>
< li >列表1< /li>
< li >列表2< /li>
< li >列表3< /li>
....
< /ul>
【注意:< ul>标签内只能放< li>标签；但是< li>标签之内可放任意元素】
此外，无序列表会带有自己的样式属性，但在实际使用时，我们会用CSS来设置
2.有序列表
< ol> 列表排序以数字来显示，且使用< li> 标签来定义列表项
注意事项同上
3.自定义列表（footer制作）
< dl> 描述列表 与< dt>（定义项目/名字）和 < dd> (描述每一个项目/名字) 一起使用
如: < dl >
< dt >名词1< /dt>
< dd>名词解释1< /dd>
< dd>名词解释2< /dd>
........
< /dl>
十二、表单标签
表单的目的是为了收集用户的信息
一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息 3个部分组成
1.表单域
表单域是一个包含表单元素的区域
< form> 标签用于定义表单域
< form>会把它范围内的表单元素信息提交给服务器
如:< form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
< /form>
action （url地址）用于指定接受并处理表单数据的服务程序的url地址
method （get/post）用于表单数据提交方式，其取值为get或post
name （名称）用于指定表单名称，以区分同一
2.表单控件（表单元素）
1.input输入表单元素
< input>用于收集用户信息
在 < input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有多种形式（可以是文本段、复选框、掩码后的文本控件、单选按钮、按钮等）
如： < input type="属性值"/> 【此标签为单标签】
type属性值及其描述
button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox 定义复选框
file 定义输入字段和“浏览”按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段。该字段中的字符被掩码
radio 定义单选按钮 【单选按钮要起相同的名字】
reset 定义重置按钮。重置按钮会清除表单中所有数据
submit 定义提交按钮。提交按钮会把表单数据发送到服务器
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符
除了type属性外，< input>标签还有其他很多属性，其常用属性如下：
name （用户自定义）定义input 元素的名称
value （用户自定义） 规定input元素的值 【后台可以看】【写框里的文字】
checked （checked） 规定此input 元素首次加载时应当被选中
maxiength （正整数）规定输入字段中的字符的最大长度
1.name 和value 是每个表单元素都有的属性值，主要给后台人员使用
2.name 表单元素的名字，要求单选按钮和复选框要有相同的name值
< label> 标签为input元素定义标注
< label> 标签用于绑定一个表单元素，当点击< label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用防护体验
如： < label for="sex"> 男 < /label>
< input type="radio" name="sex" id="sex" />
【 < label>标签的for 属性应当与相关元素的id属性相同】
2.select表单元素
< select>下拉列表
如：< select>
< option >选项1 < /option>
< option >选项2 < /option>
< option >选项3 < /option>
.................
< /select>
【在< option>中定义slected="selected"时，当前项即为默认选项】
3.textarea文本域元素
当用户输入内容较多时，我们用 < textarea> 标签
< textarea rows="3" cols="20">
文本内容
< /textarea>
十三、HTML5新增特性
IE9+兼容
div对于搜索引擎来说是没有语义的
1.新标签语义
< header> : 头部标签
< nav> ： 导航标签
< article>：内容标签
< section>：定义文档某个区域
< asider>：侧边栏标签
< footer>：尾部标签
2.多媒体标签
< audio>:音频（尽量用MP3格式）
语法：
< audio controls>
< source src="horse.mp3" type="audio/mpeg">
< source src="horse.ogg" type="audio/ogg">
< /audio>
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
|---|---|---|
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 规定视频输出应该被静音。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
< video>:视频 （尽量使用mp4格式）
语法： < video src="地址" controls="controls">< /video>
或者：< video width="" height="" controls>
< source stc="XXX.mp4" type="video/mp4">
< soutce src="XXX.ogg" type="video/ogg" >
< /video>
< video>常见属性
src 视频url地址
width ， height 设置播放器的宽和高
muted （muted） 静音播放
poster （lmgurl） 加载等待的画面图片
autoplay （autoplay） 视频就绪自动播放
controls （controls） 向用户显示播放插件
loop （loop） 循环播放
preload （auto：预先加载视频 ，none：不应加载视频） 规定是否预加载视频
3.新增 input 属性
type= " email , url , date , time , month , week , number , tel , search , color"
4.新增表单属性
| 属性 | 描述 |
|---|---|
| require | 表单拥有该属性表示的内容不能为空，必填。 |
| placeholder | 表单的提示信息，存在默认值将不显示。 |
| autocomplete | 规定表单是否应打开自动完成（填写）功能，记录以前信息。（on或者off） |
| autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单。 |
| multiple | 可以多选文件提交。 |
| name | 规定表单名称。 |
| novalidate | 规定提交时不应验证表单。 |
| rel | 规定链接资源和当前文档之间的关系。 |
| target | 规定提交表单后在何处显示接收到的响应。 |
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
