HTML总结

最新推荐文章于 2022-11-14 16:39:29 发布
最新推荐文章于 2022-11-14 16:39:29 发布
阅读量1.4k 收藏 20
点赞数 2
分类专栏： HTML总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baiqiangdoudou/article/details/90024222
版权

一、什么是HTML？？？

HTML的英文全称是Hypertext Marked Language,中文叫“超文本标记语言”。
和一般的文本不同，一个HTML文件不仅包含文本内容，还包含一些Tag,中文称“标记”。
一个HTML文件的后缀名是.htm或者.html。

二、HTML元素（HTML Elements）：

HTML元素是用来标记文本，表示文本的内容，比如:body、p、title就是HTML的元素。
HTML元素用Tag来表示，以 “<” 开始 以 “>” 结束；
Tag 通常是成对出现的，比如。起始的叫做 Opening
Tag，结尾的就叫做 Closing Tag。
目前 HTML 的 Tag 不区分大小写的。比如，和其实是
相同的。

三、HTML元素的属性

HTML元素可以拥有属性。属性可以扩展HTML元素的能力。

<body style="background:red;"></body>   // 设置背景颜色
<table border="0"></table>     // 设置表格边框为0

属性通常由属性名和值成对出现，就像这样：name=“value”。上面例子中的
border 就是 name，0 就是 value。属性值一般用双引号标记起来。

四、HTML基本 Tag(标记 || 标签)

1、标题标签 h1–h6依次变小

<h1>This is a h1</h1>
<h2>This is a h2</h2>
<h3>This is a h3</h3>
<h4>This is a h4</h4>
<h5>This is a h5</h5>
<h6>This is a h6</h6>

2、段落标签 p

//在 HTML 里用<p>和</p>划分段落。
<p>This is a paragraph</p>
<p>This is another paragraph</p>

3、换行标签 br 这是个单标签

<br/>

4、横线标签 hr 这是个单标签

<hr/>

5、HTML常用的文本格式标签
在这里插入图片描述

<html>
<body>
<p><b>粗体用 b 表示。</b></p>
<p><i>斜体用 i 表示。</i></p>
<p><del>芙蓉姐姐</del>这个词当中划线表示删除。</p>
<p><ins>想唱就唱</ins>这个词下划线插入。</p>
<p>X<sub>2</sub>其中的 2 是下标</p>
<p>X<sup>2</sup>其中的 2 是上标</p>
<p><blockquote>好好学习，天天向上。这句话缩进表示引用</blockquote></p>
<pre>
这是
预设(preformatted)文本.
在 pre 这个 tag 里的文本 保留
空格和
分行。
</pre>
<code>call getOrders</code>
<p>用 code 显示计算机代码，code 里显示的字符是等宽字符。</p>
</body>
</html>

五、HTML实体字符的显示

有些字符在 HTML 里有特别的含义，比如小于号<就表示 HTML Tag 的开始，
这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显
示一个小于号，该怎么办呢？
这就要说到 HTML 字符实体(HTML Character Entities)了。
一个字符实体(Character Entity)分成三部分：第一部分是一个&符号，英文
叫 ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编
号；第三部分是一个分号。
比如，要显示小于号，就可以写<或者<。
注意：Entity 是区分大小写的。

最常用的字符实体(Character Entities)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
ISO Latin-1 字符集点击查看更多！！！

六、HTML超链接

a 和 href 属性
HTML 用<a>来表示超链接，英文叫 anchor。
<a>可以指向任何一个文件源：一个 HTML 网页，一个图片，一个影视文件
等。用法如下：

<a href="url">链接的显示文字</a>
//  点击<a></a>当中的内容，即可打开一个链接文件，href 属性则表示这个链接文件的路径。

target属性：
使用target属性可以在一个新窗口里打开连接文件

// 将 target 的属性值设成_blank，你点击这个链接的时候，网页就会在一个新窗口出现。
<a href="https://www.baidu.com" target="_blank">点击去百度</a>

title 属性：
使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。

<a href="https://www.baidu.com" target="_blank" title="点击跳转百度">点击去百度</a>

name 属性：
使用 name 属性，可以跳转到一个文件的指定部位。
使用 name 属性，要设置一对。一是设定 name 的名称，二是设定一个 href指向这个 name：

