html（二）基础标签

最新推荐文章于 2024-06-27 20:35:09 发布

黄丫丫001

最新推荐文章于 2024-06-27 20:35:09 发布

阅读量139

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_40504108/article/details/101387469

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1，标题标签 h

<h1>到<h6>  从大到小   <h1>。。。</h1>

h1比较重要，一般给logo使用

2，段落标签 p

 <p>段落</p>

3，水平线标签 hr

 <hr   />   单标签

4，换行标签 br

 <br   />   单标签

5，div 和 span标签
没有语义，用于布局使用，双标签

6，文本格式化标签

                       XHTML推荐使用
<b>	粗体文本</b>       <strong>	粗体文本</b>
<i>	定义斜体字</i>     <em>	定义着重文字</em>
<s>	加删除线</s>       <del>	加删除线</del>
<u>	加下划线</u>       <ins>	加下划线</ins>
<small>	定义小号字
<sub>	定义下标字
<sup>	定义上标字

更多文本格式化标签请查看HTML文本格式化

7，图像标签 img

 <img src="图片的url"  alt="替换文字" title="鼠标悬停显示"/>   单标签

当图片无法显示时，则显示alt属性的值
当鼠标悬停在图片上，则显示title属性的值

8，链接标签 a

 <a href="链接地址"> 链接  </a>   href属性必须存在

链接地址需要以http://开头
a标签可以用于锚点定位（点击某个关键词快速跳转到页面位置）

 <a href="#pos"> 锚点定位  </a>      href="#id"
 <h2 id="pos">跳转位置</h2>

更多链接标签用法请查看HTML链接

9，base标签

<head>
 <base href="链接地址"  target="_blank" />  
 </head>

为页面上的所有的相对链接规定默认 URL 或默认目标。
在一个文档中，最多能使用一个 base元素，且必须位于 head 元素内部。
如果使用了base标签，则必须具备 href或者 target或者两个属性都具备。

10，特殊字符标签
空格符：&nbsp； (一个符号后面接一个分号)
更多特殊字符标签请查看HTML特殊字符

11，注释标签

<!-- 这是一个注释 -->

12，列表标签

<ul> //无序列表 ul里面只能放li
		<li></li>
		<li></li>
</ul>

<ol start="50">  //有序列表 start表示从50开始计数，不写则默认从1开始
  <li>Coffee</li>   //50
  <li>Tea</li>      //51
  <li>Milk</li>     //52
</ol>

<dl>                       //自定义列表   以 <dl> 标签开始。
<dt>自定义列表项1</dt>       //自定义列表项以 <dt> 开始
<dd>自定义列表项的定义1</dd>  //自定义列表项的定义以 <dd> 开始
<dd>自定义列表项的定义2</dd> 
......
<dt>自定义列表项2</dt>   
<dd>自定义列表项的定义1</dd>  
<dd>自定义列表项的定义2</dd>
</dl>  //自定义通常用于名词解释和描述

13，表格标签

	<table border="1px;">  //一个三行三列的表格 边框为1px
	
	<thead> //表示表格表头
	    <tr>
        	<th>Header 1</th>  //表格的表头使用 <th> 标签进行定义。
        	<th>Header 2</th>
        	<th>Header 3</th>
        </tr>
    </thead>
    <tbody>  //表示表格主体
		<tr>  //一个tr表示一行
			<td rowspan="2">11</td>  //一个td表示一行中的一格
			<td>12</td>             // rowspan="2"表示此单元格跨2行
			<td>13</td>
		</tr>
		<tr>
			<td colspan="2">22</td> //colspan="2"表示此单元格跨2列
		</tr>
	</tbody>
	</table>

效果图：
在这里插入图片描述
14，表单标签

	<form action="提交的url" method="提交方式post或get" name="表单名称">
	<label for="name">名字:</label><input type="text" name="" id="name"><br>  //单行文本输入框
	<label>密码:<input type="password" name=""></label>  //密码输入框
	性别:<input type="radio" name="sex" value="man">男  //单选框 name要一致
		 <input type="radio" name="sex" value="women">女 <br>
	爱好:<input type="checkbox" name="hobby" checked="checked">唱歌
		 <input type="checkbox" name="hobby">跳舞  //多选框 checkrd属性表示默认选中
		 <input type="checkbox" name="hobby">画画
		 <input type="checkbox" name="hobby">读书 <br>
	备注:<textarea rows="10" cols="22"></textarea><br>  //文本域  多行输入
		 <input type="button" name="" value="无用的按钮"> //按钮
		 <input type="submit" name="" value="提交按钮">  //提交按钮
		 <input type="reset" name="" value="重置按钮"><br> //重置按钮
		 <input type="image" src="img.png" alt="Submit" style="width: 40px;"><br>  //图片提交形式
		 <input type="file"  multiple="multiple" accept=".doc,.jpg"> //文件上传
	下拉菜单:<select>
		 	<option>请选择选项</option>
		 	<option>选项1</option>
		 	<option>选项2</option>
		 	<option>选项3</option>
		 </select>
		 <button>按钮</button>
	</form>

效果图：
在这里插入图片描述
lable标签用于绑定表单元素，点击lable标签时被绑定的元素就会获得输入焦点
lable内有多个表单元素时，可用for="元素id"进行关联
datalist标签定义选项列表

<input type="text" name="" list="sel">
<datalist id="sel">
		 	<option>111</option>
		 	<option>112</option>
		 	<option>113</option>
		 	<option>221</option>
		 	<option>222</option>
		 	<option>223</option>
</datalist>

效果图：
在这里插入图片描述
html基础标签大致这些，更多html标签请查阅HTML标签列表