HTML学习汇总

时间 2020-07-03

标签 html 学习汇总栏目 HTML 繁體版

原文原文链接

HTML学习大汇总

(1)HTML概述

Html（超文本标记语言）：用文字来描述的标签语言，用文字来描述网页的一种语言。javascript
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超连接，标记指的是标签，是一种用来制做网页的语言，这种语言由一个个的标签组成，用这种语言制做的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，能够用文本的方式编辑它，若是用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页能够从一个网页连接跳转到另一个网页。css
HTML 是用来描述网页的一种语言。html
1. HTML 指的是超文本标记语言 (Hyper Text Markup Language)
2. HTML 不是一种编程语言，而是一种标记语言 (markup language)
3. 标记语言是一套标记标签 (markup tag)
4. HTML 使用标记标签来描述网页

HTML 标签前端

HTML 标记标签一般被称为 HTML 标签 (HTML tag)。
1. HTML 标签是由*尖括号*包围的关键词，好比 <html>
2. HTML 标签一般是*成对出现*的，好比 <b> 和 </b>
3. 标签对中的第一个标签是*开始标签*，第二个标签是*结束标签*
4. 开始和结束标签也被称为*开放标签*和*闭合标签*

Html的骨架java

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>


第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的总体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它通常做为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。
    
Html有两种标签，一个是双标签，一个是单标签。双标签例如：<html></html>,单标签例如：<br/>,单标签不多，基本上能够数过来。

HTML 文档 = 网页编程
1. HTML 文档描述网页
2. HTML 文档包含 HTML 标签和纯文本
3. HTML 文档也被称为网页
Web 浏览器的做用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：浏览器
```
<html>
	<body>
		<h1>个人第一个标题</h1>
		<p>个人第一个段落。</p>	
	</body>
</html>
```
例子解释编程语言
```
- <html></html> 之间的文本描述网页
- <body> </body> 之间的文本是可见的页面内容
- <h1></h1>之间的文本被显示为标题
- <p></p>之间的文本被显示为段落
```
Html的标签关系：编辑器

1.嵌套关系（父子）布局
```
<head>
<title>标题</title>
</head>
```
2.并列关系（兄弟）
```
<head></head>
<body></body>
```
先定义合适的html结构，在定义css样式。

(2)HTML的各种标签详解

html标题标签

经过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签能够在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，好比说： <h1>用做主标题，其后是 <h2>，再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，因此网页上使用标题是很重要的。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

html段落标签、换行标签与字符实体

1.html段落标签

<p>标签订义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码以下：</p>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
    文本指的是超连接，标记指的是标签，是一种用来制做网页的语言，这种语言由一个个的
    标签组成，用这种语言制做的文件保存的是一个文本文件，文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，能够用文本的方
    式编辑它，若是用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
    页能够从一个网页连接跳转到另一个网页。</p>
</body>
</html>

2.html换行标签

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，若是真想换行，能够在代码的段落中插入<br />来强制换行，代码以下：
<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，能够用<br />
文本的方式编辑它，若是用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页能够从一个网页连接跳转到另一个网页。
</p>

3.html字符实体

代码中成段的文字，若是文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，若是想显示多个空格，可使用空格的字符实体,代码以下：

<!--  在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp;   -->
<p>
&nbsp;&nbsp;一个html文件就是一个网页，html文件用编辑器打开显示的是文本，能够用<br />
文本的方式编辑它，若是用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页能够从一个网页连接跳转到另一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可使用它们的字符实体，好比：

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

html块标签、含样式的标签

1.html块标签

1）<div> 标签 块元素，表示一块内容，没有具体的语义。

2）<span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义。

2.含样式和语义的标签

1）<em> 标签 行内元素，表示语气中的强调词，表示斜体方式显示的意思

2）<i> 标签 行内元素，表示专业词汇，表示斜体方式显示的意思

3）<b> 标签 行内元素，表示文档中的关键字或者产品名，表示加粗方式意思

4）<strong> 标签 行内元素，表示很是重要的内容，表示加粗方式意思

5）<s></s> <del></del> 两个标签都是表示加删除线方式显示的意思

