欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML知识点总结

程序员文章站 2024-01-30 15:26:46
...

HTML知识点总结

一、HTML简介

HTML称为超文本标记语言， 全称为 HyperText Markup Language，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML 提供一系列的元素来构成一个页面中最基础的内容。HTML 是一种描述 Web 文档结构和语义的语言，它由元素组成，每个元素可以有一些属性或文本。

当你保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。

编写代码的工具有：

  • 记事本
  • sublime text
  • hbuilder
  • webstorm
  • vscode

二、HTML示例

一个页面有且只有一个根标签是html， 元素一般包含 和 两个元素，也就是 HTML 的头部和主体内容。

<html>
	<head>
    	<title>网页的标题</title>
    </head>
    <body>
    <!-- 这是一个注释 下面是个文本框 -->
    <input type="text"></input>
    </body>
</html>
  • HTML标签:由尖括号包围，成对出现，例如

    ,即开标签和闭标签
  • 属性：定义在开标签中，例如例子中的input标签中的type属性
  • 简写：开闭标签之间的内容是标签体，如果标签体为空，则可以简写
  • 注释：即注释标签
  • HTML文档在浏览器中被解释运行,展示的不是源码而是渲染之后的效果

三、HTML头部

< head > 元素包含了当前 HTML 页面的所有头部元素，在 < head > 元素内必须定义 < title > 元素，还可以定义 < script >、< link > 等元素。 这些 HTML 的头部元素定义了当前页面的标题、编码、使用的脚本或样式等信息。

1、title元素

title元素定义了当前HTML页面的标题

<title>百度一下，你就知道</title>

2、meta元素

meta元素提供了 HTML 页面的元数据（Metadata），元数据是存储数据的信息。
通常用于设置页面的编码、描述、关键词、作者等信息。
元素不会显示在页面中，但会被浏览器解析。

2.1 定义网页内容的编码格式
<meta charset="utf-8">
2.2 定义HTML页面关键字，用于搜索引擎
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
2.3 定义HTML页面描述
<meta name="description" content="HTML教程,前端学习,搜索">
2.4 定义HTML页面作者
<meta name="author" content="小苦瓜">

四、HTML主体

1、body元素

body标签定义了文档的主体，包含了文档的所有内容(如文本、超链接、图像、表格和列表等),body元素包含的内容是用户可以看得到的。

一个HTML文件里只能存在一个body标签。

2、HTML元素基本构成

2.1、元素的类型

HTML是标记语言，标记就是页面中的元素(标签)。一个完整的HTML页面是由多个
不同的元素组成的。

闭合元素：必须包含开始元素和结束元素，如果没有结束元素会产生意外的错误

<title>html学习</title> 
<p>这是一个段落标签</p>  <!-- 该标签的作用是表示一个段落，会有换行 -->

空元素：也叫做氮元素，只需要开始元素，而不需要结束元素。

<meta name="description" content="html学习，前端学习">
<br>  <!-- 换行 -->
2.2、HTML的属性

属性是设置在HTML元素中的，用于为元素添加附件信息。属性一般都定义在开始元素中，并且是以“名称/值”的形式出现的。

<input type="text"/> <!-- 这是一个文本框 -->
<input type="button" value="点击我"/> <!-- 这是一个按钮 -->

五、HTML文本

1、标题元素

HTML提供了6个标题，从大到小一次是h1到h6

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

2、段落

p元素定义段落，浏览器会自动地在段落的前后添加空行

<p>这是一个段落</p>
<p>这是另外一个段落</p>

备注:在html中手动换行无效

3、换行

p元素定义的段落内容是不会自动换行的，如果换行需要使用br元素

<body>
永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。
<br>
是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。
</body>

4、水平线

如果在浏览器中显示一条水平线效果

永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。
<br>
<hr size="1" width="100%" color="red"/>
是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。

5、文本修饰

5.1 粗体字
这是一段正常未加粗的文本内容.
<br>
<b>这是一段加粗之后的文本内容.</b>
<br>
<strong>粗体--着重强调</strong>
5.2 斜体字
<i>这是一段斜体的文本内容.</i>
5.3 下划线
<body>
	内容：<u>前端学习</u>
</body>
5.4 删除线
<body>
	<del>这是一段要被删除的文字</del>
</body>
5.5 下标字
<body>
	H<sub>2</sub>O
</body>
5.6 上标文字
3<sup>2</sup>=9
5.7 小号字
正常文字
<small>小号文字</small>
5.8 大号字
<body>
	<small>小号文字</small>
	正常文字
	<big>大号文字</big>
</body>

六、HTML图像与链接

1、图像元素

