HTML学习笔记

1.浏览器内核

2.网页中web标准三层组成

结构（structure）：用于对网页元素进行整理和分类（html）
表现（presentation）：用于设置网页元素的版式，颜色，大小等外观样式（css）
行为（behavior）：网页模型的定义及交互的编写（javascript）

3.html超文本标记语言（Hyper text markup language）

用来描述网页，不是编程语言，是标记语言，标记语言是一套标记标签（markup tag）。

4.html作用

网页是由网页组成的，这些元素是利用html标签描述出来，然后通过浏览器解析，就可以现实给用户了。

5.超文本

超文本即超越文本限制，可以有图片链接音频等。不仅如此，它还能从一个文件跳转到另一个文件，于世界各地主机的文件连接（超级链接文本）。

6.html骨架标签

html标签、头部标签、网页标题标签、主体标签

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

7.html元素标签分类

常规标签（双标签（开始标签，结束标签））

<body>
  内容
</body>

空元素（单标签）

<br />

8.html标签关系

嵌套关系（包含关系、父子集关系）

<head>
    <title></title>
</head>

并列关系（兄弟姐妹关系）

<head></head>
<body></body>

9.开发工具

sublime text生成html骨架结构快捷键：输入！或者html:5然后按tab键。

10.html模版

<!DOCTYPE html> 版本号
<html lang="en"> 语言
<meta charset="UTF-8"> 字符集
常用字符集：
gb231 简单中文，包括6763个汉字
BIG5 繁体中文，港澳台等用
GBK 包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8 基本包含全世界所有国家要用到的字符。（注意格式，大写和连字符）

11.html标签的语义化

所谓标签语义化，就是指标签的含义
标签语义化目的：根据标签的语义，在合适的地方给一个最为合理的标签，让结构更加清晰。
优点：
方便带吗的阅读和维护。
让浏览器或者网络爬虫可以更好地解析，从而更好分析其中的内容。
使用语义化标签会具有更好的搜索引擎化。

12.html常用标签

1.排版标签：网页布局中最常用的标签，显示网页结构的标签，主要和css搭配使用

1）标题标签 h （共有6级）

<h1> 一级标题文本 </h1>
<h2> 二级标题文本 </h2>
<h3> 三级标题文本 </h3>
<h4> 四级标题文本 </h4>
<h5> 五级标题文本 </h5>
<h6> 六级标题文本 </h6>

2）段落标签 p

<p> 第一段文本 </p>
<p> 第二段文本 </p>
<p> 第三段文本 </p>

3）水平线标签 hr （是单标签）

<hr />

4）换行标签 br（单标签）

<br />

5）div和span标签
没有语义，就是个盒子用来装元素的
特点：一行一个div，多个span在一行。

<div> 内容 </div>
<span> 内容 </span>

2.文本格式化标签：对文字设置粗体，斜体，下划线等

1）粗体
和 : b只是加粗，strong除了加粗还有强调的意思，语义更强烈。
2）斜体
和：后面语义更强烈
3）删除线
<s></s>和<del></del>：后面语义更强烈
4）下划线
和<ins></ins>：后面语义更强烈
补充： 标签属性

<标签名 属性1="属性一" 属性2="属性二" ...> 内容 </标签名>

3.图像标签

<img scr="图像url" />

图像标签的标签属性：

注：如果要使图片等比例缩放，width和height改一个即可，另一个会等比变化。

4.链接标签：a，anchor的缩写

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

注意
1）外部链接：需要添加例如 http:// www.baidu.com
2）内部链接：直接链接内部页面名称即可，如<a href="index.html">
3）空链接：如果当前没有确定链接目标，通常将链接目标设置为“#”，即href=“#”
4）不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接，如：

<a href=" http:// www.baidu.com" > <img src="timg.jpg" /> </a>

5)target标签属性：用于指定页面的打开方式，值为self或_blank，self为默认值，表示在当前页面打开（覆盖当前页面），_blank表示在新的页面打开。

5.注释标签

<!-- 注释内容 -->

6.路径

1）相对路径：以引用文件的网页的当前位置为参考基础而建立出来的文件路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称为相对路径。

2）绝对路径：文件的完整本地位置（不推荐），或文件的完整网络地址

13.锚点定位

通过创建锚点定位，用户能够快速定位到目标内容。
步骤：
1.用id名标注跳转目标的位置。（要跳转到的）