<a href="#C1">参见第一章</a>
<a name="C1">第一章</a>
<a href="tel:400-135-3388">点击拨打电话</a>    // 移动端拨打电话
<a href="mailto:info@sina.com">给新浪网站发信</a>   // 发邮件

七、HTML 相对路径 (Relative Path) 和绝对路径 (Absolute Path)

1、HTML 相对路径(Relative Path)
相对路径就是一级一级去找需要引入的文件

2、绝对路径 (Absolute Path)
HTML 绝对路径(absolute path)指带域名的文件的完整路径。

八、HTML表格

HTML 表格用<table>表示。
一个表格可以分成很多行(row)，用<tr>表示；
每行又可以分成很多单元格(cell)，用<td>表示。
这三个 Tag 是创建表格最常用的 Tag。

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
     <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

border 属性： 设置表格的边界；

表格的表头 用<th></th>来表示，表头的字是粗体显示的

表格的标题 用<caption>表格标题</caption>来表示

包含多列或多行的单元格 用 colspan，rowspan 设置多列或者多行的单元格。
colspan: 合并列 <th colspan="2">联系方式</th> // 表示合并两列表格
rowspan: 合并行 <th rowspan="2">联系方式</th> // 表示合并两行表格

单元格里的内容
单元格<td></td>里面的内容。单元格的内容可以是文字，图片，超链接，Form，表格等。

单元格内容与单元格边界之间的距离
用 cellpadding 这个属性设置单元格内容与单元格边界之间

<table border="1" cellpadding="10"></table>   // 单元格内容与单元格边界之间的距离是30

九、HTML 框架

使用框架(Frame)，你可以在浏览器窗口同时显示多个网页。每个 Frame 里
设定一个网页，每个 Frame 里的网页相互独立。
Frameset
<frameset></frameset>决定如何划分 Frame。<frameset>有 cols 属性
和 rows 属性。使用 cols 属性，表示按列分布 Frame；使用 rows 属性，表
示按行分布 Frame。
用<frame>这个 Tag 设定网页。<frame>里有 src 属性，src 值就是网页的
路径和文件名。

<frameset cols="25%,75%">
<frame src="../asdocs/html_tutorials/Frame_a.html">
<frame src="../asdocs/html_tutorials/Frame_b.html">
</frameset>

Frameset 中的 noresize 属性
使用 Noresize 属性可以确保 Frame 的大小。如果不使用 noresize 属性，你
可以用鼠标移动 Frame 的边界，来改变 Frame 的大小，如果设置了
noresize 属性，就不能移动边界了。

Iframe
Iframe 是 Inline Frame 的意思，用可以将 Frame 置
于一个 HTML 文件内。

<html>
<body>
<p>用 IFRAME 可以在 HTML 文件里显示另一个网页。</p>
<p>这个 HTML 文档中使用 IFRAME 来显示另外一个叫 Frame_a.html 的网页。</p>
<iframe src="../asdocs/html_tutorials/Frame_a.html"></iframe>
</body>
</html>

十、列表标签

HTML 有三种列表形式：排序列表(Ordered List)；不排序列表(UnorderedList)；
自定义列表(Definition List)。

1、排序列表（Ordered List）
排序列表中，每个列表项前标有数字，表示顺序。
排序列表由<ol>开始，每个列表项由<li>开始。

<html>
    <body>
          <h4>一个排序列表(Ordered List)：</h4>
          <ol>
              <li>item1</li>
              <li>item2</li>
              <li>item3</li>
          </ol>
     </body>
</html>

在这里插入图片描述
排序类别可以通过type来设置排序列表项前的符号：
type=“A”: 项前符号 A、B、C…开头
type=“a”: 项前符号 a、b、c…开头
type=“I”: 项前符号 大写罗马数字 Ⅰ、Ⅱ、Ⅲ…开头
type=“i”: 项前符号 大写写罗马数字 ⅰ，ⅱ，ⅲ…开头

2、不排序列表（UnorderedList）
不排序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如
圆黑点。
不排序列表由<ul>开始，每个列表项由<li>开始。

<html>
    <body>
            <ul>
                  <li>item1</li>
                  <li>item2</li>
                  <li>item3</li>
           </ul>
    </body>
</html>

在这里插入图片描述
不排序类别可以通过type来设置排序列表项前的符号：
type=“disc”: 项前符号 黑圆点
type=“circle”: 项前符号 空心圆
type=“square”: 项前符号 黑方块