img元素引入外部图像，元素是空元素

1.1 src属性

src属性是必需的，表示引入图像的url地址

<img  src="images/img.png"/>

图像可以是本地地址，也可以是网络地址

<img src="https://www.baidu.com/img/[email protected]"/>
1.2 图像大小

width和height属性用于设置图片显示的宽度和高度

<img src="img.png" width="350" height="230"/>

align 属性用于设置图像显示的位置。

  • left：水平方向居左。
  • right：水平方向居右。
  • top：垂直方向居上。
  • bottom：垂直方向居下。
  • middle：居中
<img src="img.png" width="350" height="230" align="right" />
1.3 alt属性
<img src="abcd.png" alt="无法加载图片"/>

2、超链接

2.1 用法

href属性是必需的，表示指定跳转的URL地址

<a href="http://www.baidu.com">百度一下，你就知道</a>
2.2 打开方式target属性

元素的target属性用于设置链接的打开方式

  • _blank：在新窗口打开链接
  • _self：在当前窗口打开链接
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>
2.3 锚点
<body>
	<a name="postion"></a> <!-- 定义锚点 -->
    <!-- 页面其它内容
		...
		...
		...
	 -->
	<a href="#postion">定位到postion的位置</a>  <!-- 链接到锚点 -->
</body>
2.4 回到顶部的空连接
<body>
	<!-- 页面其它内容
		...
		...
		...
	 -->
	<a href="#">回到顶部</a>   <!-- 回到顶部 -->
</body>

七、HTML列表

1、无序列表

1.1 定义无序列表

元素定义无序列表，用于列出页面上没有特定次序的条目。

<ul>	
	<li>北京市</li>	
	<li>上海市</li>	
	<li>重庆市</li>
</ul>
1.2 type属性

定义列表的项目符号的类型

  • disc：实心圆，默认值。
  • circle：空心圆。
  • square：实心矩形。
<ul type="circle">
	<li>北京市</li>	
	<li>上海市</li>	
	<li>重庆市</li>
</ul>

2、有序列表

2.1 定义有序列表
<ol>	
		<li>北京市</li>	
		<li>上海市</li>	
		<li>重庆市</li>
</ol>
2.2 type属性
  • 1：数字值，默认值。
  • a 或 A：小写或大写字母。
  • i 或 I：小写或大写罗马数字。
<ol type="a">	
	<li>北京市</li>	
	<li>上海市</li>	
	<li>重庆市</li>
</ol>

3、自定义列表

<dl>
    <dt>北京</dt>
    <dd>海淀</dd>
    <dd>昌平</dd>
    <dd>朝阳</dd>
    <dt>广东</dt>
    <dd>广州</dd>
    <dd>深圳</dd>
    <dd>东莞</dd>
</dl>

八、HTML表格

1、表格使用

表格由 < table > 标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由 标签定义）。

<table>
	<tr>
		<td>第1行，第1列</td>
		<td>第1行，第2列</td>
	</tr>
	<tr>
		<td>第2行，第1列</td>
		<td>第2行，第2列</td>
	</tr>
</table>

2、表格属性

属性名称 描述
width 和 height 设置表格的宽度和高度
align 设置表格的对齐方式
border 设置表格的边框宽度
bgcolor 设置表格的背景颜色
cellpadding 设置内边距（单元格边框与内容之间的距离）
cellspacing 设置外边距（单元格之间的距离）
bordercolor 边框颜色 
<table border="1" cellspacing="0" bgcolor="gray" bordercolor="red" width="300px" height="100px" align="left">
	<tr>
		<td>第1行，第1列</td>
		<td>第1行，第2列</td>
	</tr>
	<tr>
		<td>第2行，第1列</td>
		<td>第2行，第2列</td>
	</tr>
</table>

3、tr元素

属性名称 值 描述
align right、left、center 左右对齐方式
valign top 、middle 、bottom 垂直对齐方式
bgcolor rgb(xxx,xxx,xxx)、colorName 背景颜色 
<table border="1" cellspacing="0" width="500px" height="100px">
	<tr align="center">
		<td>第1行，第1列</td>
		<td>第1行，第2列</td>
	</tr>
	<tr align="right" valign="top" bgcolor="blue">
		<td>第2行，第1列</td>
		<td>第2行，第2列</td>
	</tr>
</table>

4、td元素

td元素是定义表格的数据单元格。

