html常用标签

最新推荐文章于 2024-11-14 15:33:48 发布

qq_41068133

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量99

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_41068133/article/details/103899576

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

HTML知识点汇总

一、第一个html

<!DOCTYPE html>   <!--申明为HTML5-->
<html>   <!--页面根元素-->
    <head>
        <meta charset = "utf-8">  <!--指定页面的元数据-->
        <title>hello</title>   <!--文档的标题-->
        
        <link rel = "stylesheet" type="text/css" href="/mystyle.css"></link>
        <script type = "text/javascript" src = "/myscript.js"></script>
    </head>
    <body>   <!--页面内容-->
        <p>
            hello HTML5
        </p>
    </body>
</html>

二、元素

即以开始标签和结束（闭合）标签构成，有的标签无闭合便签，HTML文档由嵌套的元素构成。

如：

<!----------------------->
<!--有闭合标签-->
<p>haha<p/>
<!--无闭合标签-->
<br>
<!----------------------->

三、属性

属性为元素提供一些附加信息，以丰富元素的特性

如：

<!----------------------->
<!--id为p标签的属性-->
<P id = "pName">
    Hi!
</P>
<!----------------------->

适用于大多元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

四、标题、段落…

<!----------------------->
<h1>1号标题</h1>   <!--最大-->
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6号标题</h6>   <!--最小	-->

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

<hr>   <!--分割线-->

<br>   <!--空一行-->
<!----------------------->

五、文本格式化相关标签

<!----------------------->
<!--常用-->
<b>定义粗体文本</b>
<em>定义着重文本</em>
<i>定义斜体字</i>
<small>定义小号字</small>
<strong>定义着重语气</strong>
<sub>定义下标字</sub>
<ins>定义插入字</ins>
<del>定义删除字</del>

<!--偶尔用-->
<code>定义计算机代码</code>
<kbd>定义键盘码</kbd>
<samp>定义计算机代码样本</samp>
<var>定义变量</var>
<pre>定义预格式文本</pre>

<!--很少用-->
<abbr>定义缩写</abbr>
<address>定义地址</address>
<bdo>定义文字方向</bdo>
<blockquote>定义长的引用</blockquote>
<q>定义短的引用语</q>
<cite>定义引用、引证</cite>
<dfn>定义一个定义项目</dfn>
<!----------------------->

六、链接

target属性定义在何处显示，id属性定义唯一标签标识

<!----------------------->
<a href = "https://www.baidu.com">百度一下</a>
<!----------------------->

七、图像

<!----------------------->
<img src = "......" alt = "预备可替换文本" width = "50px" height = "50px"></img>
<!----------------------->

八、表格

<!----------------------->
<table border = 1>
    <tr>
    	<th>name</th>
        <th>sex</th>
    </tr>
    <tr>
    	<td>Bob</td>
        <td>男</td>
    </tr>
</table>
<!----------------------->

表格标签

标签	描述
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格单元
caption	定义表格标题
colgroup	定义表格列的组
col	定义用于表格列的属性
thead	定义表格的页眉
tbody	定义表格的主体
tfoot	定义表格的页脚

九、列表

<!----------------------->
<!--有序列表-->aa
<ul>
<li>aaaa</li>
<li>bbbb</li>
</ul>

<!--无序列表-->
<ol>
<li>dada</li>
<li>adaa</li>
</ol>

<!--自定义列表-->
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<!----------------------->

十、区块

<!----------------------->
<!--div定义了文档的区域，块级 (block-level)-->
<div>
    .....
</div>

<!--span用来组合文档中的行内元素， 内联元素(inline)-->
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p></span>
<!----------------------->

十一、表单

<!----------------------->
<!--type值text:文本，ridio:单选框，checkboxes:复选框，submit:按钮-->
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<!----------------------->

表单标签

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

十二、框架

<!----------------------->
<!--通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。-->
<!--frameborder 属性用于定义iframe表示是否显示边框。-->
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.baidu.com" target="iframe_a">百度一下</a></p>
<!----------------------->

十三、字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