本文目录
- 1.HTML初识
- 2.HTML标签分类
- 3.字符集
- 4.HTML标签的语义化
- 5.base标签
- 6.表格与表单
- 7.表单提交的两种方式
- 8.锚点定位
1.HTML初识
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。HTML 不是一种编程语言，而是一种标记语言 (markup language)。
2.HTML标签分类
按闭合特征分类：
1.双标签：<标签名> 内容 </标签名>
2.单标签：比如 <br /> <hr /> <img /> <base /> <input /> <link />
按是否换行特征分类
1.块级标签
| 标签 | 描述 |
|---|---|
| div | 常用块级容器，也是css和layout的主要标签 |
| h1-h6 | 一-六级标题 |
| hr | 水平分隔线 |
| menu | 菜单列表 |
| ol、ul、li | 有序列表、无序列表、列表项 |
| dl、dt、dd | 定义列表、定义术语、定义描述 |
| table | 表格 |
| p | 段落 |
| form | 交互表单 |
块级元素的特点：
- 每个块级元素独占一行，每个块级元素都会从新的一行开始，从上到下排列。
- 块级元素可以直接控制宽度、高度以及盒子模型的相关css属性。
- 在不设置宽度的情况下，块级元素的宽度是他父级元素内容的宽度。
- 在不设置高度的情况下，块级元素的高度是他本身内容的高度。
2.行内标签（内联标签）
| 标签 | 描述 |
|---|---|
| a | 锚点 |
| b | 加粗 |
| span | 常用的内联容器，定义文本内区块 |
| img | 引入图片 |
| input | 输入框 |
| select | 下拉列表 |
| strong | 加粗强调 |
| label | Input元素定义标注（标记） |
内联元素的特点：
- 内联元素会和其他元素从左到右显示在一行。
- 内联元素不能直接控制宽度、高度以及盒子模型的相关css属性，但是可以设置内外边距的水平方向的值。也就是说对于内联元素的margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的，但是竖直方向的margin和padding无效果。
- 内联元素的宽高是由内容本身的大小决定的（文字、图片等）。
- 内联元素只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）。
3.行内块标签
常见的：<img>、<input>、<td>
行内块状元素的特点：
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右
3.字符集
<meta charset="UTF-8" />
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
gb2312 简单中文 包括6763个汉字
BIG5 繁体中文 港澳台等用
GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符
注意一点就行：
以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。
4.HTML标签的语义化
为什么要有语义化标签
- 方便代码的阅读和维护
- 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
- 使用语义化标签会具有更好地搜索引擎优化
核心：合适的地方给一个最为合理的标签。
语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
怎么判断一个网页的标签结构够不够语义化？，就是一眼看去，就知道哪个是重点，结构是什么，知道每块的内容是干啥的。
遵循的原则：先确定语义的HTML ，再选合适的CSS
5.base标签
base 规定页面上所有链接的默认 URL 和默认目标：
base 写到 <head> </head> 之间
把所有的连接 都默认添加↓
base标签有href属性和target属性
在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部。
所有的主流浏览器都支持base标签
target="_blank"--->让所有的链接都在新窗口打开。
target="_self" ----->在原窗口打开。
提示：请把 <base> 标签排在 <head> 元素中第一个元素的位置，这样 head 区域中其他元素就可以使用 <base> 元素中的信息了。
比如当页面中设置了以下的base标签
<base href="https://www.csdn.net/">
那么页面中出现下面的这个href属性值为空的a标签<a href="">CSDN</a>，页面也会跳转到csdn，而如果出现的是<a href="/nav/python">CSDN</a>，则页面会跳转到csdn的python模块。
6.表格与表单
表格结构
- 在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不再赘述），具体 如下所示：
- <thead></thead>：用于定义表格的头部。
必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。 - <tbody></tbody>：用于定义表格的主体。
位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
表格标题
caption 元素定义表格标题。
<table>
<caption>我是表格标题</caption>
</table>
caption 标签必须紧随 table 标签之后，且只存在表格里面。
合并单元格
跨行合并：rowspan 跨列合并：colspan
合并单元格的三步：
- 先确定是跨行还是跨列合并
- 根据 先上 后下 先左 后右的原则找到目标单元格
- 删除单元格 删除的个数 = 合并的个数 - 1
表单标签
input 控件
label标签
用于绑定一个元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
如何绑定元素呢？
for 属性规定 label 与哪个表单元素绑定。for=>id
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意：
- <select></select>中至少应包含一对<option></option>。
- 在option 中定义selected =" selected "时，当前项即为默认选中项。
表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
<p><label>用户名：<input type="text" /></label></p>
<p>
<label>密 码：<input type="password" /></label>
</p>
<p><input type="submit" value="提交数据" /></p>
<p><input type="reset" value="重置数据" /></p>
</form>
常用属性：
- Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。 - method
用于设置表单数据的提交方式，其取值为get(域名上有显示）或post（匿名提交）。 - name
用于指定表单的名称，以区分同一个页面中的多个表单。
注意： 每个表单都应该有自己表单域。
7.表单提交的两种方式
通常情况在发起表单请求的时候我们前端都会先进性验证，可以的话才会正式向后端发起请求。
第一种方式：普通按钮绑定点击事件
<form action="deal.action" method="post" id="form1" >
用 户 名:<input type="text" name="username" id="username">
密 码:<input type="password" name="password" id="password">
确认密码:<input type="password" name="pwd" id="pwd">
<input type="button" onclick="check()" value="提交">
</form>
点击事件check()
function check() {
var password = document.getElementById("password").value;
var pwd = document.getElementById("pwd").value;
if (password == pwd) {
alert("验证正确");
document.getElementById('form1').submit(); //验证成功进行表单提交
} else {
alert("验证错误，请重新输入");
}
}
第二种方式：利用form表单的onsubmit方法进行调用，当进行表单提交时，会先执行onsubmit( )方法，然后再根据返回的false进行处理，注意这里在返回false的情况下不会进行提交。
<form action="deal.action" method="post" id="form1" onsubmit="return check2();">
用 户 名:<input type="text" name="username" id="username">
密 码:<input type="password" name="password" id="password">
确认密码:<input type="password" name="pwd" id="pwd">
<input type="submit" value="提交">
</form>
函数代码check2：
function check2() {
var password = document.getElementById("password").value;
var pwd = document.getElementById("pwd").value;
if (password == pwd) {
alert("验证正确");
return true;
} else {
alert("验证错误，请重新输入");
return false;
}
}
8.锚点定位
1，使用id定位，这样的定位可以针对任何标签来定位，比如以下代码：
<a href="#1F" >锚点1</a>
......
<div id="1F"> <p> 11111111111 </p> </div>
2，使用name定位，使用name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用，比如以下代码。
<a href="#5F">锚点5</a>
.......
<a name="5F">1111111</a>
3，使用js定位，比如以下代码
<li onclick="javascript:document.getElementById('here').scrollIntoView()"></li>
.......
<div id="here"> <p> 11111111111 </p> </div>
