HTML常用标签以及重要标签的注解

最新推荐文章于 2023-02-14 11:23:27 发布

尽欢Sir

最新推荐文章于 2023-02-14 11:23:27 发布

阅读量728

点赞数 5

文章标签： html

本文链接：https://blog.csdn.net/m0_51724241/article/details/118066342

版权

HTML常用标签以及重要标签的注解

标签	描述
<!–…-->	定义注释。
<!DOCTYPE>	定义文档类型。
<a>	定义超链接。
<address>	定义地址元素。
<b>	定义粗体文本。
<big>	不支持。定义大号文本。
<body>	定义 body 元素。
<br>	插入换行符。
<button>	定义按钮。
<canvas>	定义图形。
<caption>	定义表格标题。
<center>	定义居中的文本。
<code>	定义计算机代码文本。
<col>	定义表格列的属性。
<del>	定义删除文本。
<dir>	定义目录列表。
<font>	定义文本的字体、尺寸和颜色。
<footer>	定义 section 或 page 的页脚。
<form>	定义表单。
<h1> to <h6>	定义标题 1 到标题 6。
<head>	定义关于文档的信息。
<header>	定义 section 或 page 的页眉。
<hr>	定义水平线。
<html>	定义 html 文档。
<i>	定义斜体文本。
<img>	定义图像。
<input>	定义输入域。
<ins>	定义插入文本。
<label>	定义表单控件的标注。
<object>	定义嵌入对象。
<ol>	定义有序列表。
<optgroup>	定义选项组。
<option>	定义下拉列表中的选项。
<output>	定义输出的一些类型。
<p>	定义段落。
<pre>	定义预格式化文本。
<select>	定义可选列表。
<small>	定义小号文本。
<source>	定义媒介源。
<span>	定义文档中的 section。
<strike>	定义加删除线的文本。
<strong>	定义强调文本。
<style>	定义样式定义。
<sub>	定义上标文本。
<sup>	定义下标文本。
<table>	定义表格。
<tbody>	定义表格的主体。
<td>	定义表格单元。
<textarea>	定义 textarea。
<tfoot>	定义表格的脚注。
<th>	定义表头。
<thead>	定义表头。
<time>	定义日期/时间。
<title>	定义文档的标题。
<tr>	定义表格行。
<tt>	定义打字机文本。
<u>	定义下划线文本。
<ul>	定义无序列表。
<video>	定义视频。

重要标签的注解

br

<br>		独目标签,表示换行

hr

<hr>		独目标签，代表横线
	属性：color_设置横线颜色	
		 width_设置在屏幕占比
栗子：
	<hr color = "red" width = "50%">	代表一个横线，颜色为red，再评，在屏幕的占比为50%

pre

<pre>		定义预留样式的文本
栗子：
        <pre>
                for(int i = 0; i < 10; i++){
                    System.out.println("第"+"i = " +"次！");
                }
        </pre>

font

<font><\font>可以设置文本的字体，颜色，以及尺寸
    
栗子：
	<font color = "color" size = "30"></font>

实体符号

'实体符号特点是：以&开始，以;结束

空格

&nbsp;

大于号

&lt;

小于号

&gt;

table

表格的属性：
				border="1px" 设置表格的边框为1像素的宽度
				宽度 width 
				高度 height 
				背景色 bgcolor 可以设置表格的背景颜色
				对齐方式 aline：
							 left 
                                right 
                                top 
                                texttop 
                                middle 
                                absmiddle 
                                baseline 
                                bottom 
                                absbottom 
				
				表头 <thead></thead>
					th 表头数据 默认 加粗 居中
				表体 <tbody> </tbody>
					行 <tr></tr>代表一行数据
					列 <th></th>代表一列数据
						行合并 rowspan  会删除“下面的”单元格
						列合并 colspan

表格实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
		表格的属性：
				<tr></tr>代表一行数据
				<th></th>代表一列数据
				border="1px" 设置表格的边框为1像素的宽度
				width 宽度
				height 高度
				bgcolor 可以设置表格的背景颜色
		align设置对齐方式
		th 表头默认 加粗 居中
		rowspan 行合并 会删除“下面的”单元格
		colspan 列合并
				
		-->
		<table   bgcolor="aliceblue" border="1px" width="40%"  align="center">
			
			<tr>
				<th bgcolor="red">第一列</th>
				<th>第二列</th>
				<th>第三列</th>
			</tr>
			
			<tr align="center">							<!--设置整行的属性为居中-->
				<td font bgcolor="aqua">第一行的第一列</td>	
				<td>第一行的第二列</td>
				<td>第一行的第三列</td>
			</tr>
			
			<tr>
				<td align="center">第二行的第一列</td>	<!--设置单列的属性为居中-->
				<td>第二行的第二列</td>
				<td  bgcolor="coral"rowspan="2">第三列的二、三两行合并了</td>
			</tr>
			
			<tr>
				<td  bgcolor="chartreuse"colspan="2" align="center">第三行的第一、二列合并了</td>
			</tr>
			
		</table>
	</body>