6）<u></u> <ins></ins> 两个标签都是表示加下划线方式显示的意思

3.语义化标签

语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。好比：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示连接，dl、dt、dd表示定义列表等，语义化的标签很少。

html图像标签、绝对路径和相对路径

1.html图像标签
```
<img>标签能够在网页上插入一张图片，它是独立使用的标签，它的经常使用属性有：
- src属性 定义图片的引用地址
- alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，因此此属性很是重要。
<img src="images/pic.jpg" alt="产品图片" />
```
2.绝对路径和相对路径

像网页上插入图片这种外部文件，须要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件自己去定位被引用的文件地址
绝对地址在总体文件迁移时会由于磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
- “ ./ ” 表示当前文件所在目录下，好比：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时能够省略。
- “ ../ ” 表示当前文件所在目录下的上一级目录，好比：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html连接标签

<a>标签能够在网页上定义一个连接地址，它的经常使用属性有：
- href属性 定义跳转的地址
- title属性 定义鼠标悬停时弹出的提示文字框
- target属性 定义连接窗口打开的位置
  - target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
  - target="_blank" 新页面会在新开的一个浏览器窗口打开
<a href="#"></a> <!--  # 表示连接到页面顶部   -->
<a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>
<a href="2.html" target="_blank">测试页面2</a>

html列表

1.有序列表

在网页上定义一个有编号的内容列表能够用<ol>、<li>配合使用来实现，代码以下：
<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在网页上生成的列表，每条项目上会按一、二、3编号，有序列表在实际开发中较少使用。

2.无序列表

在网页上定义一个无编号的内容列表能够用<ul>、<li>配合使用来实现，代码以下：
<ul>
    <li><a href="#">新闻标题一</a></li>
    <li><a href="#">新闻标题二</a></li>
    <li><a href="#">新闻标题三</a></li>
</ul>

在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不一样浏览器上显示效果不一样，因此通常会用样式去掉默认的小图标，若是须要图标，能够用样式自定义图标，从而达到在不一样浏览器上显示的效果相同,实际开发中通常用这种列表。

3.定义列表

定义列表一般用于术语的定义。<dl>标签表示列表的总体。<dt>标签订义术语的题目。<dd>标签是术语的解释。一个<dl>中能够有多个题目和解释，代码以下：
<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>
    <dt>css</dt>
    <dd>负责页面的表现</dd>
    <dt>javascript</dt>
    <dd>负责页面的行为</dd>
</dl>

html表单

表单用于搜集不一样类型的用户输入，表单由不一样类型的标签组成，相关标签及属性用法以下：

一、<form>标签 定义总体的表单区域

- action属性 定义表单数据提交地址
- method属性 定义表单提交的方式，通常有“get”方式和“post”方式

二、<label>标签 为表单元素定义文字标注

三、<input>标签 定义通用的表单元素

- type属性
  - type="text" 定义单行文本输入框
  - type="password" 定义密码输入框
  - type="radio" 定义单选框
  - type="checkbox" 定义复选框
  - type="file" 定义上传文件
  - type="submit" 定义提交按钮
  - type="reset" 定义重置按钮
  - type="button" 定义一个普通按钮
  - type="image" 定义图片做为提交按钮，用src属性定义图片地址
  - type="hidden" 定义一个隐藏的表单域，用来存储值
- value属性 定义表单元素的值
- name属性 定义表单元素的名称，此名称是提交数据时的键名

四、<textarea>标签 定义多行文本输入框

五、<select>标签 定义下拉表单元素

六、<option>标签 与<select>标签配合，定义下拉表单元素中的选项

**注册表单实例：**
<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>我的描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input类型为submit定义提交按钮  
     还能够用图片控件代替submit按钮提交，通常会致使提交两次，不建议使用。如：
     <input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>

html表格

一、<table>标签：声明一个表格，它的经常使用属性以下：

- border属性 定义表格的边框，设置值是数值
- cellpadding属性 定义单元格内容与边框的距离，设置值是数值
- cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
- align属性 设置总体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right

二、<tr>标签：定义表格中的一行

