HTML5

最新推荐文章于 2023-01-21 16:39:26 发布

S。南

最新推荐文章于 2023-01-21 16:39:26 发布

阅读量214

点赞数

文章标签： html

本文链接：https://blog.csdn.net/nan_s/article/details/111416234

版权

HTML

前言
一、HTML常用标签？
标签的分类

前言

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。。

一、HTML常用标签？

1、双标签

成对出现的标签

<标签名></标签名>

1. 标题标签

	<h1 align="center">一号标题</h1> 
	<h2 align="right">二号标题</h2> 
	<h3 align="left">三号标题</h3> 
	<h4>四号标题</h4>
 	<h5>五号标题</h5>
  	<h6>六号标题</h6>

网页中，存在6级标题，值越大字越小
align标题的属性，它有left/right/center,居左/居右/居中

2.字体标签

	<!-- 网页中，可以通过font来设置字体 --> 
	<font size="7" color="red" face="楷体"> 今天心情还可以! </font>

color字体颜色
face字体样式
size字体大小
特殊文字的样式

   	加粗 <b> <strong> 
   	下划线 <u> 
   	斜体 <i> <em> <cite> 
   	删除线 <del> <strike> 
   	上角标 <sup> 
   	下角标 <sub>

3.列表标签
①无序列表（unordered list）

	<!-- li是ul的子标签 ul>li*5 按下tab --> 
	<ul type="disc"> 
		<li>桔子</li> 
		<li>西瓜</li>
	 	<li>梨子</li> 
	 	<li>猕猴桃</li>
	  	<li>芒果</li>
	</ul>

无序列表它是一对父子标签，它是通过 ul 和 li 组成完成的
里面每一项都是通过li来完成标记的
通过type设置前面的列表的样式 disc 实心小圆点 circle 空心小圆点 square 小正方形

②有序列表（ordered list）

	<!-- ol>li*4 --> 
	<ol type="I"> 
		<li>呵呵</li> 
		<li>哈哈</li>
		<li>嘻嘻</li>
	 	<li>haha</li>
	</ol>

③自定义列表

	<dl>
		<dt>男生</dt>
	 		<dd>周杰伦</dd> 
	 		<dd>王力宏</dd>
	  	<dt>女生</dt>
	   		<dd>蔡依林</dd>
	    	<dd>孙俪</dd>
	</dl>

④扩展列表

	<details>
		 <summary>男生</summary>
		 <ol>
		 	<li>AA</li> 
		 	<li>BB</li> 
		 	<li>CC</li> 
		 </ol> 
	</details> 
	<details>
	<summary>女生</summary> 
		<ol>
			<li>DD</li>
			<li>EE</li>
			<li>GG</li>
		</ol>
	</details>

4.链接标签

	<a target="_blank" shape="rect" href="//cnews.chinadaily.com.cn/a/202004/27/WS5ea63a85a310eec9c72b5815.html"> 文字</a>

a标签里面放文字或者图片，在这个文字或者图片上添加链接
href 用户点击以后要跳转的网站
target 指定打开网页的位置

	target="_blank" 在新的网页打开 
	target="_self" 当前网页打开 
	target="iframe的名称" 
	<!--iframe的name值：这个值比较特殊，它可以把某一个网址在iframe中打开--> 
	target="_parent" 在父级页面中打开
	target="_top" 直接跳过所有的iframe，在最外层打开网页

5.段落标签

	<p> 
	《登楼寄王卿》
	 踏阁攀林恨不同，楚云沧海思无穷。
	  数家砧杵秋山下，一郡荆榛寒雨中。 
	</p> 
	<!-- pre标签会保留样式 -->
	<pre> 
				《登楼寄王卿》 
	踏阁攀林恨不同，楚云沧海思无穷。 
	数家砧杵秋山下，一郡荆榛寒雨中。
	 </pre>

6.表格标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<!-- table>tr*3>td*2 按下tab -->
		<!-- border="1" 显示边框 -->
		<!-- cellpadding 单元格中内容和边框之间的距离 -->
		<!-- cellspacing 单元格与单元格之间的距离 -->
		<table border="1" width="300px" height="200px" 
		style="text-align: center;" 
		align="center"
		cellpadding="20px"
		cellspacing="0px">
		
		<!-- caption 表格标题 -->
		<caption>开课情况表</caption>
		
		<!-- colgroup 列组 -->
		<colgroup>
			<!-- bgcolor 设置背景颜色 -->
			<col bgcolor="pink" width="50px" />
			<col bgcolor="skyblue" />
		</colgroup>
		
		<tr>
			<td>编号</td>  <!-- td无变化 -->
			<th>课程</th>  <!-- th居中加粗 -->
		</tr>
		
			<tr align="right">
				<td>1-1</td>
				<td>1-2</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
			</tr>
		</table>
	</body>
</html>

合并行列

	<table align="center">
			<tr>
				<!-- 合并列 -->
				<!-- 需求：1-1和1-2合并成1列 colspan -->
				<!-- 步骤1：保留第一列，删除其他列 -->
				<!-- 步骤2：在第一列的开始标签上添加colspan="2" -->
				<td colspan="2">1-1</td>
				<!-- 合并行 -->
				<!-- 需求：1-3和2-2合并成1行 rowspan -->
				<!-- 步骤1：保留第一行，删除其他行 -->
				<!-- 步骤2：在第一列的开始标签上添加rowspan="2" -->
				<td rowspan="2">1-3</td>
			</tr>
			<tr>
				<td rowspan="2">2-1</td>
				<td>2-2</td>
			</tr>
			<tr>
				<td colspan="2">3-2</td>
			</tr>
		</table>

2、单标签

1.hr分割线

