HTML

TenSoFlow...大约 9 分钟

HTML

博客写作规则之[ ]

用[ ]括起来的内容表示可以自定义

第01章 HTML

HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。其不是一种编程语言，而是一种标记语言(Markup Language)。标记语言是一套标记标签(Markup tag)。超文本是因为其可以加入图片、声音、动画等内容超越了文本的限制，另外还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)。

第02章浏览器

浏览器是网页显示、运行的平台。相当于将HTML文件解析成页面。不同的浏览器有着不同的内核，所以不同的浏览器解析同一份HTML文件也不尽相同。常用的五大浏览器IE、火狐(Firefox)、谷歌(Chrome)、Safari(苹果)和Opera。

浏览器内核表

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
Firefox	Gecko	火狐浏览器
Safari	WebKit	苹果浏览器
Chrome/Opera	Blink	Chrome/Opera浏览器内核Blink其实是WebKit的分支

目前国内浏览器一般都会采用WebKit/Blink内核，如360、UC、QQ、搜狗等

第03章 Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。制定标准是为了让不同的浏览器显示同一份网页时的排版一样。Web标准主要包括结构(Structure)、表现(Presentation)、行为(Behavior)。结构由HTML控制、表现由CSS控制、行为由JavaScript控制。

第04章网页

网页是网站中的一页，通常是HTML格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成。网页以.HTML后缀结尾，俗称HTML文件。

第05章 HTML骨架

<!DOCTYPE html> 
<html lang='zh-CN'> 
<html>

	<head>
		<meta charset="UTF-8"> 
		<title></title>
	</head>
	
	<body>
	
	</body>
</html>

HTML骨架说明

标签	说明	扩展
`<!DOCTYPE html>`	DOCTYPE文档类型声明标签 html表示是HTML5版本
`<html lang='zh-CN'>`	属性lang表示语言其值是zh-CN时表示是一个中文网页，是en时表示是一个英文网页	fr表示法文等等，更多语言请自行百度😄
`<meta charset="UTF-8">`	属性charset来规定HTML文档使用的字符编码	常用值有GB2312(简体中文)、BIG5(繁体中文)、GBK(简体中文+繁体中文)、UTF-8其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

名词解释属性

HTML 标签属性是用于在 HTML 元素中提供附加信息的特性。属性通常在标签的开头部分即开始标签中定义，由键值对组成。属性的作用是修改或定义标签的行为和显示方式即值不同标签的行为或者显示方式不同。

第06章目录&路径

目录文件夹

就是普通文件夹，里面存放了我们做页面所需要的相关素材比如html文件，图片等。

根目录

相对路径

相对路径介绍

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如 `<img src="baidu.gif"/>`
下一级路径	/	图像文件位于HTML文件下一级如 `<img src="images/baidu.gif"`/>
上一级路径	../	图像文件位于HTML文件上一级如 `<img src="../baidu.gif"`/>
上两级路径	../../	图像文件位于HTML文件上两级如 `<img src="../../baidu.gif"`/>

绝对路径

指目录下的绝对位置，通常从盘符开始的路径或完整的网络地址

第07章标签

标题标签

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

注意

标题标签独占一行

段落标签

<p>我是一个段落标签</p>

换行标签

<br/>

文本格式化标签

文本格式化标签介绍

语义	标签	说明
加粗	`<strong>粗体</strong>或者<b>粗体</b>`	推荐使用`<strong>`标签加粗
倾斜	`<em>倾斜</em>或者<i>倾斜</i>`	推荐使用`<em>`标签加粗
删除线	`<del>删除线</del>或者<s>删除线</s>`	推荐使用`<del>`标签加粗
下划线	`<ins>下划线</ins>或者<u>下划线</u>`	推荐使用`<ins>`标签加粗

Div标签和Span标签

注意

div独占一行

<div>我是一个div标签一个人单独占一行</div>

注意

span一行可以放多个

<span>百度</span>
<span>搜狐</span>
<span>新浪</span>

图像标签

<img  src="图片的相对/绝对路径"
      alt="图像的替代文字" 
      title="鼠标悬停提示文字"
      width="图像宽度"
      height="图像高度"
      border="图像边框粗细">

图像标签属性介绍

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时替换的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

小贴士

其中src是必须的属性，宽度和高度最好只设置一个，浏览器会自动根据其中一个属性调节另外一个属性，所以长度和宽度只设置一个就好。图片的相对路径和绝对路径详情请见<<目录&路径>>章节

超链接标签

作用是从一个页面链接跳到另一个页面，文本、图像、音频、视频等都可以添加超链接。

