HTML
基础知识
1.Web 标准构成
Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
- 结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 最重要
- 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
- 行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript
2.HTML标签分类
在HTML页面中，带有“< >”符号的元素被称为HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。
1.双标签
<标签名> 内容 </标签名>
该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
比如 我是文字
2.单标签
<标签名 />
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
比如
3.HTML标签关系
标签的相互关系就分为两种：
1.嵌套关系
<head> <title> </title> </head>2.并列关系
<head></head> <body></body>4.文档类型<!DOCTYPE>
这句话就是告诉我们使用哪个html版本？ 我们使用的是 html 5 的版本。 html有很多版本。
标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。注意： 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。
5.字符集
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
gb2312 简单中文 包括6763个汉字
BIG5 繁体中文 港澳台等用
GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符
6.注释
<!-- -->
7.文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
</body>
</html>
常用标签
【1】html标签
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
【2】head标签---》里面放的是页面的配置信息
head标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
title、meta、link、style、 script、 base。
应该把 head 标签放在文档的开始处，紧跟在 html 后面，并处于 body 标签之前。
文档的头部经常会包含一些 标签，用来告诉浏览器关于文档的附加信息。
【3】body标签---》里面放的就是页面上展示出来的内容
body 元素是定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body是用在网页中的一种HTML标签，标签是用在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容！
head中可用标签
<html>
<!-- 这是一个注释，注释的快捷键是ctrl+shift+/-->
<!--
head标签中：放入：页面的配置信息
head标签中可以加入：
<title>、<meta>、<link>、<style>、 <script>、 <base>。
-->
<head>
<!--页面标题-->
<title> 亚洲最大的赌场</title>
<style> 内部书写css代码 </style>
<script> 内部书写js代码 还可以引入外部js文件（写路径） </script>
<link rel="stylesheet" href=" 引入外部css文件 ">
<!--设置页面的编码，防止乱码现象
利用meta标签，
charset="utf-8" 这是属性，以键值对的形式给出 k=v a=b
告诉浏览器用utf-8来解析这个html文档
-->
<meta charset="utf-8" /><!--简写-->
<!--繁写形式：（了解）-->
<!--<meta http-equiv="content-type" content="text/html;charset=utf-8" />-->
<!--页面刷新效果-->
<!--<meta http-equiv="refresh" content="3;https://www.baidu.com" />-->
<!--页面作者-->
<meta name="author" content="msb;213412@qq.com" />
<!--设置页面搜索的关键字-->
<meta name="keywords" content="java;线上培训;架构师课程" />
<!--页面描述-->
<meta name="description" content="详情页" />
<!--link标签引入外部资源-->
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
</head>
<!--
body标签中：放入：页面展示的内容
-->
<body>
this is a html..你好
</body>
</html>
body中可用标签
文本标签
<h1> 我是标题 </h1> 1到6级
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<i><u><b>加粗倾斜下划线</b></u></i>
<p>段落标签</p> 一段
<br>换行
<hr>水平线
<font color="#397655" size="7" face="萝莉体 第二版">这是字体</font>
多媒体标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--图片
src:引入图片的位置
引入本地资源
引入网络资源
width:设置宽度
height:设置高度
注意:一般高度和宽度只设置一个即可，另一个会按照比例自动适应
title:鼠标悬浮在图片上的时候的提示语，默认情况下（没有设置alt属性） 图片如果加载失败那么提示语也是title的内容
alt:图片加载失败的提示语
-->
<img src="img/ss6.jpg" width="300px" title="这是一个美女小姐姐" alt="图片加载失败"/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1833909874,761626004&fm=26&gp=0.jpg" />
<!--音频-->
<embed src="music/我要你.mp3"></embed>
<br />
<!--视频-->
<embed src="video/周杰伦 - 说好的幸福呢.mp4" width="500px" height="500px"></embed>
<embed src="//player.video.iqiyi.com/38913f9ed7358c0933e82a03d9b26ec1/0/0/v_19rv8qeokk.swf-albumId=9194699400-tvId=9194699400-isPurchase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</body>
</html>
超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--超链接标签：作用：实现页面的跳转功能
href:控制跳转的目标位置
target:_self 在自身页面打开 （默认效果也是在自身页面打开） _blank 在空白页面打开
-->
<a href="文本标签.html">这是一个超链接01</a><!--跳转到本地资源-->
<a href="">这是一个超链接02</a> <!--跳转到自身页面-->
<a href="abc">这是一个超链接03</a><!--跳转的目标找不到，提示找不到资源-->
<a href="https://www.baidu.com" target="_self">这是一个超链接04</a><!--跳转到网络资源-->
<a href="https://www.baidu.com" target="_blank">这是一个超链接05</a><!--跳转到网络资源-->
<a href="https://www.baidu.com" target="_blank"><img src="img/ss.jpg" /></a>
</body>
</html>
设置锚点：
应用场合：当一个页面太长的时候，就需要设置锚点，然后可以在同一个页面的不同位置之间进行跳转。
同一个页面不同位置的跳
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="1F"></a>
<h1>手机</h1>
<p>华为p40</p>
<p>华为p40</p>
<p>华为p40</p>
<a name="2F"></a>
<h1>化妆品</h1>
<p>大宝</p>
<p>大宝</p>
<p>大宝</p>
<p>大宝</p>
<p>大宝</p>
<a name="3F"></a>
<h1>母婴产品</h1>
<p>奶粉</p>
<p>奶粉</p>
<p>奶粉</p>
<a name="4F"></a>
<h1>图书</h1>
<p>thinking in java</p>
<p>thinking in java</p>
<p>thinking in java</p>
<p>thinking in java</p>
<p>thinking in java</p>
<p>thinking in java</p>
<a href="#1F">手机</a>
<a href="#2F">化妆品</a>
<a href="#3F">母婴产品</a>
<a href="#4F">书籍</a>
</body>
</html>
常用标签
前期布局
<div> 块标签 </div>
<span> 行内标签 </span>
<img src="" alt=""> src 图片路径（本地或网上） url 自动向改url发送get请求 alt 图片加载不出来 会给一个描述信息 title 鼠标悬浮到图片上 自动展示信息 height width 尺寸
普通文本先用span标签
\1. 块儿标签（占一行） 可以修改长宽 行内标签不可以修改 可以嵌套任何块儿级标签和行内标签 （特例 p 只能嵌套行内标签） h1 p div
\2. 行内标签 本身多大就站多大 只能嵌套行内标签 i u s b span
标签都具有的两个属性
- ID值：标签的身份证号，同个html不能重复
- class值：一个标签可以继承多个class值
特殊符号
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
上单秘籍©
列表标签
无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
有序列表
ol>li*3 emmt插件
<ol type='1'>
<li>qq</li>
<li>wechat</li>
<li>loge</li>
</ol>
type 1 I start
标题列表
<body>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
去除小圆点 style="list-style: none;"
表格标签
<table>
<thead></thead> 表头
<tbody></tbody> 表单
</table>
<table border="1"> 加框
<thead>
<tr> 一个tr是一行 <th>username 加粗</th>
<td>username 正常</td>
<th>password</th> </tr>
</thead>
<tbody>
<tr>
<td>112</td>
<td>962</td>
<td>146</td>
</tr>
<tr>
<td>11285</td>
<td>96225</td>
<td>14346</td>
</tr>
</tbody>
</table>
table border="1" 加框
cellpadding="5" cellapacing="5" 距离外边框距离
td rowspan="2" 竖占两行
colspan="2" 横占两行
table:表格
tr:行
td:单元格
th:特殊单元格：表头效果：加粗，居中
默认情况下表格是没有边框的，通过属性来增加表框：
border:设置边框大小
cellspacing：设置单元格和边框之间的空隙
align="center" 设置居中
background 设置背景图片 background="img/ss.jpg"
bgcolor :设置背景颜色
rowspan:行合并
colspan：列合并
控件的常用属性
form表单标签
获取前端用户数据（用户输入 选择 上传的） 基于网络发送到后端的数据
在form内部书写的获取用户的数据都会被form标签提交到后端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<!--表单元素-->
<!--文本框:
input标签使用很广泛，通过type属性的不同值，来表现不同的形态。
type="text" 文本框，里面文字可见
表单元素必须有一个属性：name 有了name才可以提交数据,才可以采集数据
然后提交的时候会以键值对的形式拼到一起。
value:就是文本框中的具体内容
键值对：name=value的形式
如果value提前写好，那么默认效果就是value中内容。
一般默认提示语：用placeholder属性，不会用value--》value只是文本框中的值。
readonly只读：只是不能修改，但是其他操作都可以，可以正常提交
disabled禁用：完全不用，不能正常提交
写法：
readonly="readonly"
readonly
readonly = "true"
-->
<input type="text" name="uname" placeholder="请录入身份证信息"/>
<input type="text" name="uname2" value="123123" readonly="true"/>
<input type="text" name="uname3" value="456456" disabled="disabled"/>
<!--密码框:效果录入信息不可见-->
<input type="password" name="pwd" />
<!--单选按钮：
注意：一组单选按钮，必须通过name属性来控制，让它们在一个分组中，然后在一个分组里只能选择一个
正常状态下，提交数据为：gender=on ，后台不能区分你提交的数据
不同的选项的value值要控制为不同，这样后台接收就可以区分了
默认选中：checked="checked"
-->
性别：
<input type="radio" name="gender" value="1" checked="checked"/>男
<input type="radio" name="gender" value="0"/>女
<!--多选按钮:
必须通过name属性来控制，让它们在一个分组中，然后在一个分组里可以选择多个
不同的选项的value值要控制为不同，这样后台接收就可以区分了
多个选项提交的时候，键值对用&符号进行拼接：例如下：
favlan=1&favlan=3
-->
你喜欢的语言：
<input type="checkbox" name="favlan" value="1" checked="checked"/>java
<input type="checkbox" name="favlan" value="2" checked="checked"/>python
<input type="checkbox" name="favlan" value="3"/>php
<input type="checkbox" name="favlan" value="4"/>c#
<!--文件-->
<input type="file" />
<!--隐藏域-->
<input type="hidden" name="uname6" value="123123" />
<!--普通按钮：普通按钮没有什么效果，就是可以点击，以后学了js，可以加入事件-->
<input type="button" value="普通按钮" />
<!--特殊按钮：重置按钮将页面恢复到初始状态-->
<input type="reset" />
<!--特殊按钮：图片按钮-->
<img src="img/java核心技术.jpg" />
<input type="image" src="img/java核心技术.jpg" />
<!--下拉列表
默认选中：selected="selected"
多选：multiple="multiple"
-->
你喜欢的城市：
<select name="city" multiple="multiple">
<option value="0">---请选择---</option>
<option value="1">哈尔滨市</option>
<option value="2" selected="selected">青岛市</option>
<option value="3">郑州市</option>
<option value="4">西安市</option>
<option value="5">天津市</option>
</select>
<!--多行文本框
利用css样式来控制大小不可变：style="resize: none;"
-->
自我介绍：
<textarea style="resize: none;" rows="10" cols="30">请在这里填写信息。。</textarea>
<br />
<!--label标签
一般会在想要获得焦点的标签上加入一个id属性，然后label中的for属性跟id配合使用。
-->
<label for="uname">用户名：</label><input type="text" name="uername" id="uname"/>
<!--特殊按钮：提交按钮：具备提交功能-->
<input type="submit" />
</form>
</body>
</html>
input的type属性
input标签 就类似于前端的变形金刚
通过type属性变形
- text:普通文本
- password:密文
- date:日期
- submit:用来触发form表单提交数据的动作
- button:本身没有任何的功能，学完js之后可以给它自定义各种功能
- reset:重置内容
- radio:单选#
- checkbox：多选
- file：文件
<p>hobby:
<input type="checkbox" checked>read <input type="checkbox">DBJ
<input type="checkbox">IIIS <input type="checkbox">TV checked默认选择
</p>
<p>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
能够触发form表单提交数据的按钮有哪些(一定要记住)
1、
2、
select
mutiple参数变多选 默认选中selected
<p>province:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">内蒙</option>
</select>
</p>
textarea获取大段文本
<textarea name="" id="" cols="30" rows="10"></textarea>
浙公网安备 33010602011771号