HTMl标签

最新推荐文章于 2023-04-28 07:17:26 发布

**瑱

最新推荐文章于 2023-04-28 07:17:26 发布

阅读量169

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/CDZAllier/article/details/99676810

版权

HTML/CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

html标签

根据出现方式分为：

双标签：<标签名属性名=“属性值”>内容</标签名>

单标签：<标签名属性=“值”/>

最基本标签（html中标签也称为元素）

<html>
    <!--头部标签-->
	<head>
		<title>标题标签</title>
	</head>
    <!--内容标签-->
	<body>
    
	</body>
</html>

原标签：<meta charset="utf-8"/> 字符集（解决乱码）

<h1>标题标签</h1>：h1-h6,默认字体，默认加粗，默认左对齐，独占一行（注：独占一行的特性有align的属性）

标签嵌套原则：独占一行的元素嵌套不独占一行的元素

字体颜色设置color:(web的三原色（rgb）)

1. 十六进制（0-f）

表示1：#0-f(6位)，共有16的6次方种颜色

表示2：#ffbbee(可简写成#fbe)也就是3对可以简写成一个

2. 英文单词：（2万多种）

3. RGB表示法：rgb(0-255,0-255,0-255) 代有256的三次方多种颜色

斜体标签：

<i></i>

<em></em>加强语气的作用（推荐使用），搜索引擎当关键字使用，而上者则不是

加粗标签：

<b></b>

<strong></strong> 推荐使用，同上

横线标签：<hr/>

换行标签：<br/>

注：学完css后，hr与br,最好不要出现

属性：

align对齐值：center,left ,right

表格标签(只用于数据展示时，不要用于页面布局)

table：定义一个表格

tr：定义行

td：定义单元格

th：列头（thead）

tbody：表身，tfooter：列尾

caption：表格标题

<table border="1" cellspacing="" cellpadding="">
    	<!--表格标题一定放在table标签里面-->
    	<caption align="center">表格标题</caption>
    	<tr>
    		<th>行标题1自动加粗</th>
    		<th>行标题2</th>
    	</tr>
    	<tr>
    		<td>Data</td>
    		<td>Data</td>
    	</tr>
    </table>

属性：

table：border边框大小，cellspacing单元格间距（单元格之间的间隙），cellpadding单元边界与内容间距，

合并（td）：colspan跨列（左右），rowspan跨行（上下）——都含自己行或列

width宽度（只设置列td），height高度（只设置行tr）——（以像素为单位），bgcolor背景颜色

form表单标签（用于采集用户输入的信息）

<form name="" action="#" method="post">

</form>

属性：

name表单名

action提交到哪里（服务器，程序处理，servlet）

method提交方式（post,get）

post:数据重要，提交方式安全，速度慢

get:将提交方式显示出来（不安全，最多容纳下3000多个字符），速度快

注：请求方式共有6种，form表单只有这两种（并归纳为同步请求），另四种在Ajax里（为异步请求）

什么时候用get （在删除，查看时）；post（在增加，修改时）

注释：

是HTML的注释标签,使用 < 和 > 是符合HTML标签语法规则的。

/* */是CSS的注释标签

/* */（注释代码块）、//（注释单行）是JS的注释标签。

input常用标签及属性值：

属性：

type：（输入框的类型，默认text,普通文本）

name:(必须有，相对于后台来说)

password(密码框)

raido（单选按钮）

checkbox(复选框，设置默认选项：checked="checked')

file(文件)

注：如果想定义点击内容便可以触发input

<input type="text" name="username" value=""><label for="id名">内容</label></input>
<!--这里是点击内容二字也可以触发input-->

按钮：

按钮	名称	默认值
button	普通按钮	无
submit	提交按钮	提交
reset	重置按钮	重置

注：通过设置value值来改变按钮上的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>	
	</head>
	<body>
		<form name="myform" action="#" method="post">
			<!--提交的是value的值（这里可以写一个默认值），type是类型。text表示文本域-->
			<p>
				用户：<input type="text"  name="text" value="" />
			</p>
			<!--password表示密码域-->
			<p>
				密码：<input type="password"  name="password" value="" />
			</p>
			<!--radio单选按钮，这里的name表示同一属性，必须一样-->
			<p>
				性别：<input type="radio"  name="sex" value="男" />男
				<input type="radio"  name="sex" value="女" />女
			</p>
			<!--checkbox多选按钮，这里的name表示不同属性，不一样-->
			<p>
				爱好：<input type="checkbox"  name="like1" value="玩" />玩
				<input type="checkbox"  name="like2" value="不玩" />不玩
				<input type="checkbox"  name="like3" value="走" />走
				<input type="checkbox"  name="like4" value="不走" />不走
			</p>
			<!--下拉列表:selected="selected"是设置为默认项-->
			<p>
				证件：<select name="select">
					<option selected="selected">身份证</option>
					<option>学生证</option>
				</select>
			</p>
			<!--文件按钮-->
			<p>
				证件上传：<input type="file"  name="f" value="" />
			</p>
			<!--文本域，属性：cols宽度，rows高度-->
			<p>
				备注：<textarea cols="20" rows="20"></textarea>
			</p>
			<p>
				<input type="submit"  name="text" value="提交" />
				<input type="reset"  name="text" value="重置" />
				<input type="button"  name="text" value="按钮" />
			</p>
			
		</form>
	</body>
</html>

注： 什么时候用文域与什么时候用文本框：

<button>按钮</button>

type只有三个属性值（默认值无，并写在中间，并且也可以实现，提交，重置，默认按钮的三个属性值）

例：

超连接标签：

必须有属性：href="跳转路径"

<a href="连接到的地址"></a>

target="_blank" 设置连接跳转打开方式（这里是打开新窗口，也是默认的方式）

当我们跳转的页面无法回到之前页面就用"_blank" 打开新窗口

插入图片标签：

不独占一行（却有align属性：其作用是设置图片周围文字的环绕方式，文本四周围绕：middle）

<img src="图片地址"/>

必有alt属性：图片损坏或加载失败（用提示性文本代替）

有时候必须加上width height(占自己的位置，不影响其它资源排版，)

注： src: img javascript frame (同步加载，没有该引用就没有内容)

href: a link (异步加载，没有该引用，就没有样式，有内容)

锚点：

作用：可以快速定位（一般用在导航栏上）

目标点：<a name="goto">内容</a>

所有标签都可以表示为目标点，但是要把name设置成id的属性值

触发点：

同一页面上的触发点：<a href="#goto">回到顶部</a> ,这里的#goto 与上面name名或id名一样

不两只页面上的触发点：<a href= "目标所在页面 / #name名或id名">回到顶部</a>

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p name="goto">内容1</p>
		<p>内容2</p>
		...
		<p>内容40</p>
		<a href="index.html/#goto">回到顶部</a>
	</body>
</html>

有序列表：（ol自带一个盒子，是有样式的）

<ol style="padding-left: 25px;">
    <li></li>
    <li></li>
    <li></li>
</ol>

符号列表：

<ul style="padding-left: 25px;">
    <li></li>
    <li></li>
    <li></li>
</ul>

上标：<sup></sup>

下标：<sub></sub>

**瑱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTMl标签

html标签根据出现方式分为：双标签：<标签名属性名=“属性值”>内容</标签名>单标签：<标签名属性=“值”/>最基本标签（html中标签也称为元素）<html>  <head> <title>标题标签</title> </head...
复制链接

扫一扫

专栏目录