3、自定义列表（Definition List）
定义列表通常用于术语的定义。
定义列表由<dl>开始。术语由<dt>开始，英文意为 Definition Term。术语
的解释说明，由<dd>开始，<dd></dd>里的文字缩进显示。
在这里插入图片描述

十一、表单（forms）

HTML 表单(Form)是 HTML 的一个重要部分，主要用于采集和提交用户输入的信息。

一、表单的组成部分
学习 HTML 表单(Form)最关键要掌握的有三个要点：
• 表单控件(Form Controls)
• Action
• Method

1、表单控件
通过 HTML 表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如<input type= "text">就是一个表单控件，表示一个单行输入框。

2、Action
表单里的 action 就指明了处理表单信息的文件。提交表单的地址

3、Method
至于 method，表示了发送表单信息的方式。method 有两个值：get 和post。
get 的方式是将表单控件的 name/value 信息经过编码之后，通过URL 发送(你可以在地址栏里看到)。
而 post 则将表单的内容通过 http 发送，你在地址栏看不到表单的提交信息。

二、HTML表单常用控件

表单控件说明
<input type="text"/>单行文本输入框
<input type="submit"/>将表单信息提交给action所指向的文件
<input type="checkbox"/>复选框
<input type="radio"/>单选框
<select></select>下拉框
<textarea></textarea>多行文本框
<input type="password"/>密码输入框（输入的文字用*表示）

1、单行文本输入框(input type=“text”)
单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如
下：

<input type="text" name="userName"/>

2、复选框(input type=“checkbox”)
复选框允许用户在一组选项里，选择多个。示例代码：

<html>
<head><title>选择</title></head>
<body>
请选择你喜欢的水果：<br>
<form action ="http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method ="post">
	<input type="checkbox" name="fruit" value ="apple" >苹果<br>
	<input type="checkbox" name="fruit" value ="orange">桔子<br>
	<input type="checkbox" name="fruit" value ="mango">芒果<br>
	<input type="submit" value="提交">
</form>
</body>
</html>

checked表示默认选中

<input type="checkbox" name="fruit" value ="apple" checked >苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>

3、单选框(input type=“radio”):
使用单选框，让用户在一组选项里只能选择一个。示例代码：

<html>
<head><title>选择</title></head>
<body>
请选择你最喜欢的水果：<br>
<form action ="http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method ="post">
	<input type="radio" name="fruit" value = "Apple">苹果<br>
	<input type="radio" name="fruit" value = "Orange">桔子<br>
	<input type="radio" name="fruit" value = "Mango">芒果<br>
	<input type="submit" value="提交">
</form>
</body>
</html>

checked表示默认选中

	<input type="radio" name="fruit" value = "Apple" checked>苹果<br>
	<input type="radio" name="fruit" value = "Orange">桔子<br>
	<input type="radio" name="fruit" value = "Mango">芒果<br>

4、下拉框(select)：既可以用做单选，也可以用做复选
单选例句如下：

<form action ="http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method ="post">
	你最喜欢的水果是：
	<select name="fruit" >
	<option value="apple">苹果
	<option value="orange">桔子
	<option value="mango">芒果
	</select>
	<input type="submit" value="提交">
</form>

如果要变成复选，加 muiltiple 即可。用户用 Ctrl 来实现多选。例句：

<select name="fruit" multiple>

可以用 size 属性来改变下拉框(Select)的大小。

<select name="fruit" size = "1" multiple>

5、多行输入文本textarea
多行输入框(textarea)主要用于输入较长的文本信息。例句如下：

<textarea cols ="50" rows = "3"></textarea>    // 其中 cols 表示 textarea 的宽度，rows 表示 textarea 的高度。

6、密码输入框(input type=“password”)

<input type="password" name="yourpw">

7、提交(input type=“submit”)
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action 所指向的文件。例句如下：

<input type="submit" value="提交">

8、图片提交(input type=“image”)
nput type=image 相当于 input type=submit，不同的是，inputtype=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径

<input type="image" src ="images/icons/go.gif"  alt = "提交" NAME="imgsubmit">

十二、HTML 图片 (Images)

用 <img> 这个 Tag 可以在 HTML 里面插入图片。最基本的语法如下：

<img src="url">   // url 表示图片的路径和文件名。可以是相对路径也可以是绝对路径

