HTML基础知识

Title：《HTML基础知识》

Authot：Hugu

Sarted Date：August 11th. 2019.

Finished Date：August 12th. 2019.

一、HTML概念

1、什么是HTML

  HTML是用来描述网页的一种语言。

  • HTML(Hypertext Markup Language)，即超文本标记语言。
  • HTML不是一种编程语言，而是一种标记语言(markup language)。
  • 标记语言是一套标记标签(markup tag)。
  • HTML使用标记标签来描述网页，不需要编译，直接由浏览器执行。

2、HTML标签

  HTML标记标签通常被称为HTML标签(HTML tag)。

  • HTML标签是由尖括号(“<”"">")和关键词组成，如：<html>。
  • HTML标签通常是成对出现的，如：<b>和</b>。
  • HTML标签中也存在一些单标签，如：<br/>。
  • 标签对中的第一个标签是开始标签(开放标签)，第二个标签是结束标签(闭合标签)。

3、HTML文件

  HTML文件被用来描述网页。

  • HTML文件包含HTML标签和纯文本，是一个文本文件。
  • HTML文件也被称为网页。
  • HTML文件必须使用html或htm或xml为文件名后缀。

4、HTML特点

  HTML文件制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，其主要特点有：

  • 简易性：HTML版本升级采用超集方式，从而更加灵活方便。
  • 可扩展性：HTML采取子类元素的方式，为系统扩展带来保证。
  • 平台无关性：HTML可以使用在广泛的平台上。
  • 通用性：HTML是网络的通用语言，是一种简单、通用的全置标记语言。
  • HTML大小写不敏感。

二、HTML发展史

HTML发展史

三、HTML基础语法

1、HTML基本结构

  HTML的基本结构如下所示：

<!DOCTYPE html>								<!-- 文档类型声明 -->
<html>										<!-- html开始标签 -->
    <head>									<!-- head开始标签 -->
        <title>HTML基本结构</title>			  <!-- title -->
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
        <script type="text/javascript">		//<!-- js脚本 -->
			alert("Hello World!");
		</script>
        <script src="xxx.js">....</script>	<!-- 链接外部js脚本 -->
        
        <style type="text/css">				<!-- CSS样式 -->
			<!--
			body {font: 10pt "Arial"}
			h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
			h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
			p {font: 10pt/12pt "Arial"; color: black}
			-->
		</style>
		
        <link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css">								<!-- 链接外部CSS样式 -->
    </head>									<!-- head结束标签 -->
    <body>									<!-- body开始标签 -->
        This is my first homepage. 
		<b>This text is bold</b>
    </body>									<!-- body结束标签 -->
</html>										<!-- html结束标签 -->
  • <!DOCTYPE html>声明文档类型信息，若无则浏览器以默认格式进行编码。
  • <html>块是HTML文件的主体，其他的文件内容都包含在该块中。
  • <head>块一般写上引用的js脚本或css脚本或者直接填写js代码或css代码以及一些文档描述信息。
  • <title>标签设置文件显示的标题。
  • <meta>一般标识文档的描述信息。
  • <script>标识js脚本也可以引用外部js脚本。
  • <style>标识css脚本。
  • <link>一般标识css引用。
  • <body>是浏览器的正文信息。

总结：

  • 有始有终，小写规范
  • body分工，内容其中
  • 跨行注释，不要嵌套
  • 键值双引，空格分列

2、HTML标签

语法：<标签名></标签名> 或者 <标签名/>

eg:

  • <html>...</html>或 <br/>

注：

  • “<”和">"一起使用
  • 标签一般成对出现
  • 单标签：没有结束标签
  • 有的成对标签有时可以当单标签使用，形式与单标签一致

3、HTML元素

  从**<html>开始标签到</html>结束标签的所有代码，称为HTML元素**，同样其他标签内的代码也称为某某标签元素。

eg：

<b>This text is bold</b>
  • 此HTML元素以开始标签起始， 内容是：This text is bold，以结束标签中止。<b>标签的目的是定义一个需要被显示成粗体的HTML元素。

4、HTML属性

语法：<标签名 属性名1=“值1” 属性名2=“值1” ...> ... </标签名> 或

   <标签名 style="属性名1:值1;属性名2=值2;...">...</标签名>

5、HTML注释

语法：

注：

  • 注释内容在网页中不显示
  • 可以进行多行注释
  • CSS中的注释：/* … */
  • JavaScript中的注释：
    • 单行注释：//
    • 多行注释：/* … */

四、HTML常用标签

1、文档类型声明(特殊,不属于标签)

语法：<!DOCTYPE html>

注：

  • 指明文档的类型，否则浏览器会按自己的默认设置来对文档进行解析
  • <!DOCTYPE>声明必须放在HTML文件第一行
  • <!DOCTYPE>声明不是HTML标签

举例：

<!DOCTYPE html>
<html>
      
</html>

2、网页编码设置

语法：

  <meta http-equiv="Content" contect="text/html;charset=utf-8"/>

注：

  • <meta/>标签需要添加在<head></head>标签之间
  • 编码格式有：UTF-8、GB2312、GBK等编码

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>网页编码设置</title>
        <!-- 背景资讯 -->
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        
    </body>
</html>

3、文字和段落标签

3.1、标题标签

语法：<h?>...</h?>（从1到6，有六级选择）

属性：

  • align：设置水平对齐方式
    • left：左对齐
    • right：右对齐
    • center：居中对齐

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>标题标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 标题标签 -->
        <h1 align="center">一级标签</h1>
        <h2 align="left">二级标签</h2>
        <h3 align="right">三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>
    </body>
</html>

展示效果：

一级标签

二级标签

三级标签

四级标签

五级标签
六级标签

3.2、文字标签

3.2.1、斜体

语法：<i>...</i>、<em>...</em>

属性：

举例:

eg:

  • <!DOCTYPE html>
<html>
    <head>
        <title>文字标签——斜体</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <i>斜体文字1</i>
        <br/>
        <em>斜体文字2</em>
    </body>
</html>

  • 展示效果：

    斜体文字1

    斜体文字2

3.2.2、加粗

语法：<b>...</b>、<strong>...</strong>

属性：

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>文字标签——加粗</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <b>加粗文字1</b>
        <br/>
        <strong>加粗文字2</strong>
    </body>
</html>

  • 展示效果：

    加粗文字1

    加粗文字2

3.2.3、删除线

语法：<del>...</del>、<s>...</s>、<strike>...</strike>

属性：

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>文字标签——删除线</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <del>文字删除线</del>
        <br/>
        <s>文字删除线</s>
        <br/>
      <strike>文字横线</strike>
    </body>
</html>

  • 展示效果：

    文字删除线

    文字删除线

    文字横线

3.3.4、上下标

语法：

  • 上标：<sup>...</sup>
  • 下标：<sub>...</sub>

属性：

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>文字标签——上下标</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        y = x <sup>2</sup>
        <br/>
        H<sub>2</sub>O = 2H + O
    </body>
</html>

  • 展示效果：

    y = x 2

    H2O = 2H + O

3.2.5、下划线

语法：<ins>...</ins>、<u>...</u>

属性：

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>文字标签——下划线</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <ins>文字下划线</ins>
        <br/>
        <u>文字下划线</u>
    </body>
</html>

  • 展示效果：

    文字下划线

    文字下划线

3.2.6、键盘文字

语法：<kbd>Keyboard input</kbd>

属性：

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>文字标签——键盘文字</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 键盘文字，控制键不可用 -->
        <kbd>Keyboard input</kbd>
    </body>
</html>

  • 展示结果：

    Keyboard input

3.2.7 计算机代码标签

语法：<code>Computer code</code>

属性：

举例：

<!DOCTYPE html>
<html>
    <head>
        <title>文字标签——计算机代码标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <code>Computer code</code>
    </body>
</html>

展示结果：

Computer code

3.2.8 电码文本标签

语法：<tt>Teletype text</tt>

属性：

举例：

<!DOCTYPE html>
<html>
    <head>
        <title>文字标签——电码文本标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <tt>Teletype text</tt>
    </body>
</html>

展示结果：

Teletype text

3.2.9 简单文本标签

语法：<samp>Sample text</samp>

属性：

举例：

<!DOCTYPE html>
<html>
    <head>
        <title>文字标签——简单文本标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <samp>Sample text</samp>
    </body>
</html>

展示结果：

Sample text

3.2.10 计算机变量标签

语法：<var>Computer variable</var>

属性：

举例：

<!DOCTYPE html>
<html>
    <head>
        <title>文字标签——计算机变量标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <var>Computer variable</var>
    </body>
</html>

展示结果：

Computer variable

3.2.11 地址标签

语法：<address>...</address>

属性：

举例：

<!DOCTYPE html>
<html>
    <head>
        <title>文字标签——计算机变量标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <address>
			Donald Duck<br>
			BOX 555<br>
			Disneyland<br>
			USA
		</address>
    </body>
</html>

展示结果：

Donald Duck
BOX 555
Disneyland
USA

3.2.12 缩写和首字母缩写

语法：<abbr title="United Nations">UN</abbr>、<acronym title="World Wide Web">WWW</acronym>

属性：

举例：

<!DOCTYPE html>
<html>
    <head>
        <title>文字标签——计算机变量标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <abbr title="United Nations">UN</abbr>
		<br>
		<acronym title="World Wide Web">WWW</acronym>
    </body>
</html>

展示结果：

UN
WWW

3.2.13 改变文字方向

语法：<bdo dir="rtl">Here is some Hebrew text</bdo>

属性：

举例：

<!DOCTYPE html>
<html>
	<body>
	<p>
	If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
	</p>
	<bdo dir="rtl">
	Here is some Hebrew text
	</bdo>
	</body>
</html>

展示结果：

Here is some Hebrew text

3.3、段落标签

语法：<p>...</p>

属性：

  • align：
    • center：居中
    • left：左对齐
    • right：右对齐
    • justify：两端对齐

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>段落标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 段落标签 -->
        <p align="left">段落左对齐(默认)</p>
        <p align="center">段落居中对齐</p>
        <p align="right">段落右对齐</p>
        <p align="justify">段楼两，端对齐段楼两端对，齐段楼两端对齐段，楼两端对齐段楼两端对齐段，楼两端对，齐，段楼，两端，对齐，段楼两端，对齐段楼，两端对齐段，楼两端对齐段楼两端，对齐段楼两，端对齐段，楼两端对齐</p>
    </body>
</html>

  • 展示效果：

    段落左对齐(默认)

    段落居中对齐

段落右对齐

段楼两，端对齐段楼两端对，齐段楼两端对齐段，楼两端对齐段楼两端对齐段，楼两端对，齐，段楼，两端，对齐，段楼两端，对齐段楼，两端对齐段，楼两端对齐段楼两端，对齐段楼两，端对齐段，楼两端对齐

3.4、预格式化标签

语法：<pre> ...</pre>

属性：

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>预格式化标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 预先格式化标签 -->
        <pre>		前面有两个Tab</pre>
    </body>
</html>

  • 展示效果：

    		前面有两个Tab

4、列表标签

4.1、无序列表

语法：

<ul>
    <li>列表项</li>
    <li>列表项</li>
    ...
</ul>

属性：

  • type属性：
    • disc：圆点
    • square：正方形
    • circle：空心圆

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>无序列表</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <ul>
            <li>无序列表1</li>
    		<li>无序列表1</li>
		</ul>
        <ul type="disc">
            <li>无序列表2</li>
    		<li>无序列表2</li>
		</ul>
        <ul type="square">
            <li>无序列表3</li>
    		<li>无序列表3</li>
		</ul>
        <ul type="circle">
            <li>无序列表4</li>
    		<li>无序列表4</li>
		</ul>
    </body>
</html>

  • 展示效果：

    • 无序列表1
    • 无序列表1
    • 无序列表2
    • 无序列表2
    • 无序列表3
    • 无序列表3
    • 无序列表4(默认)
    • 无序列表4(默认)

4.2、有序列表

语法：

<ol>
    <li>列表项</li>
    <li>列表项</li>
    ...
</ol>

属性：

  • type：
    • 1：阿拉伯数字
    • a：小写字母
    • A：大写字母
    • i：小写罗马数字
    • I：大写罗马数字

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>有序列表</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <ol>
            <li>有序列表1</li>
    		<li>有序列表1</li>
		</ol>
        <ol type="1">
            <li>有序列表2(默认)</li>
    		<li>有序列表2(默认)</li>
		</ol>
        <ol type="a">
            <li>有序列表3</li>
    		<li>有序列表3</li>
		</ol>
        <ol type="A">
            <li>有序列表4</li>
    		<li>有序列表4</li>
		</ol>
        <ol type="i">
            <li>有序列表5</li>
    		<li>有序列表5</li>
		</ol>
        <ol type="I">
            <li>有序列表6</li>
    		<li>有序列表6</li>
		</ol>
    </body>
</html>

  • 展示效果：

    1. 有序列表1
    2. 有序列表1
    1. 有序列表2(默认)
    2. 有序列表2(默认)
    1. 有序列表3
    2. 有序列表3
    1. 有序列表4
    2. 有序列表4
    1. 有序列表5
    2. 有序列表5
    1. 有序列表6
    2. 有序列表6

4.3、自定义列表

语法：

<dl>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    <dd>列表描述</dd>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    ...
</dl>

属性：
举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>自定义列表</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <dl>
    		<dt>定义列表项</dt>
    		<dd>列表项描述</dd>
    		<dd>列表描述</dd>
    		<dt>定义列表项</dt>
    		<dd>列表项描述</dd>
		</dl>
    </body>
</html>

  • 展示效果：

    定义列表项
    列表项描述
    列表描述
    定义列表项
    列表项描述

5、图像标签

语法：<img src=""/>

属性：

  • src：图像的URL地址，（相对 / 绝对）
  • alt：图像替代文本，（在图像未加载时显示）
  • height：图像的高（px / %）
  • width：图像的款（px / %）
  • vertical：竖直对齐方式
    • top：顶端对齐
    • middle：居中对齐
    • bottom：底端对齐
  • align：水平对齐方式
    • left：
    • right：
    • texttop：
    • absmiddle：
    • baseline：
    • absbottom：
  • border：设置图片边框

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>图像标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 图像标签 -->
        <img src="https://gitee.com/jixiansiwei/ImagesBed/raw/master/website/font-end/html/HTML文档基本结构.png" alt="HTML文档基本结构" height="30px" weight="30%"/>
    </body>
</html>

  • 展示效果：

    HTML文档基本结构

6、超链接标签

语法：<a href="">...</a>
属性：

  • href：链接地址

  • target：链接目标窗口方式

    • _self：当前窗口打开
    • _blank：打开新窗口
    • _top：在最高一级的窗口打开
    • _parent：当前窗口的父级窗口打开

  • title：链接提示文字

  • name：链接命名
    举例：
    eg1:

  • <!DOCTYPE html>
<html>
    <head>
        <title>超链接标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 打开其他网页 -->
        <a href="http://www.baidu.com" target="_self" title="百度一下" name="baidu"></a>
        <br/>
        <!-- 打开本地磁盘文件夹 -->
        <a href="F:Pleione++FodderBlogMarkdownImgsHTML" target="blank" title="文档相关文件夹" name="imgs">跳转到图片文件夹中</a>
        <br/>
        <!-- 电子邮件链接 -->
        <a href="mailto:pleione_plus@qq.com">给博主发邮件</a>
        <br/>
        <!-- 文件下载 -->
        <a href="https://gitee.com/jixiansiwei/ImagesBed/raw/master/website/font-end/html/HTML文档基本结构.png">下载文件</a>
        <br/>
        <!-- 空连接 -->
        <a href="#">空连接</a>
    </body>
</html>

  • 展示效果：

    百度一下

    跳转到图片文件夹中

    给博主发邮件

    下载文件

    空连接

eg2:

  • <!DOCTYPE html>
<html>
    <head>
        <title>超链接标签——锚定</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 锚定主要是通过href和name两个属性来实现的 -->
        
        <!-- 页内锚定 -->
        <a href="#" name="top"/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <a href="#top">回到顶部</a>
        
        <!-- 不同页面锚定(相同文件夹下) -->
        <a href="网页名称#锚名">...</a>
    </body>
</html>

  • 展示效果：

    回到顶部

    …

6.1、链接邮件mailto

语法：mailto:URL?参数1=内容1&参数2=内容2&参数3=内容3

属性：

  • subject：代表邮件的标题
  • body：代表邮件的内容
  • cc：代表一个抄送对象
  • bcc：代表一个暗送对象

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>链接邮件mailto</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 定义邮件的标题为：HTML教程，内容为：一步步教你学会HTML，抄送对象：123456@qq.com，暗送对象：5211314@qq.com -->
        <a href="mailto:pleione_plus@qq.com?subject=HTML教程&body=一步步教会你HTML&cc=123456@qq.com&bcc=5211314@qq.com">mailto方式发送邮件</a>
    </body>
</html>

  • 展示结果：

    mailto方式发送邮件

注：

  • mailto邮件还可以通过<form>标签来实现

7、区块标签

语法：<div>...</div>

属性：

  • align：设置水平对齐方式
    • left：左对齐
    • center：居中对齐
    • right：右对齐
    • justify：两端对齐

8、引文区块标签

语法：<blockquote>....</blockquote>（通常会内缩）

属性：

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>引文区块标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 引文区块 -->
        <blockquote>这是一个引文区块</blockquote>
    </body>
</html>

  • 展示结果：

    这是一个引文区块

9、引文标签

语法：<cite>...</cite>（通常会以斜体显示）

属性：

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>引文标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 引文 -->
        <cite>引文</cite>
    </body>
</html>

  • 展示结果：

引文

10、居中标签

语法：<center>...</center>

属性：

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>居中标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 居中标签 -->
        <center>居中标签使用</center>
    </body>
</html>

  • 展示结果：

    居中标签使用

11、跑马灯标签

语法：<marquee>....</marquee>

属性：

  • behavior：设置滚动方式
    • slide：滑动
    • scroll：预设卷动
    • alternate：来回卷动
  • direction：
    • down：向下卷动
    • up：向上卷动
    • right：向右卷动
    • left：向左卷动
  • loop：设置卷动次数
  • width：设置宽度
  • height：设置高度
  • bgcolor：设置背景颜色
  • scrollamount：设置滚动速度
  • scrolldelay：设置卷动时间

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>跑马灯标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 跑马灯标签 -->
        <marquee behavior="alternate" direction="right" loop="2" scrollmount="1000" scrolldelay="3">	受到核辐射理发师发顺丰还是考虑发生了会发生费时费力是发生口角绿肥红瘦发生口角绿肥红瘦方式看见了回复是
		</marquee>
    </body>
</html>

  • 展示效果（不起效果）

    受到核辐射理发师发顺丰还是考虑发生了会发生费时费力是发生口角绿肥红瘦发生口角绿肥红瘦方式看见了回复是

12、换行标签

语法：<br/>

属性:

13、水平线标签

语法：<hr/>

属性：

  • width：设置水平线宽度，(px / %)
  • color：设置水平线颜色
  • align：设置水平线对齐方式
  • noshade：设置水平线无阴影
  • size：设置大小

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>水平线标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 水平线标签 -->
        <hr width="70%" color="blue" align="center"/>
    </body>
</html>

  • 展示效果：(在markdown中，仅width属性有效)

14、特殊符号(字符实体)

字符实体：

  • 一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）。
  • 大小写敏感。
实体名实体号显示结果描述
&lt;&#60;<小于号
&gt;&#62;>大于号
&nbsp;&#160;Space不断行的空白
&amp;&#38;&and符号
&quot;&#34;"引号
&#39;’单引号
&cent;&#162;¢分
&pound;&#163;£英镑
&yen;&#165;¥人民币元
&sect;&#167;§章节
&copy;&#169;©版权
&reg;&#174;®注册
&trade;™商标
&times;&#215;×乘号
&divide;&#247;÷除号

五、HTML表格

语法：

<table>										<!-- 表格开始 -->
    <caption></caption>						<!-- 表格标题，居中显示 -->

    <!-- 表格头 -->
    <thead>
        <tr>								<!-- tr行标签 -->
            <th>表头</th>						<!-- th表格头,内容居中、加粗显示 -->
            <th>表头</th>
            ...
        </tr>
    </thead>
    
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <td>主体</td>						<!-- td单元格 -->
            <td>主体</td>
            ...
        </tr>
    </tbody>
    
    <!-- 表格脚注 -->
    <tfoot>
        <tr>
            <td>脚注</td>
            <td>脚注</td>
            ...
        </tr>
    </tfoot>
</table>									<!-- 表格结束 -->

属性：

  • table属性：
    • width：规定表格宽度，（px / %）
    • align：表格相对周围元素的对齐方式
      • left：左对齐
      • center：居中对齐
      • right：右对齐
    • border：设置表格边框的宽度，(默认为1px)
    • bodercolor：表格的边框颜色，(border≠0时此值有效)
    • bordercolorlight：亮边框颜色（左边框和上边框）
    • bordercolordark：暗边框颜色（右边框和下边框）
    • border-style：边框线样式
    • bgcolor：设置表格的背景颜色
      • rgb(x,x,x)
      • #xxxxxx
      • colorname
    • background：表格的背景图
    • cellpading：设置表格单元边沿与其内容之间的空白，（px / %）
    • cellspacing：设置单元格之间的间距，（px / %）
    • frame：外部边框样式
      • void：不显示外侧边框
      • above：显示上部的外侧边框
      • below：显示下部的外侧边框
      • lhs：显示左边的外侧边框
      • rhs：显示右边的外侧边框
      • hsides：显示上部和下部的外侧边框
      • vsides：显示左边和右边的外侧边框
      • box：在所有四个边上显示外侧边框
      • border：在所有四个边上显示外侧边框
    • rules：内部边框样式
      • none：没有线条
      • groups：位于行组和列组之间的线条
      • rows：位于行之间的线条
      • cols：位于列之间的线条
      • all：位于行和列之间的线条
  • tr属性：
    • align：行内容的水平对齐方式
      • left：左对齐
      • center：居中对齐
      • right：右对齐
      • justify：两端对齐
      • char：字节对齐
    • valign：行内容的垂直对齐方式
      • top：顶端对齐
      • middle：中部对齐
      • bottom：底端对齐
      • baseline：基线对齐
    • bgcolor：行的背景颜色
      • rgb(x,x,x)
      • #xxxxxx
      • colorname
  • td和th标签属性：
    • align：单元格内容的水平对齐方式
      • left：左对齐
      • center：居中对齐
      • right：右对齐
      • justify：两端对齐
      • char：字节对齐
    • valign：单元格内容的垂直对齐方式
      • top：顶端对齐
      • middle：居中对齐
      • bottom：底端对齐
      • baseline：基线对齐
    • bgcolor：单元格的背景颜色
      • rgb(x,x,x)
      • #xxxxxx
      • colorname
    • background：单元格的背景图
    • width：单元格的宽度，(px / %)
    • height：单元格的高度，(px / %)
    • colspan： 跨列属性
    • rowspan：跨行属性
  • thead、tbody和tfoot标签属性
    • align：水平对齐方式
      • left：左对齐
      • center：居中对齐
      • right：右对齐
      • justify：两端对齐
      • char：字节对齐
    • valign：垂直对齐方式
      • top：顶端对齐
      • middle：中部对齐
      • bottom：底端对齐
      • baseline：基线对齐

举例：

eg1：

  • <!DOCTYPE html>
<html>
    <head>
        <title>HTML表格——基础(跨行、跨列)</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <table border="6" align="center" width=“80%” bgcolor="#f2f2f2" cellspacing="auto" cellpadding="5px" frame="box" rules="">								<!-- 表格开始 -->
            <caption>前端工程师的工资</caption><!-- 表格标题，居中显示 -->
                    <!-- 表格头 -->
                 <thead>
                     <tr bgcolor="#d8e4bc">
                         <th rowspan="2">城市</th>				<!-- 跨列 -->
                         <th colspan="2">2014</th>				<!-- 跨列 -->
                         <th rowspan="2">2015</th>
                         <th rowspan="2">2016</th>
                     </tr>
                     <tr bgcolor="#d8e4bc">
                         <th>上半年</th>
                         <th>下半年</th>
                     </tr>
                </thead>
                <!-- 表格主体 -->
                <tbody align="center" valign="middle">
                    <tr align="center" valign="middle">
                        <td bgcolor="#b8cce4">上海</td>
                        <td>8000</td>
                        <td>9000</td>
                        <td>10000</td>
                        <td>12000</td>
                    </tr>
                    <tr>
                        <td bgcolor="#b8cce4">北京</td>
                        <td>8000</td>
                        <td>9000</td>
                        <td>10000</td>
                        <td>12000</td>
                    </tr>
                </tbody>
                <!-- 表格脚注 -->
              <tfoot align="center" valign="middle">
                    <tr>
                        <td bgcolor="#b8cce4">合计</td>
                        <td>8000</td>
                        <td>9000</td>
                        <td>10000</td>
                        <td>12000</td>
                    </tr>
                </tfoot>
                <!-- 使用标签对表格划分，不会改变表格的展示效果，顺序错误也不会影响到表格的展示
                     -->
        </table>						<!-- 表格结束 -->
    </body>
</html>

  • 展示结果：(居中不起效果)

城市201420152016
上半年下半年
上海800090001000012000
北京800090001000012000
合计800090001000012000

eg2：

  • <!DOCTYPE html>
<html>
    <head>
        <title>HTML表格——嵌套</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <!-- 嵌套表格 -->
		<table border="6" align="center" width=“80%” bgcolor="#f2f2f2" cellspacing="auto" cellpadding="5px" frame="box" rules="">
			<!-- 表格标题 -->
			<caption>前端工程师的工资</caption>
			
			<!-- 表格头 -->
			<thead>
				<tr bgcolor="#d8e4bc">
					<th>城市</th>				<!-- 跨列 -->
					<th>2014</th>				<!-- 跨列 -->
					<th>2015</th>
					<th>2016</th>
				</tr>
			</thead>
			
			<!-- 表格主体 -->
			<tbody align="center" valign="middle">
				<tr align="center" valign="middle">
					<td bgcolor="#b8cce4">上海</td>
					<td>
						<table border="1" cellspacing="0" cellpadding="0">
							<tr>
								<td>上半年</td>
								<td>下半年</td>
							</tr>
							<tr>
								<td>8000</td>
								<td>9000</td>
							</tr>
						</table>
					</td>
					<td>10000</td>
					<td>12000</td>
				</tr>
				<tr>
					<td bgcolor="#b8cce4">北京</td>
					<td>
						<table>
							<tr>
								<td>8000</td>
								<td>9000</td>
							</tr>
						</table>
					</td>
					<td>10000</td>
					<td>12000</td>
				</tr>
			</tbody>
			
			<!-- 表格脚注 -->
			<tfoot align="center" valign="middle">
				<tr>
					<td bgcolor="#b8cce4">合计</td>
					<td>
						<table>
							<tr>
								<td>8000</td>
								<td>9000</td>
							</tr>
						</table>
					</td>
					<td>10000</td>
					<td>12000</td>
				</tr>
			</tfoot>
			<!-- 使用标签对表格划分，不会改变表格的展示效果，顺序错误也不会影响到表格的展示
				 -->
		</table>
    </body>
</html>

  • 展示效果：（居中不起效果）

    前端工程师的工资
    城市201420152016
    上海
    上半年下半年
    80009000
    		1000012000
    北京
    80009000
    		1000012000
    合计
    80009000
    		1000012000

六、HTML表单

6.1、工作原理

  表单工作原理如下图所示：

表单工作原理

6.2、表单标签

语法：

<form action="" method="" name="">
    <!-- 表单元素 -->
</form>

属性：

  • action：指示提交表单的位置
  • method：指示提交表单的方法
    • get：
      • 使用URL传递参数
      • 对所发送信息的数量也有限制
      • 一般用于信息获取
    • post：
      • 表单数据作为HTTP请求体的一部分
      • 对所发送信息的数量无限制
      • 一般用于修改服务器上的资源
  • target：指示打开页面的方式
  • enctype：在发送表单数据之前如何对齐进行编码
    • applicatin/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
  • name：表单的名称

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>表单标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <form>
            <!-- 表单元素 -->
        </form>
    </body>
</html>

  • 展示结果：

6.3、表单元素

6.3.1、表单输入标签

语法：<input type="" name="" ..../>

属性：

  • type属性：

    • text：文字域
      • name：文字域的名称
      • maxlength：设置用户输入的最大字符长度
      • size：指定文本框的宽度，以字符个数为单位；文本框的缺省宽度是20个字符
      • value：指定文本框的默认值
      • placeholder：规定用户填写输入字段的提示
    • password：密码域
      • name：文字域的名称
      • maxlength：设置用户输入的最大字符长度
      • size：指定文本框的宽度，以字符个数为单位；文本框的缺省宽度是20个字符
      • value：指定文本框的默认值
      • placeholder：规定用户填写输入字段的提示
    • file：文件域
    • checkbox：复选域
      • checked：指示是否被选中
    • radio：单选域
      • checked：指示是否被选中
    • button：按钮
    • submit：提交按钮
    • reset：重置按钮
    • hidden：隐藏域
    • image：图像域（图像提交按钮）
      • src：URL地址

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>表单输入标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <form action="action.php" method="post" name="form1" target="_blank" enctype="text/plain">
			<!-- 输入标签
				 type:
				 text			文字域
				 password		密码域
				 file			文件域
				 checkbox		复选域
				 radio			单选域
				 button			按钮
				 submit			提交按钮
				 reset			重置按钮
				 hidden			隐藏域
				 image			图像域
				 -->
			<table width="600px" bgcolor="#f2f2f2" align="center" border="1">
				<!-- 文字域 -->
				<tr>
					<td align="right">姓名：</td>
 					<td align="left"><input type="text" name="username" size="25" maxlength="8" placeholder="请输入姓名"/></td>
				</tr>
				<!-- 文字域 -->
				<tr>
					<td align="right">邮箱：</td>
					<td align="left"><input type="text" name="usermail" size="25" value="@163.com"></td>
				</tr>
				<!-- 密码域 -->
				<tr>
					<td align="right">密码：</td>
					<td align="left"><input type="password" name="userpwd" size="25" maxlength="8" placeholder="请输入密码"></td>
				</tr>
				<!-- 密码域 -->
				<tr>
					<td align="right">确认密码：</td>
					<td align="left"><input type="password" name="userpwd" size="25" maxlength="8" placeholder="请再次输入密码"></td>
				</tr>
				<!-- 文件域 -->
				<tr>
					<td align="right">上传照片：</td>
					<td align="left"><input type="file" name="file" /></td>
				</tr>
				<!-- 单选域 -->
				<tr>
					<td align="right">性别：</td>
					<td align="left">
						<input type="radio" name="sex" value="man">男
						<input type="radio" name="sex" value="woman">女
						<input type="radio" name="sex" value="securet" checked>保密
					</td>
				</tr>
				<!-- 复选域 -->
				<tr>
					<td align="right">爱好：</td>
					<td align="left">
						<input type="checkbox" name="hobby" value="read">读书
						<input type="checkbox" name="hobby" value="dance">跳舞
						<input type="checkbox" name="hobby" value="sing">唱歌
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="button" value="来点我呀" name="btn">
						<input type="submit" value="submit" name="submit">
						<input type="reset" value="reset" name="reset">
						<!--
							<input type="image" name="img_btn" src="img.png">
							 -->
					</td>
				</tr>
				<tr>
					<td></td>
					<td align="left"><input type="hidden" value="这是一个用户注册信息表单"></td>
				</tr>
			</table>
		</form>
    </body>
</html>

  • 展示结果：

    姓名：
    邮箱：
    密码：
    确认密码：
    上传照片：
    性别： 男 女 保密
    爱好： 读书 跳舞 唱歌

6.3.2、菜单和列表标签

语法：

<select name="" multiple="" size="">
    <optgroup label="组1">
    	<option value="">选项1</option>
    	<option value="">选项2</option>
   		 ...
    </optgroup>
    
</select>

属性：

  • select标签属性：
    • name：设置下拉菜单和列表的名称
    • multiple：设置可选择多个选项
    • size：设置列表中可见选项的数目
  • option标签属性：
    • selected：设置选项初始选中状态
    • value：定义送往服务器的选项值

举例：

  • <!DOCTYPE html>
<html>
    <head>
        <title>菜单和列表标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <form action="action.php" method="post" name="form1" target="_blank" enctype="text/plain">
			<table width="600px" bgcolor="#f2f2f2" align="center" border="1">
				<!-- 下拉菜单 -->
				<tr>
					<td align="right">城市：</td>
					<td align="left">
						<select name="city">
							<option value="0">请选择</option>
							<option value="bj">北京</option>
							<option value="tj">天津</option>
							<option value="hb">河北</option>
							<option value="sh">上海</option>
							<option value="fj">福建</option>
							<option value="xm">厦门</option>
						</select>
						<select name="city" size="2" multiple>
							<option value="bj" selected>北京</option>
							<option value="tj">天津</option>
							<option value="hb">河北</option>
							<option value="sh">上海</option>
							<option value="fj">福建</option>
							<option value="xm">厦门</option>
						</select>
					</td>
				</tr>
				<!-- 下拉分组菜单 -->
				<tr>
					<td align="right">城市：</td>
					<td align="left">
						<select name="city">
						<option value="0">请选择</option>
							<optgroup label="华北">
								<option value="bj">北京</option>
								<option value="tj">天津</option>
								<option value="hb">河北</option>
							</optgroup>
							
							<optgroup label="华东">
								<option value="sh">上海</option>
								<option value="fj">福建</option>
								<option value="xm">厦门</option>
							</optgroup>
						</select>
					</td>
				</tr>
			</table>
		</form>
    </body>
</html>

  • 展示结果：

    城市： 请选择 北京 天津 河北 上海 福建 厦门 北京 天津 河北 上海 福建 厦门
    城市： 请选择 北京 天津 河北 上海 福建 厦门

6.3.3、文字域标签

语法：

<textarea name="" rows="" cols="">
	文本内容
</textarea>

属性：

  • name：设置文本区的名称
  • placeholder：设置描述文本区域预期值的简短提示
  • rows：设置文本区内的可见行数
  • cols：设置文本区内的可见列数
  • wrap：文本框的折行方式
    • off：不保存换行信息
    • physical：强迫浏览器在发送信息到Web 浏览器时，必须将多行文本框的文字一行一行的发送出去
    • virtual：送出连续成串的字除非使用者按回车

举例；

  • <!DOCTYPE html>
<html>
  <head>
        <title>文字域标签</title>
        <meta http-equiv="Content" contect="text/html;charset=utf-8"/>
    </head>
    <body>
        <form action="action.php" method="post" name="form1" target="_blank" enctype="text/plain">
			<table width="600px" bgcolor="#f2f2f2" align="center" border="1">
				<tr>
					<td align="right">简介：</td>
					<td align="left">
						<textarea name="jj" placeholder="请输入简介信息" row="6" col="9"></textarea>
					</td>
				</tr>
			</table>
		</form>
    </body>
</html>

  • 展示结果：

    简介：

七、行内元素和块级元素

7.1、行内元素和块级元素概括

块级元素：

  • div
  • p
  • form
  • ul
  • li
  • ol
  • dl
  • address
  • fieldset
  • hr
  • menu
  • table

行内元素：

  • span
  • strong
  • em
  • br
  • img
  • input
  • label
  • select
  • textarea
  • cite

7.2、行内和块元素区别

  • 从显示效果来看
    • 块级元素独占一行，其宽度自动填满其父元素宽度
    • 行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变换
  • 块级元素可以设置width、height属性，行内元素设置width、height无效（块级元素即使设置了宽度，仍然是独占一行）
  • 块级元素可以设置margin和padding，行内元素的水平方向的padding(margin)-left(right)都产生边距效果，但是竖直方向的padding(margin)-top(bottom)都不会产生边距效果（水平方向有效，竖直方向无效）
  • 块级元素和行内元素可以转化

八、HTML框架

​ 使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面，它们是相互独立的。

使用框架的不利因素有：

  • 网站开发者需要关心更多HTML文档的情况。
  • 打印整个页面变得困难。

框架标签

frameset标签

  • <frameset>标签定义了如何将窗口拆分成框架。
  • 每个frameset标签定义了一组行和列。
  • 行/列的值指明了每个行/列在屏幕上所占的大小。

frame标签

  • <frame>标签定义了每个框架中放入什么文件。
  • 属性：
    • noresize="noresize"：用户不可拖动边框来改变大小。

代码示例：

eg1：垂直分栏

<html>
<frameset cols="25%,50%,25%">
	<frame src="https://www.runoob.com/html/html-tutorial.html">
	<frame src="https://www.w3school.com.cn/html/index.asp">
	<frame src="https://baike.baidu.com/item/HTML/97049?fr=aladdin">
</frameset>
</html>

eg2：水平分栏

<html>
<frameset rows="25%,50%,25%">
	<frame src="https://www.runoob.com/html/html-tutorial.html">
	<frame src="https://www.w3school.com.cn/html/index.asp">
	<frame src="https://baike.baidu.com/item/HTML/97049?fr=aladdin">
</frameset>
</html>

eg3：<noframes>标签

<html>
<frameset cols="25%,50%,25%">
	<frame src="https://www.runoob.com/html/html-tutorial.html">
	<frame src="https://www.w3school.com.cn/html/index.asp">
	<frame src="https://baike.baidu.com/item/HTML/97049?fr=aladdin">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</frameset>
</html>

eg4：混合框架

<html>
<frameset rows="50%,50%">
	<frame src="https://baike.baidu.com/item/HTML/97049?fr=aladdin">
	<frameset cols="25%,75%">
		<frame src="https://www.runoob.com/html/html-tutorial.html">
		<frame src="https://www.w3school.com.cn/html/index.asp">
	</frameset>
</frameset>
</html>

eg5：使用了noresize="noresize"的框架：

<html>
<frameset rows="50%,50%">
	<frame noresize="noresize" src="https://baike.baidu.com/item/HTML/97049?fr=aladdin">
	<frameset cols="25%,75%">
		<frame noresize="noresize" src="https://www.runoob.com/html/html-tutorial.html">
		<frame noresize="noresize" src="https://www.w3school.com.cn/html/index.asp">
	</frameset>
</frameset>
</html>

eg6：导航框架

<html>
<frameset cols="120,*">
	<frame src="frame_link.htm">
	<frame src="frame_a.htm" name="showframe">
</frameset>
</html>

eg7：内联框架

<html>
<body>
<iframe src="https://www.runoob.com/html/html-tutorial.html"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>

eg8：在框架内跳转到指定章节

<html>
<frameset cols="30%,70%">
	<frame src="frame_a.htm">
	<frame src="frame_section.htm#C10">
</frameset>
</html>

eg6：使用导航框架跳转到指定章节

<html>
<frameset cols="200,*">
	<frame src="frame_linksection.htm">
	<frame src="frame_section.htm" name="showframe">
</frameset>
</html>

九、HTML背景

代码示例：

<html>
<body bgcolor="#ffffff" text="yellow">
<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>
<p>
This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.
</p>
</body>
</html>
  • 设置背景为白色，文本为黄色。
  • 属性：
    • bgcolor属性将背景设置为颜色，它的值可以是一个十六进制数、RGB值或者一种颜色名称。
      • <body bgcolor="#000000">
      • <body bgcolor="rgb(0,0,0)">
      • <body bgcolor="black">
    • background属性将背景设置为图像，它的值是你所要使用图像的URL地址。如果这个图像的大小不及浏览器窗口，它将平铺占满窗口。
      • <body background="clouds.gif">
      • <body background="http://www.w3schools.com/clouds.gif">
  • <body>标签的bgcolor、background和text属性在最新的HTML标准（HTML4和XHTML）中已被废弃。W3C在他们的推荐中已删除这些属性。在HTML的未来版本中，层叠样式表（CSS）将被用来定义HTML元素的布局和显示属性。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/z1r0s/p/14284141.html