属性名称 值 描述
align right、left、center 左右对齐方式
valign top 、middle 、bottom 垂直对齐方式
width和height pixels 、% 设置单元格的宽和高
colspan和rowspan number 设置单元格的跨列和跨行数量
bgcolor rgb(xxx,xxx,xxx)、colorName 背景颜色 
<table border="1" cellspacing="0" width="500px" height="100px">
	<tr>
		<td align="center">第1行，第1列</td>
		<td valign="top">第1行，第2列</td>
	</tr>
	<tr>
		<td width="300px">第2行，第1列</td>
		<td bgcolor='red'>第2行，第2列</td>
	</tr>
</table>

5、合并行和列

<table border="1" cellspacing="0" width="500px" height="200px">
	<tr>
		<td>第1行，第1列</td>
		<td>第1行，第2列</td>
	</tr>
	<tr>
		<td colspan="2">第2行，第1列</td>	 
	</tr>
	<tr>
		<td>第3行，第1列</td>
		<td rowspan="2">第3行，第2列</td>
	</tr>
	<tr>
		<td>第4行，第1列</td>
	</tr>
</table>

6、表格标题caption

caption元素用于定义表格的标题，必须紧随 元素之后，且只能对每个表格定义一个标题。

<table border="1" cellspacing="0" width="500px" height="100px">
	<caption>表格标题</caption>
	<tr>
		<td>第1行，第1列</td>
		<td>第1行，第2列</td>
	</tr>
	<tr>
		<td>第2行，第1列</td>
		<td>第2行，第2列</td>
	</tr>
</table>

7、表头thead、tbody表主体、tfoot表脚注

<table border="1" cellspacing="0" width="500px" height="100px">
	<caption>信息</caption>
	<thead>
		<tr>
			<th>姓名</th> <!-- 定义表头单元格 会加粗显示 -->  
			<th>性别</th>
		</tr>
	</thead>
	<tr>
		<td>Tom</td>
		<td>boy</td>
	</tr>
	<tr>
		<td>Linda</td>
		<td>girl</td>
	</tr>
</table>

tfoot 元素应该与 thead 和 tbody 元素结合起来使用。

九、表单

1、form 元素

表单用标签描述，表单内部可以有多个子标签，用来完成用户信息的收集，并发送请求给服务器。

属性：action=“xxx” method=“get/post” 请求地址 请求方式

http://www.baidu.com?uname=abc&passwd=123
<form action="http://www.baidu.com" method="get">
	username:<input type="text" name="uname" id="uname115"/><br/>  # abc
	password:<input type="text" name="passwd" id="pwd115"/><br/>   # 123
	<input type="submit" value="提交" id="sub115"/>
</form>

2、表单元素

input元素有很多不同类型，根据不同的 type 属性来决定

用户名：<input type="text" name="txt" />  <!-- text表示文本框-->
  • type属性：
    | 属性名称| 描述 |
    | ---- | ---- |
    | text | 文本输入框 |
    | password | 密码框 |
    | radio | 单选按钮 |
    | checkbox | 复选框 |
    | button | 按钮 |
    | submit | 提交按钮 |
    | reset | 重置按钮 |
    | file | 文件域 |
  • name属性 ：标签的普通的属性，相当于别名，是每个输入控件的重要属性==请求参数名。
  • id属性 ： 标签的唯一标识名，不能重复。
  • value属性 ：标签的普通属性，是重要属性==请求参数值。
2.1 文本框
用户名：<input type="text" name="txt" />  <!-- text表示文本框-->
2.2 密码框
用户名：<input type="text" name="pwd" value="Mr_lee" maxlength="10" readonly="readonly" />
2.3 单选按钮
<!-- name：值必须一样，value：表示提交表单时的值 checked:默认选中-->
<input type="radio" name="sex" value="1">男       
<input type="radio" name="sex" value="0" checked="checked">女
2.4 复选框
<input type="checkbox" name="course" value="Mysql">Mysql
<input type="checkbox" name="course" value="HTML">HTML
<input type="checkbox" name="course" value="Linux">Linux
<input type="checkbox" name="course" value="Django">Django
2.5 按钮
<input type="button" name="btn" value="点我">
2.6 提交按钮
<input type="submit" name="sub_btn" value="提交">
2.7 重置按钮
<input type="reset" name="set_btn" value="重置">
2.8 文件域
<input type="file">

3、下拉选框

选择课程：
<select name="course">
	<option value="1">Java</option>
	<option value="2" selected="selected">C++</option>
	<option value="3">PHP</option>
</select>

十、HTML特殊符号

显示结果 描述 实体名称
空格
< 小于号 <
> 大于号 >
© 版权（copyright) ©
® 注册商标 ®
™ 商标 ™
相关标签： 前端

上一篇： 高性能 Windows Socket 组件 HP-Socket v3.0.1 正式发布

下一篇： spark处理脱敏字段

推荐阅读