图片 alt 属性
假使浏览器没有载入图片的功能，浏览器就会转而显示 Alt 属性的值。其实，现在大多数浏览器都支持图片载入。在此介绍 Alt 属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT 属性写上图片的说明，便于搜索引擎抓取你网页的内容。

图片 align 属性
用 align 属性，可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。

背景图片

<html>
<body background="../images/html_tutorials/background.jpg">
<h3>这个网页有背景图片哦！</h3>
<p>如果图片比页面小，图片会自动重复。</p>
</body>
</html>

十三、HTML 字体fonts

在 HTML 里，可以用 font 这个元素及其属性来设定字体的大小，颜色和字体
风格。

字体大小
用字体大小属性(size)来设定字体的大小。示例代码如下：

<p><font size="2">这一段的字体大小的值是 2。</font></p>

字体风格
用 face 属性来设定字体风格。示例代码如下：

<p><font fac="arial">这一段的字体风格是 arial。</font></p>  // 字体风格如：arial、courier、 verdana

字体颜色
用颜色属性(color)来设定字体颜色。

<p><font color="#FF0000">这一段的字体颜色是红色</font></p>

注意
HTML4 的标准中，已经不建议使用 font 及其属性来设定字体，而是建议用
CSS 来设定字体的大小，颜色，字体风格等。
这里只做了解

十四、HTML 头部信息（Head）

HTML 头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。
另外，搜索引擎如 google,yahoo,baidu 等也会查找你网页中的 head 信息。为了让搜索引擎能够收录你的网页，你也要填写适当的 head 信息。(网站被搜索引擎收录，还有其它的方法，比如被其它网站链接，这里不赘述，请浏览搜索引擎网站。)

下面说几个常用的 head 信息里的 html 元素：
如标题(title)，链接(link)，样式(style)以及关于信息(meta)。

1、标题（title）
标题(title)是最常用的 head 信息。它不显示在 HTML 网页正文里，显示在浏
览器窗口的标题栏里。

<head><title>学习html</title></head>

见图：
在这里插入图片描述

2、链接(link)
用链接(link)可以建立和外部文件的链接。常用的是对 CSS 外部样式表
(external style sheet)的链接。示例代码如下：

<link rel="stylesheet" href="mainstyles.css" type="text/css">

3、样式(style)
用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下：

<head>
<style>
		body {background-color:white; color:black;}
		h1 {font: 18pt arial bold;}
</style>
</head>

4、关于网页信息(meta)
在计算机语言里，你经常可以看到一个前缀 – meta，meta 就是“关于”(about)的意思。
这 meta 解释起来比较拗口，比如 metadata，意为描述 data 的 data，英文即 data about data。还有一个词叫 metalanguage，表示一种描述其它语言的语言。再举一个例子，metafile，表示描述其它文件的文件。
在 HTML 里，meta 标记(meta tags)表示用来描述网页的有关信息。示例代

<meta name="description" content="HTML 中文教程之头部信息">
<meta name="keywords" content="HTML,tutorials,source codes">
<meta name="author" content="站长网 站长学院">

利用 meta 中的 Refresh 你还可以实现自动跳转页面的功能。示例代码：

<meta http-equiv="Refresh"content="5;url=http://www.admin5.com/html/html_tutorials/index.html">
<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://www.admin5.com/html/html_tutorials/index.html">
</head>
<body>
	<p>
	由于网站版本更新，站长网 站长学院网站的 HTML 中文教程链接已改为 <a
	href="http://www.admin5.com/html/html_tutorials/index.html">
	http://www.admin5.com/html/html_tutorials/index.html </a>。
	</p>
	<p>
	如果在 5 秒钟后网页没有自动跳转，请点击上面的链接，进入站长网 站长学院网站的 HTML 中文
	教程。
	</p>
