HTML入门知识点总结-CFANZ编程社区

本文目录

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>密&nbsp;码：<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>