<h3 id="two"> 第二集 </h3>

2.创建链接文本。（被点击的）

<a href="#two" > </a>

14. base标签

设置整体链接打开方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base target="_blank">
</head>
<body>
    <a href="http://www.baidu.com"> 百度 </a>
    <a href="http://www.sohu.com"> 搜狐 </a>
    <a href="http://www.sina.com"> 新浪 </a>
    <a href="http://www.163.com"> 网易 </a>
</body>
</html>

15.预格式化文本
保留空格和换行符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <pre>
        白日依山尽，
        黄河入海流。
        欲穷千里目，
        更上一层楼。
    </pre>
</body>
</html>

16.特殊字符

17.表格table

1.标签：

表格标签<table></table>、行标签<tr></tr>、单元格标签<td></td>
基本语法

<table>
  <tr>
    <td> 单元格内的文字</td>
    ...
  </tr>
  ...
</table>

2.表格属性

<table border="1" width="500" height="300" align="center" cellspacing="0" cellpadding="10">
  <tr>
    <td> 姓名 </td>
    <td> 年龄 </td>
    <td> 性别 </td>
  </tr>
  <tr>
    <td> 张三 </td>
    <td> 17 </td>
    <td> 女 </td>
  </tr>
  <tr>
    <td> 里斯 </td>
    <td> 50 </td>
    <td> 女 </td>
  </tr>
  
</table>

3.表头单元格标签 th

表头单元格内文字居中加粗

<table border="1" width="500" height="300" align="center" cellspacing="0" cellpadding="10">
  <tr>
    <th> 姓名 </th>
    <th> 年龄 </th>
    <th> 性别 </th>
  </tr>
  <tr>
    <td> 张三 </td>
    <td> 17 </td>
    <td> 女 </td>
  </tr>
  <tr>
    <td> 里斯 </td>
    <td> 50 </td>
    <td> 女 </td>
  </tr>
  
</table>

4.表格标题 caption

<table border="1" width="500" height="300" align="center" cellspacing="0" cellpadding="10">
  <caption> 个人信息表 </caption>
  <tr>
    <th> 姓名 </th>
    <th> 年龄 </th>
    <th> 性别 </th>
  </tr>
  <tr>
    <td> 张三 </td>
    <td> 17 </td>
    <td> 女 </td>
  </tr>
  <tr>
    <td> 里斯 </td>
    <td> 50 </td>
    <td> 女 </td>
  </tr>
  
</table>

5.合并单元格

跨行合并：rowspan="合并单元格个数"
跨列合并：colspan="合并单元格个数"
合并单元格顺序：先上后下，先左后右。
合并单元格三部曲：
1）先确定是跨行还是跨列
2）根据先上后下，先左后右的顺序去找目标单元格，然后写上合并方式和要合并的单元格数量，比如：<td colspan="3"> </td>
3）删除多余的单元格

<table border="1" width="500" height="300" align="center" cellspacing="0" cellpadding="10">
  <caption> 个人信息表 </caption>
  <tr>
    <th> 姓名 </th>
    <th> 年龄 </th>
    <th rowspan="2"> 性别 </th>
  </tr>
  <tr>
    <td> 张三 </td>
    <td> 17 </td>
  </tr>
  <tr>
    <td> 里斯 </td>
    <td> 50 </td>
    <td> 女 </td>
  </tr>
  
</table>

6.注意

1）表格定义了html中定义表格数据的方法，（不能用来做页面布局）。
2）表格由行和行中的单元格组成（没有列），列的个数取决于每行中单元格的个数。
3）表格不要纠结于外观，那是css的作用。

7.表格划分结构

thead、tbody、tfoot

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table border="1" width="500" height="300" align="center" cellspacing="0" cellpadding="10">
  <caption> 个人信息表 </caption>
  <thead>
    <tr>
      <td> 姓名 </td>
      <td> 年龄 </td>
      <td> 性别 </td>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td> 张三 </td>
      <td> 17 </td>
      <td> 女 </td>
    </tr>
    <tr>
      <td> 里斯 </td>
      <td> 50 </td>
      <td> 女 </td>
    </tr> 
  </tbody>
  <tfoot>
    <tr>
      <td>信息地址</td>
      <td colspan="2">白塔堡</td>
    </tr>
  </tfoot>
  