</html>

bgcolor & background

背景颜色以及背景图片
bgcolor="color" 
background="文件路径"

a

超链接
	href 链接的目标 URL
        	<a href="http://www.baidu.com"></a>
        链接到本地的某个资源
       	 	<a href="本地文件的相对路径或绝对路径"></a>
        图片做超链接
        	<a href=""><img/></a>
       <target属性：在何处打开目标 URL
            _blank : 新窗口
            _self ： 当前窗口（默认就是这种方式。）
            _top ： 顶级窗口
            _parent ： 父窗口></target属性：在何处打开目标>
栗子：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接实例</title>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>		
		<br>
		<a href="本地URL">本地</a>
		<a href="https://www.google.cn//">
			<img src="本地img路径" width="x_px"/>
		</a>
        <a href="https://www.google.cn//" target="_self">
			<img src="本地img路径" width="x_px"/>
		</a>		
	</body>
</html>

列表

	列表 
		type属性
			有序列表
				1、A、a、I、i、I（阿拉伯数字）
			无序列表
				circle、square、disc

ol


<!--有序列表-->
		<ol type="I">
			<li>水果
				<ol type="a">
					<li>苹果</li>
					<li>香蕉</li>
					<li>橘子</li>
				</ol>
			</li>
			<li>饮料
				<ol>
					<li>矿泉水</li>
                      <li>可乐</li>
				</ol>
			</li>
			<li>美食</li>
		</ol>

ul

<!--无序列表-->
		<ul type="circle">
			<li>中国
				<ul type="square">
					<li>河南省
						<ul type="disc">
							<li>南阳市</li>
							<li>信阳市</li>
							<li>濮阳市</li>
							<li>安阳市</li>
						</ul>
					</li>
					<li>河北省</li>
					<li>山东省</li>
				</ul>
			</li>
			<li>俄罗斯</li>
			<li>越南</li>
		</ul>

input

<type属性：
	button 按钮
    checkbox 
    date 
    datetime 
    datetime-local 
    email 
    file 文件上传专用
    hidden 隐藏对用户不可见但实际存在
    image
    month 
    number 
    password 密码框
    radio 
    range 
    reset 
    submit 
    text 	文本框 maxlength 设置文本框中可输入的字符数量
    time 
    url 
    week
         ></type属性：>
<value属性：
	对于按钮、重置按钮和确认按钮：定义按钮上的文本。

    对于图像按钮：定义传递向某个脚本的此域的符号结果。

    对于复选框和单选按钮：定义 input 元素被点击时的结果。

    对于隐藏域、密码域以及文本域：定义元素的默认值。

    注释：不能与 type="file" 一同使用。

    注释：与 type="checkbox" 和 type="radio" 一同使用时，此元素是必需的。></value属性：>

form（***）

表单用来收集用户信息。表单展示给用户之后，用户填写表单，通过点击提交按钮提交数据给服务器端。
<--form的属性
	<action属性：
				action属性用来定义一个 URL。当点击提交按钮时，向这个 URL 发送数据。></action属性：>
	<method属性：
				用于向 action URL 发送数据的 HTTP 方法。默认是 get。
				get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
				post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。></method属性：>
	<target属性：
			 	在何处打开目标 URL。></target属性：>
	<readonly和disabled
		相同点：都是只读不能修改。
			readonly可以提交数据给服务器
			disabled数据不会提交给服务器（即使有name属性）></readonly和disabled>
画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的功能。
	对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。

码字不易，少男叹气，进阶的小尽欢，希望可以帮助到像我一样的小白们，
最后，如果您觉得本篇有用，请点赞支持，您的赞扬就是我最大的动力！

尽欢Sir

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML常用标签以及重要标签的注解

HTML常用标签以及重要标签的注解标签描述<!–…-->定义注释。<!DOCTYPE>定义文档类型。<a>定义超链接。<address>定义地址元素。<b>定义粗体文本。<big>不支持。定义大号文本。<body>定义 body 元素。<br>插入换行符。<button>定义按钮。<canvas>
复制链接

扫一扫