三、<td>和<th>标签：定义一行中的一个单元格，td表明普通单元格，th表示表头单元格，它们的经常使用属性以下：

- align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
- valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
- colspan 设置单元格水平合并，设置值是数值
- rowspan 设置单元格垂直合并，设置值是数值

页面布局概述

布局也能够叫作排版，它指的是把文字和图片等元素按照咱们的意愿有机地排列在页面上，布局的方式分为两种：

一、table布局：经过table元素将页面空间划分红若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。

二、HTML+CSS布局(DIV+CSS)：主要经过CSS样式设置来布局文字或图片等元素，须要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。
table布局及实例

table来作总体页面的布局，布局的技巧概括为以下几点：

一、按照设计图的尺寸设置表格的宽高以及单元格的宽高。

二、将表格border、cellpadding、cellspacing所有设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的做用。

三、针对局部复杂的布局，能够在单元格里面再嵌套表格，嵌套表格划分局部的空间。

四、单元格中的元素或者嵌套的表格用align和valign设置对齐方式

五、经过属性或者css样式设置单元格中元素的样式

(3)大总结(重点)

1.<h1></h1>标题标签

2.<p></p>段落标签

3.<hr />水平线标签（单标签）

4.<br/>break打断、换行的简称。换行标签（单标签）

5.Div 、span是没有语义的，是咱们网页布局主要的2个盒子 css+div   Div就是division的缩写 分割、分区的意思 其实有不少div来组合网页。

6.Span跨度，跨距，范围 语法格式：<div>这是头部</div> <span>今日价格</span>

7.文本格式化标签：

<b></b> <strong></strong>显示的两个标签都是表示加粗方式意思

<i></i> <em></em>两个标签都是表示斜体方式显示的意思

<s></s> <del></del> 两个标签都是表示加删除线方式显示的意思

<u></u> <ins></ins> 两个标签都是表示加下划线方式显示的意思

这些文本格式化标签后面的标签的语义更好，能够推荐使用后面的语义，这样也比较方便。前面的标签语义比较差。

8.图像标签（单标签）

基本图片的插入方式：<img src="images/pic.jpg" alt="产品图片" />

图片的经常使用属性：alt  title

8.连接标签：

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

若是跳转目标没有写好，咱们能够用#先代替。

target：表示目标窗口打开的方式 blank表示在新的窗口打开，默认是在本来的窗口打开。

锚点定位：

<a herf="#live">我的生活</a>

<h3 id =”live">我的生活</h3>

9.base标签：<base target="_blank"/>

<base target="_self"/>

10.特殊字符：

11.注释标签：<!--这里面是注释-->

12.列表标签：

无序列表的使用：
<ul>
	<li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
	……..
</ul>

无序列表注意事项：无序列表在使用的时候，没有前后的顺序，排列的方式可能不同，可是结果是同样的，内容是同样多的。

13.有序列表的使用：
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    ……..
</ol>

13.自定义列表的使用：<dd>标签是解释说明<dt>标签的
<dl>
	<dt></dt>
	<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>

14.表格标签
<table width=”500” border=”1” align=”center”>
	<tr align="center">
   	<td>姓名</td>
   	<td>性别</td>
   	<td>电话 </td>
   </tr>
   <tr>
   	<td>小王 </td>
   	<td>女 </td>
   	<td>110 </td>
   </tr>
   <tr>
   	<td>小明 </td>
   	<td>男 </td>
   	<td>120 </td>
   </tr>
</table>

表格属性：通常状况下，三个参数 border cellpadding cellspacing 为0，cellpadding，cellspacing这两个属性能够是表格中的行与行的边距以及行与内容的边距的值为0，实际上表格更加的美观。

合并单元格：

跨行合并：rowspan 跨列合并：colspan//不管是跨行合并仍是跨列合并，跨的行数和列数都是用数字来表示的，可是在合并的以后，会使得表格的某一行或者某一列出现溢出的状况，这样的话，咱们就必须把多余的溢出的行和列给删除掉。

合并的通常规则以下：

1.先确认是跨行仍是跨列

2.先上后下，先左后右的规则