HTML 标签

最新推荐文章于 2024-09-12 15:14:04 发布

DT31

最新推荐文章于 2024-09-12 15:14:04 发布

阅读量993

点赞数 8

分类专栏： HTML 文章标签： html5 前端

本文链接：https://blog.csdn.net/weixin_62789590/article/details/140360336

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1 标题标签

主要用于一些新闻页面的标题。

2 段落标签

p标签用来定义段落，具有自动换行的效果。一般用于文章的内容包裹段落

3 换行标签

br可插入一个简单的换行符。

4 水平线标签

hr标签在 HTML 页面中创建一条水平线。

<hr>

5 媒体标签

<img alt="" src="图片路径" width="" height="" />

alt属性：当图片无法显示的时候（路径错误）就会显示；
src属性：指定图片的路径；
width属性：指定图片的宽度；
height属性：指定图片的高度；

web中的路径问题：

【绝对路径】

绝对路径以协议（http://、https://、file://）或者以“/”作为前缀，例：百度一下，你就知道全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。http://www.baidu.com

file://C:/Users/X/Desktop/images/2.png

【相对路径】

相对路径以文件本身为参照路径进行定位

./ 代表当前路径

../ 代表上一层路径

../../ 代表上一层的上一层路径

6 超链接标签

<a href="http://www.baidu.com" target="" >百度一下，你就知道</a>

表格行列合并：

【注意】因为表格中的单元格构成了表格，所以表格中的行列合并都是作用于单元格上的：

取值规则：合并n行，取值为n，同时依次删除与当前行同级的n-1个tr下的一个单元格；

三行两列的表格，第一行中单元格合并，第二行中第一列进行行合并：

href属性：指示超链接需要链接的位置；

target属性：指示该超链接以什么样的方式进行跳转：

(1) _blank：在新的标签页打开；

(2) _self：在当前标签页中打开，默认取值；

7 列表标签

7.1 无须列表

7.2 有序列表

在网页中表示一组有顺序之分的列表，一般用例如排行榜功能。

热歌榜<br>
    <ol>
        <li>笼</li>
        <li>听悲伤的情歌</li>
        <li>Letting Go</li>
    </ol>

7.3 自定义列表

	<!-- 
        dl:自定义列表的整体，用来包裹dt/dd
        dt:自定义列表的主题
        dd:自定义列表的针对主题的内容，会默认显示缩进效果   
        注意：dl标签中只允许包含dt/dd标签，dt/dd标签可以包含任意内容
     -->
    <dl>
        <dt>
            热门产品
        </dt>
        <dd>云服务器</dd>
        <dd>弹性公网IP</dd>
        <dd>云备份</dd>
    </dl>

注意：dl标签中只允许包含dt/dd标签，dt/dd标签可以包含任意内容

8 表格标签

一般来说，定义表格之后需要指定宽高，使用border指定表格的边框：

<table width="200" height="200" border="1" >
	<tr>
		<th>表头1</th>
		<th>表头2</th>
</tr>
	<tr>
		<td>数据1</td>
		<td>数据2</td>
</tr>
</table>

table：定义一个表格，简单的 HTML 表格由 table 元素以及一个或多个 tr、th 、td 组成；
tr：定义表格中的行，表格行中包含一个或多个th或td元素；
th：定义表头的单元格；
td：定义普通的单元格；

表格行列合并：

【注意】因为表格中的单元格构成了表格，所以表格中的行列合并都是作用于单元格上的：

【注意】因为表格中的单元格构成了表格，所以表格中的行列合并都是作用于单元格上的：

1.colspan：合并列/在列上面合并

取值规则：合并n列，取值为n，同时删除当前tr下的n-1个单元格；

2.rowspan：合并行/在行上面合并

取值规则：合并n行，取值为n，同时依次删除与当前行同级的n-1个tr下的一个单元格；

三行两列的表格，第一行中单元格合并，第二行中第一列进行行合并：

<table width="200" height="200" border="1" >
	<tr>
		<td colspan="2">数据1</td>
	</tr>
	<tr>
		<td rospan="2">数据1</td>
		<td>数据2</td>
	</tr>
	<tr>
		<td>数据2</td>
	</tr>
</table>

9 表单标签

<form action="" method="">
	表单元素
</form>

form标签：用于定义表单；
action属性：定义表单中的数据提交的位置；
method属性：定义表单数据的提交方式：

(1) get：通过url提交数据，有大小限制，不安全；

(2) post：数据不会出现在地址栏上，无大小限制，安全；

9.1 表单元素input

input标签可以通过type属性值的不同，展示不同效果:

9.2 表单元素textarea

<!--
	rows属性：规定 textarea 的可见高度，以行数计算

	cols属性：规定 textarea 的可见宽度，以平均字符数计算

	多行文本域可以被拖动，如何解决？ style="resize:none;"
-->
<textarea cols="" rows="" name="">
</textarea>

9.3 表单元素select

<select name="x">
	<option value="提交的值">显示的值</option> 
</select>

option元素定义下拉列表中的一个选项，位于 select 元素内部；
<option>标签可以在不带有任何属性的情况下使用，默认value是标记中的文本。但是您通常需要使用value属性，此属性会指定出被送往服务器的内容；
请与select元素配合使用此标签，否则这个标签是没有意义的；

注意：<option> 与 <option/> 之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。如果没有value属性，则将两个标签之间的值发送给服务器；

	<form action="https://www.baidu.com/" method="post">
		用户名：<input type="text" name="username"/><br/>
		密码：<input type="password" name="password"/><br/>
		性别：<input type="radio" checked="checked" name="sex"> 男  <input type="radio" name="sex">女<br/>
		爱好:<input type="checkbox" name="hobbys"/>女
			<input type="checkbox" name="hobbys"/>男 <br/>
	     头像:<input type="file" name="icon"/><br/>
	     简介:<textarea rows="10" cols="100" name="intro"></textarea><br/>
	     下拉框：<select name="select">
	     		<option value="1">一</option>
	     		<option value="2">二</option>
	     		<option value="3">三</option>
	     		<option value="4">四</option>
	     </select><br/>
		&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
		<input type="submit" value="登陆"> <input type="reset" value="重置">
	
	</form>