<a href=""></a>

超链接标签属性介绍

属性	作用
href	用于指定链接目标的URL地址，是必须属性。
target	用于指定链接页面的打开方式，其中`_self`为在当前窗口打开是默认值，`_blank`为在新窗口中打开。

外部链接

外部指跳到别人网站的某个网页

<a href="https://www.baidu.com" target="_blank">百度</a>

内部链接

内部指跳到自己网站的另一个网页

<a href="test.html" target="_blank">测试网页</a>

空链接

如果还没有确定链接目标href填#

<a href="#">首页</a>

下载链接

地址链接的是 [FileName].exe 或者zip等压缩包形式

<a href="数据库还原.zip">下载数据库还原文件</a>

锚点链接

锚点链接用于快速定位到某个地方，href里面填#[IdName]就可以快速跳到id为IdName的地方

<a href="#two">第二集</a>
<h2 id="two">第二集</h2>

注释标签

<!-- 我是注释内容，不显示在页面上。 -->

特殊字符

在HTML中一些特殊的符号很难或者不方便直接使用。如<>表示标签而想单独的表示<就很难，因为HTML会把<当作标签的开始。我们可以使用下面的字符来替代某些符号。

特殊字符	描述	字符的代码
空格符	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

表格标签

<table align="center">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
    <tbody>
        <!-- 第一行 -->
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
    </tbody>
</table>

表格标签介绍

标签	说明
`<table></table>`	定义表格的标签
`<tr></tr>`	定义表格中的行，必须在表格标签之中
`<td></td>`	定于表格中的单元格，必须在行标签之中
`<th></th>`	定义表格中的表头，会加粗显示并居中
`<thead></thead>`	表格的头部
`<tbody></tbody>`	表格的身体

表格属性介绍

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式。
border	1 或 ""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认为1像素。
cellspacing	像素值	规定单元格之间的空白，默认为2像素。
width	像素值或百分比	规定表格的宽度。

小贴士

这些属性都要写在table标签中的开始标签上，如<table align="center">让表格在中间显示。

合并单元格

<table align="center" border="1px" width="300" height="300">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

合并单元格属性介绍

注意

colspan和rowspan写在tr标签中

属性	属性值	说明
`colspan`	正整数	合并列
`rowspan`	正整数	合并行

无序列表

<ul>
    <li>热狗</li>
    <li>汉堡</li>
    <li>苹果</li>
    <li>香蕉</li>
    <li>柚子</li>
</ul>

注意

ul标签中只能写li标签，li标签里面可以放所有标签。

有序列表

<ol>
    <li>热狗</li>
    <li>汉堡</li>
    <li>苹果</li>
    <li>香蕉</li>
    <li>柚子</li>
</ol>

注意

ol标签中只能写li标签，li标签里面可以放所有标签。

自定义列表

<dl>
    <!-- 对下方的事项进行的解释 -->
    <dt>食物</dt>
    <dd>汉堡</dd>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>柚子</dd>
</dl>

注意

dl标签中只能写dt标签和dd标签，dt和dd个数没有限制，经常是一个dt对应多个dd。

表单

昵称

邮箱

网址

按正序
按倒序
按热度

特殊字符	描述	字符的代码
空格符	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

特殊字符	描述	字符的代码
空格符	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

HTML

# HTML

# 第01章 HTML

# 第02章 浏览器

浏览器内核表

# 第03章 Web标准

# 第04章 网页

# 第05章 HTML骨架

HTML骨架说明

# 第06章 目录&路径

# 目录文件夹

# 根目录

# 相对路径

相对路径介绍

# 绝对路径

# 第07章 标签

# 标题标签

# 段落标签

# 换行标签

# 文本格式化标签

文本格式化标签介绍

# Div标签和Span标签

# 图像标签

图像标签属性介绍

# 超链接标签

超链接标签属性介绍

# 注释标签

# 特殊字符

# 表格标签

表格标签介绍

表格属性介绍

合并单元格

合并单元格属性介绍

# 无序列表

# 有序列表

# 自定义列表

# 表单

预览:

HTML

第01章 HTML

第02章浏览器

第03章 Web标准

第04章网页

第05章 HTML骨架

第06章目录&路径

目录文件夹

根目录

相对路径

绝对路径

第07章标签

标题标签

段落标签

换行标签

文本格式化标签

Div标签和Span标签

图像标签

超链接标签

注释标签

特殊字符

表格标签

无序列表

有序列表

自定义列表

表单

特殊字符	描述	字符的代码
空格符	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`