</table>
</body>
</html>

18.列表标签

表格是用来显示数据的，列表就是用来布局的，因为非常整齐和自由。
列表概念：容器里面装载着结构、样式一致的文字或图表的一种形式，叫列表。
列表特点：列表的最大特点就是整齐、整洁、有序，跟表格类似，但是他可组合自由度会更高。

1.无序列表 ul（重点）

无序列表的各个列表项之间没有没有顺序级别之分，是并列的。其基本语法格式如下：
！！！ul标签里面只能有li，不能有其他任何标签。li只有在ul里才有意义。li里面可以放任何标签。

<ul>
  <li> 列表项1 </li>
  <li> 列表项2 </li>
  <li> 列表项3 </li>
</ul>

2.有序列表 ol

所有特性基本与ul一致，但是实际中比无序列表用得少很多。

<ol>
  <li> 列表项1 </li>
  <li> 列表项2 </li>
  <li> 列表项3 </li>
</ol>

3.自定义列表 dl

定义列表常用于对术语或名词进行解释和描述。定义列表的列表项前没有任何项目符号，其基本语法如下

<dl>
  <dt>沈阳</dt>
  <dd>和平区</dd>
  <dd>浑南区</dd>
  <dd>铁西区</dd>
  <dd>大东区</dd>
  <dt>北京</dt>
  <dd>昌平区</dd>
  <dd>海淀区</dd>
  <dd>大兴区</dd>
  <dd>东城区</dd>
</dl>

19.表单标签

作用：为了收集用户信息

在html中，一个完整的表单通常由表单控件（也称表单元素）、提示信息和表单域三个部分构成。

1.input标签

<input type="属性值" value="你好">

1）type属性：设置不同的属性值用来指定不同的控件类型。
除了type属性还有别的属性。

2）value属性：为默认的文本值（input框里的提示文字）。
3）name属性：name是表单控件的名称，后台可以通过name这个属性找到对应的表单。一组radio或一组checkbox的name是相同的。

<body>
  性别：
    男 <input type="radio" name="sex" />
    男 <input type="radio" name="sex" />
  爱好：
    爬山 <input type="checkbox" name="hobby" />
    睡觉 <input type="checkbox" name="hobby" />
    足球 <input type="checkbox" name="hobby" />
</body>

4）checked属性
定义选择空间默认被选中的项

<body>
  性别：
    男 <input type="radio" name="sex" />
    女 <input type="radio" name="sex" checked="checked"/>
  爱好：
    爬山 <input type="checkbox" name="hobby" checked="checked"/>
    睡觉 <input type="checkbox" name="hobby" />
    足球 <input type="checkbox" name="hobby" />
</body>

5）button普通按钮

<input type="button" value="获取短信验证码" />

6）submit提交按钮

<input type="submit" />

7）reset重置按钮

<input type="reset" />

8）图片提交按钮
必须包含src属性

<input type="image" src="路径" value="重置所填"/>

9）文件域
用来上传文件

<input type="file" />

2.lable标签

概念：lable标签为input元素定义标注
作用：用于绑定一个表单元素，当点击lable标签的时候，被绑定的表单元素就会获得输入焦点。
如何绑定？
1）第一种方法就是用lable直接包裹input表单。适合单个表单选择。

<label> 用户名<input type="text" /> </label>

2）第二种用法用for属性和id规定lable与哪个表单元素绑定

<label for="sex"> 性别：</label>
<input type="text" name="sex" />

3.文本域 textarea

双标签
多行文本输入框
cols="每行中的字符数" rows="显示的行数"实际开发中不会用，直接用css设置。

<textarea cols="每行中的字符数" rows="显示的行数">
    文本内容
</textarea>

4. select下拉列表

实际开发中用得比较少（可用div和li代替），因为select在不同浏览器的显示可能不同，而且select样式局限比较丑。
select中至少包含一个option。
在option中定义select="selected"时，当前选项即为默认选中项。

  <select>
    <option>选项</option>
    <option>选项</option>
    <option>选项</option>
    ...
  </select>

20.form表单域

通过form表单域将收集到的信息传递给服务器。

<form action="url" method="提交方式" name="表单名称">
    <label> 用户名 <input type="text" name="username" /></label> <br />
    <label> 密码 <input type="text" name="pwd" /></label> <br />
    <input type="submit" />
    <input type="reset" />
  </form>