</body>
</html>
M'r白墙
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
iframe 内嵌式天气，样式颜色修改
tsqjxy的博客
10-19 1656
2 ，iframe加载完毕后,使用DOM元素的contentWindow属性获取到iframe标签的window;之后就可以正常获取元素了.（网友回答，测试无效）3，还可直接引用第三方api接口就好, appId等参数可以在第三方官网中进行注册调用 , 免费版的一天可以调用300次。这次给大家带来怎样利用iframe让自己的网页可以显示天气，用iframe让自己的网页可以显示天气的注意事项有哪些，下面就是实战案例，一起来看一下。1，要改变内嵌样式的字体颜色，需要在src链接拼接color。
webinput标签的type属性的一些常用可选值
weixin_43749736的博客
11-23 1699
text 普通文本 search 搜索框 password 密码 radio 单选按钮 checkbox 复选框 file 文件上传 button 按钮类型 submit 普通提交按钮 reset 重置按钮 hidden 隐藏输入域 单词 unordered list：无序列表 ordered list：有序列表 definition list：定义列表 disc：...
webtype
03-15
网络类型
JAVAWeb 基础篇 表单标签项type属性 简单案例
DAurora的博客
10-24 2148
表单标签项type属性： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签项type属性</title> </head> <body> <!--表单标签--> <!-- form:定义表单，可用于指定数据的采集范围。 * 属性： ac
HTML5 input type 属性所有值
weixin_34056162的博客
12-15 205
button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本） checkbox 定义复选框。 color 定义拾色器。 date 定义日期字段（带有 calendar 控件） datetime 定义日期字段（带有 calendar 和 time 控件） datetime-local 定义日期字段（带有 calendar 和 time ...
html总结.xmind
09-08
自己总结的html的笔记，绘制了详细的思维导图，每个思维导图中均有详细的博文解释，方便大家学习和理解，免费分享给大家。适合网页前端的爱好者和学习者
HTML总结.xmind
02-23
HTML总结.xmind
html总结.
03-02
html总结.
html总结文档
05-12
html常用标签总结，包含各种表单标签 1.表单：<form></form> 主要属性：id name action method 2.input元素： 主要属性：name type value class type： text submit button radio checkbox hidden...
typescript 高级类型
junhuafly的专栏
03-17 650
常用的 ts 中定义类型我们一般会使用到 type 或者是 interface type 中可以定义联合类型，如 type A = { name:string; age:number } type B = { id:number; sex:string; } // 这就是联合类型 type C = A & B // 这里在定义 user 的类型是 C 时就必须要实现 name、age、id、sex 属性 const user:C = { } ..
HTML总结【详细】
CYL_2021的博客
03-18 2143
什么是HTML？ HTML 是 HyperText Markup Language（超文本标记语言）的缩写，它是用于创建网页 的标准标记语言。HTML 使用标记标签来描述网页，由浏览器来解析，即使用 HTML 来建 立 Web 站点，通过 Web 浏览器读取 HTML 文档，并以网页的形式显示出来。 一.网页.html页面主要内容 <!-- 文档类型声明，作用就是告诉浏览器使用那种HTML版本来显示网页，下面是HTML5 --> <!DOCTYPE html> 用来定义当前文档.
HTML基础知识总结
最新发布
qq_40046544的博客
11-14 3819
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
HTML学习内容总结
qq_48681023的博客
07-10 2174
HTML学习总结
HTML学习总结
比较平凡的博客
03-23 343
HTML学习总结 HTML简介 1. 什么是HTML： HTML（HyperText Markup Language）是一种超文本标记语言。我们通常使用HTML来构建网页。 HTML是构成 Web 世界的一砖一瓦,它定义了网页内容的含义和结构。 HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。 2. HTML文档结构 HTML元素 为方便在浏览器中显示，HTML通常是由一个个的元素组成，HTML标记包含的一些常见元素如：==，，，<header>，<footer>，
HTML中type类型常用种类
热门推荐
奋斗中的小码农博客
10-27 1万+
button：定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。 <input type="button" name="" id="" value="按钮"><br> <br> checkbox：定义复选框。 <br> <input type="checkbox" name="" id="">男<br> ...
input表单中的type属性【web前端】
栊夕的博客
12-25 4246
input中的type属性 type属性取值: text – 文字输入域(输入型) password – 也是文字输入域,但是输入的文字以密码符号’*'显示(输入型) file – 可以输入一个文件路径(输入型) checkbox – 复选框，可以选择零个或多个(选择型) radio – 单选框，只可以选择一个而且必须选择一个(选择型)【多个单选框如果只想选择一个把name值填写相同即可】 hid...
HTML常用标签总结及用法实例
经过一段时间的学习，对于HTML也有了基础的认识。在网页基本结构中，一个HTML网页最基本由网页头...希望通过对HTML常用标签的总结和学习，能够帮助大家更好地理解和应用HTML标签，为日后的网页开发工作打下坚实的基础。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值