<hr width="300px" align="right" size="7" color="deeppink">

width 线的宽度
align 对齐方式
size 粗细
color 颜色
2.换行标签

<br/>

3.图片标签

<img border="图片的边框" vspace="距离上面的距离" hspace="距离左边的距离" 
title="鼠标放在图片上的时候的显示的文字" 
src="图片地址" width="100px" height="100px" 
alt="图片加载失败显示的文字"/>

3、表单标签

1.input标签

<input type="类型" 
	   id="页面中唯一标识" 
	   name="主要为后端开发的时候与前端进行交互使用" 
	   placeholder="占位符属性，用户输入了内容占位符不显示" 
	   autofocus="自动获取焦点，一个表单里面，只能有1个元素使用 这个属性，不能多个元素一起使用"/>

<1> type=“text” 文本输入框

<label for="uname">用户名</label> 
<input type="text" id="uname" name="uname" value="" placeholder="请输入用户名"/>

<2> type=“password” 密码输入框

<label for="upwd">密&nbsp;&nbsp;码</label>
<input type="password" id="upwd" name="upwd" value="" placeholder="请输入密码"/>

<3> type=“number” 数字

<label for="uage">年&nbsp;&nbsp;龄</label> 
<input type="number" id="uage" name="uage" value="10" min="1" max="120" step="20"/>
<!--value当前值 step每次增加的或者减少的值 min max-->

<4> type=“date” 日期

<label for="udate">日&nbsp;&nbsp;期</label> 
<input type="date" name="udate" id="udate" value="2020-04-27" />

<5> type=“time” 时间

<label for="utime">时&nbsp;&nbsp;间</label> 
<input type="time" name="utime" id="utime" value="15:59" />

<6> type=“datetime-local” 日期与时间

<label for="udate_time">日期时间</label> 
<input type="datetime-local" name="udate_time" id="udate_time" />

<7> type=“range” 滑块

<label for="ustar">评&nbsp;&nbsp;分</label>
<input type="range" name="ustar" id="ustar" min="0" max="100" step="10" />

<8> type=“radio” 单选按钮

<label for="usex">性&nbsp;&nbsp;别</label>
<input type="radio" name="usex" id="m" value="男" checked="checked"/> 
<label for="m">男</label> 
<input type="radio" name="usex" id="f" value="女" /> 
<label for="f">女</label> 
<!-- 一组单选按钮，name属性值必须一致 --> 
<!-- label标签一般和单选标签结合一起使用 --> 
<!-- checked="checked" 默认要选中1个 --> 
<!-- label标签上for写的单选按钮id的值 -->

<9> type=“checkbox” 多选按钮

<label for="uhobby">爱&nbsp;&nbsp;好</label>
<input type="checkbox" name="uhobby" id="reading" value="看书" checked="checked"/> 
<label for="reading">看书</label> 
<input type="checkbox" name="uhobby" id="sleeping" value="睡觉" /> 
<label for="sleeping">睡觉</label>
<input type="checkbox" name="uhobby" id="game" value="游戏" checked="checked"/> 
<label for="game">游戏</label>

<10> type=“button” 普通按钮

<input type="button" id="btn1" value="按钮1" />

<11> type=“image” 图片按钮，提交表单

<input type="image" src="img/logo.png" width="100px" height="60px"/>

<12> type=“submit” 提交按钮

<input type="submit" id="btn3" value="提交" />

<13> type=“file” 文件上传组件

<label for="uPhoto">头像</label> 
<input type="file" name="uPhoto" id="uPhoto" />

2.下拉选项框

<select>
<option>湖北省</option>		                          	<option>河北省</option>
<option>山西省</option>
<option>河南省</option>
<option>湖南省</option>
</select>
<select>
<option>武汉市</option>
<option>潜江市</option>
<option>宜昌市</option>
<option>黄冈市</option>
</select>

3.文本域

<label for="goodsInfo">商品详情</label> 
<textarea id="goodsInfo" name="goodsInfo" rows="10" cols="50"> 显示内容 </textarea>

标签的分类

1、块级元素div

特点： 
① 独占1行，可以自动换行 多个块状元素标签写在一起，默认排列方式为从上至下 
② 默认宽度100%，高度为0，可以设置width和height 
③ 可以设置 垂直方向的margin(外边距),padding，border 
④ 可以使用margin:0 auto;居中对齐 上下 左右 
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、 <form>

2、行内元素span

特点： 
1 不会独占1行，标签在1行内显示 只有在内容超过窗体的宽度时，才会换行 
2 宽度与高度由内容决定，不能设置宽高 
3 不能设置margin-top 和 margin-bottom ,左右有效果 
	padding都有效果,会撑大空间; 
	box-sizing:border-box;无效,因为该属性针对盒模型 
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

3、行内块元素

1. 不会自动换行 
2.能够设置宽高
3.默认排列方式为从左到右 
4.可以使用text-align:center使内容相对于父盒子水平居中对齐,例如img标签,可以使用 text-align:center,相对父盒子居中对齐.,margin:0 auto无效 
5.水平排列,但所有元素默认会有1个空格的间隙,因为元素之间在html中书写有回车换行,浏览器 解析会将其解析成一个空格. 

(inline-block）就是同时具备行内元素、块状元素的特点，代码display:inline-block就是将 元素设置为内联块状元素。
<img>、<input>标签就是这种内联块状标签。 
inline-block 元素特点： 
1、和其他元素都在一行上； 
2、元素的高度、宽度、行高以及顶和底边距都可设置

S。南

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5

HTML前言一、HTML常用标签？1、双标签2、单标签3、表单标签标签的分类1、块级元素div2、行内元素span3、行内块元素前言HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能
复制链接

扫一扫