HTML知识汇总

最新推荐文章于 2024-01-23 00:07:28 发布

osmundZ

最新推荐文章于 2024-01-23 00:07:28 发布

阅读量64

点赞数

本文链接：https://blog.csdn.net/weixin_45455252/article/details/119000953

版权

HTML

HTML元素

元素语法：

1. 以开始标签起始(<p>)，以结束标签(</p>)终止
2. 元素的内容是开始标签和结束标签之间的内容
3. 某些HTML元素具有空内容
4. 空元素在开始标签中进行关闭(<br/>)
5. 大多数HTML元素可拥有属性

大多数HTML元素可以嵌套（元素中包含元素），HTML文档就是由相互嵌套的HTML元素构成的。

空元素：没有内容的HTML元素，如：<br/>、<hr/>

tips：HTML标签对大小写不敏感。

HTML属性

1. HTML元素可以设置属性
2. 属性可以在元素中添加附加信息
3. 属性一般描述于开始标签
4. 属性总是以 名称/值 对的形式出现

属性值应使用被包括在引号内，且属性和属性值对大小写不敏感（推荐使用小写）

HTML标题

标题标签：<h1> ~ <h6>

<h1>这是一个标题</h1>

标题标签属于块元素，浏览器会自动地在标题的前后添加空行。

标题很重要：搜索引擎使用标题为网页结构和内容编制索引，用户可以通过标题来快速浏览网页。所以，不要仅仅是为了生成粗体或大号的文本而使用标题。

水平线标签：<hr>

空元素，在页面中创建水平线，用户分隔内容。

注释

<!-- 这是一个注释 -->

HTML段落

段落标签：<p>

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

段落属于块元素，浏览器会自动地在段落的前后添加空行。

换行标签：<br>

空元素，用于在HTML页面中产生换行。

HTML文档中的多个空格和换行在HTML页面中显示时都会被视作一个空格来显示。

HTML文本格式化

加粗：<b>、<strong>

两个标签都能实现加粗文本的效果，但是<b>只是单纯的定义粗体文本，而<strong>则表示重要文本

斜体：<i>、<em>

两个标签都能实现斜体文本的效果，但是<i>只是单纯的定义斜体文本，而<em>则表示重要文本

文本格式化标签：

<b>、<strong>、<i>、<em>
上标：<sup>	下标：<sub>
放大：<big>	缩小：<small>
删除文字：<del>	插入文字：<ins>

"计算机输出"标签：

电脑输出：<code>	键盘输出：<kbd>
打字机文本：<tt>	计算机代码样本：<samp>	
计算机变量：<var>	预格式文本：<pre>

引文，引用，及标签定义：

地址：<address>
缩写：<abbr>	首字母缩写：<acronym> 属性title
文字方向：<bdo> 属性dir
短引用：<q>	长引用：<blockquote>
引用、引证：<cite>	定义项目：<dfn>

HTML链接

链接标签：<a>

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

链接标签中的内容可以是字、词、图像等，通过点击这些内容来跳转到一个新的文档或文档的某个部分。

链接的默认样式：（样式可通过CSS自定义）

1.未被访问过的链接显示为蓝色带下划线
2.访问过的链接显示为紫色带下划线
3.点击链接时，链接显示为红色带下划线

链接标签的属性：

href=“url”，url为链接的地址
target="_blank"，定义链接以何种方式打开
id属性，创建一个HTML文档书签，可以链接跳转到文档的指定位置

创建电子电子邮件链接：

<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>

HTML头部

<head>标签，包含了所有的头部标签元素，在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

<head>标签内可以嵌套的标签有：<title>、<base>、<meta>、<link>、<style>、<script>

<title>标签定义文档的标题
- 浏览器工具栏的标题
- 网页被收藏时显示的标题
- 在搜索引擎结果页面的标题

<title>文档标题</title>

<base>标签描述了基本的链接地址/链接目标，作为HTML文档中所有链接标签的默认链接和默认打开方式。

<base href="http://www.runoob.com/images/" target="_blank">

<link>标签定义了文档于外部资源之间的关系

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

<style>标签定义了HTML文档的样式（CSS）

<style type="text/css">
	body {background-color:yellow}
	p {color:blue}
</style>

<script>标签用于加载脚本文件（JS）

<script type="text/javascript">

</script>

<meta>标签描述了一些基本的元数据，网页描述、关键词、作者等

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

网页关键词：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

网页描述：

<meta name="description" content="免费 Web & 编程 教程">

网页作者：

<meta name="author" content="osmundZ">

每30秒刷新当前页面：

<meta http-equiv="refresh" content="30">

HTMLCSS

CSS是用于渲染HTML元素标签的样式。

CSS在HTML中的使用方式：

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件（最好的方式）

HTML图像

图像标签：<img>

<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">

图像标签的属性：

src属性：图像来源，存储图像的位置
alt属性：图像无法显示时的替代文本
width/height：图像宽/高
title属性：鼠标放在图像上时显示的文本

HTML表格

表格标签：<table>、<tr>、<td>、<th>、<caption>、<colgroup>、<col>、<thead>、<tbody>、<tfoot>

<table border="1">
	<caption>表格</caption>
	<tr>
		<th>Header1</th>
		<th>Header2</th>
	</tr>
	<tr>
		<td>Data1</td>
		<td>Data2</td>
	</tr>
</table>

HTML列表

无序列表：<ul>、<li>
有序列表：<ol>、<li>
自定义列表：<dl>、<dt>、<dd>

HTML区块

HTML元素可以分为块级元素和内联元素，块级元素会以新行来开始（和结束），而内联元素则不会。

<div>为块级元素，没有特别的含义，用于嵌套其他HTML元素，当作一个容器来使用，便于页面布局和设置样式。

<span>为内联元素，也没有什么特别的含义，用作文本的容器，便于为部分文本设置样式。

HTML布局

使用<div>元素

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
	<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
	<b>菜单</b><br>HTML<br>CSS<br>JavaScript
</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>

</div>

使用<table>元素

<table width="500" border="0">
	<tr>
		<td colspan="2" style="background-color:#FFA500;">
			<h1>主要的网页标题</h1>
		</td>
	</tr>

	<tr>
		<td style="background-color:#FFD700;width:100px;">
			<b>菜单</b><br>
			HTML<br>
			CSS<br>
			JavaScript
		</td>
		<td style="background-color:#eeeeee;height:200px;width:400px;">
			内容在这里</td>
	</tr>

	<tr>
		<td colspan="2" style="background-color:#FFA500;text-align:center;">
			版权 © runoob.com</td>
	</tr>
</table>

这样的布局方法，现在基本上不会用了，一般都使用CSS样式来进行布局。

HTML表单

表单标签：<form>

表单–输入元素

文本输入：<input type="text">
密码输入：<input type="password">

单选按钮：

<form>
	<input type="radio" name="sex" value="male">Male<br>
	<input type="radio" name="sex" value="female">Female
</form>

复选框：

<form>
	<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
	<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

提交按钮：

<form name="input" action="html_form_action.php" method="get">
	Username: <input type="text" name="user">
	<input type="submit" value="Submit">
</form>

表单元素：

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义了表单的密钥对生成器字段
<output>	定义一个计算结果

HTML框架

框架标签：<iframe>

通过框架标签，你可以在一个页面中嵌入更多的页面。

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

框架标签的属性：

frameborder 属性，是否显示边框
src属性，目标链接

HTML颜色

颜色表示法：

十六进制：#000000
RGB：rgb(0,0,0)
颜色名：red

HTML脚本

脚本，即JavaScript。脚本使得HTML页面具有更强的动态和交互性。

脚本标签：<script>

<script>
	document.write("Hello World!");
</script>

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

HTML URL

URL：统一资源定位器。

Web浏览器通过URL从Web服务器请求页面。一个标准的URL：
scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称