HTML标签

小小张进阶

已于 2023-04-01 17:36:19 修改

阅读量142

点赞数 1

分类专栏：前端文章标签： html 前端

于 2023-03-31 16:37:28 首次发布

本文链接：https://blog.csdn.net/m0_49169688/article/details/129876604

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

查标签网站：https://www.w3school.com.cn/html/html_jianjie.asp

1.标签-语法规范：

(1).标签分类：

1）单标签：<br />或<br> (新语法中，“/”可没有)

2）双标签（成对）：<html></html>

(2).标签的关系：

包含，并列

2.HTML骨架标签

<html>                               
	<head>                           
		<title> csdn </title>          
	</head>
	<body>
			主体内容
	</body>
</html>

3.自动生成的标签

meta标签可以作为一些声明，或者网页适配，关键字，描述，或者请求等等，放在head里

<!DOCTYPE html>   <!--（1）文档类型声明，html的版本，处于第一行代码-->
<html lang="en">  <!--（2）语言language为English-->
	<head>
     <!--字符集-->
    <meta charset="UTF-8"> 
   <!-- 网页适配 --> 
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
    <!-- 关键字 -->
    <meta name="keywords" content="独坐静亭">
    <!-- 描述 -->
    <meta name="description" content="这是我的页面">
    <!-- 请求：如刷新-->
    <!-- <meta http-equiv="refresh" content="3,http://www.baidu.com"> -->
    <title>案例1</title>
	</head>
  <body>
    
  </body>
</html>

4.标题标签

标签	特点
`<h1></h1>`一级标签， `<h2></h2>`二级标签 …… `<h6></h6>`六级标签	文字加粗；一个标题独占一行；字号大小依次减

标签

特点

<h1></h1>一级标签，

<h2></h2>二级标签

……

<h6></h6>六级标签

文字加粗；一个标题独占一行；字号大小依次减

5.段落标签

标签	特点
`<p></p>`	1.一个段落中，文本随浏览器窗口的大小自动换行 2.段与段之间有空隙

标签

特点

<p></p>

1.一个段落中，文本随浏览器窗口的大小自动换行

2.段与段之间有空隙

6.换行标签-强制换行

标签	特点
`<br />` 或`<br>` (缩写break)	1.单标签 2.只换行，无空隙（区别于<p>段与段之间有空隙

标签

特点

<br /> 或<br>

(缩写break)

1.单标签

2.只换行，无空隙（区别于<p>段与段之间有空隙

7.文本格式化标签-（突出重要性）

语义	标签	说明
加粗	`<strong></strong>` 或 `<b></b>`	前者语义更强烈
斜体	`<em></em>` 或 `<i></i>`	前者语义更强烈
下划线	`<ins></ins> 或` `<u></u>`	前者语义更强烈
删除线	`<del></del> 或` `<s></s>`	前者语义更强烈

8.容器标签

无语义，盒子，装内容，用于布局

标签	区别	特点
`<div></div>`	分割，分区	一个div独占一行，“大盒子”
`<span></span>`	跨度，跨距	一行可放多个span，“小盒子”

9.图像标签

给图片添加“水平居中”样式：给<img/>添加无效，放入父标签中，给父标签添加 text-align 属性

标签	属性			注意事项
`<img src="URL" />` 或 `<img src="" >`	src	路径	必写属性！！！	(1)属性之间“空格”隔开，属性不分顺序（属性的格式：键值对） (2)使用图片的前提：图片放入html网页文件的文件夹中 (3)宽度和高度，设置其一（防止图片变形）
	alt	文本	图片不能显示时，显示的文本说明
	title	文本	鼠标放至图片上，悬浮显示的文字
	width	像素px (px可省略)	图像的宽度
	height	px	图像的高度
	border	px	图像的边框粗细，一般在css中设定

<img src="./pic.png" alt="图片" title="壁纸" width="200" height="100" border="2">

10.图片路径

(1).相对路径：

以引用文件所在位置为参考(img 相对于 HTML文件的位置)

相对路径的分类	符号
同一级路径	./ 或不写，表示当前目录
下一级路径	/
上一级路径	../

<!-- 同一级路径 -->
<img src="./tool.png" alt="tool" width="1000"/> <br/>
<img src="tool.png" alt="tool" width="1000"/><br>

<!-- 下一级路径 -->
<img src="images/wechat.png" alt="wrong"> <br>

<!-- 上一级路径 -->
<img src="../images/src.png"/>

(2).绝对路径：

通常从盘符开始的路径

<!-- 本地--电脑中绝对位置  (注意\，相对路径/)----很少有！-->
<img src="D:\web\img\logo.jpg" alt="显示失败"/>
<!-- 线上--完整网络地址  (网页中右击图片-复制图片地址--粘贴) -->
<img src="http://www.itcast.cn/img/logo.jpg" alt="wrong" />

11.链接标签

注：此标签自带样式，所以实际开发中，都需要给链接单独指定样式

给<body>指定样式，内部<a>标签样式不起作用

标签	属性	作用
`<a href="">文本或图像</a>`	href	链接的url地址，必须属性，href超链接功能
target	链接页面的打开方式： _self:默认值，当前页面打开 -blank:在新窗口中打开

标签

属性

作用

<a href="">文本或图像</a>

href

链接的url地址，必须属性，href超链接功能

target

链接页面的打开方式：

_self:默认值，当前页面打开

-blank:在新窗口中打开

链接的分类：

外部链接，内部链接，空链接，下载链接，网页元素链接，锚点链接

<!-- 外部链接 href:="网址" -->
<h2><a href="https://www.tencent.com/zh-cn/" target="_blank">腾讯官网</a></h2>
   
<!-- 内部链接 href:="文件的相对路径" -->
<h2><a href="html/sum1.html" target="_blank">综合案例1</a></h2>
   
<!-- 空链接--"#"未确定链接的页面，打开当前页面 -->
<h2><a href="#" target="_blank"></a></h2>
   
<!-- 下载链接--文件.exe或压缩包.zip(相对路径 )，点击后-会下载此文件-->
<h2><a href="images/hhh.png.zip" ></a></h2>
<h2><a href="document/text.doc" ></a></h2>
   
<!-- 网页元素链接--文本/图像/音频/视频等均可添加超链接----同文字超链接-->
<h2><a href="https://www.baidu.com/" target="_blank" ><img src="images/baidu.png" alt="加载失败"></a></h2>

<!-- 锚点链接--作用：快速定位到当前页面的指定内容/位置-->
<!-- #+id的名字，就是一个锚点  不仅可以链接当前页面，也可以链接到其他的页面 -->
<!-- 使用方法:1.href="#名字"  (名字自己起)  2.目标位置标签--添加属性：id=名字 -->
<h2 id="top">顶部！！！！！</h2>
<h2><a href="#intro">个人简介</a></h2>
<h2 id="intro">圣诞是怎样由来的</h2> 
<h2><a href="#top">返回顶部</a></h2>
<!-- 锚点链接到其他页面 -->
<a href="html/sum1.html#old" target="_blank">链接到其他页面old</a>
<a href="html/sum1.html#tips" target="_blank">链接到其他页面tips</a>

12.注释标签

(1)标签：

(2)快捷键：ctrl+/

13.特殊字符

注：常用：空格，<，>

<!--least than;greater than;-->
<h2>在网页中显示&lt; p &gt;</h2>

<h2>在网页中显示“B M W”</h2>
&nbsp;&nbsp; B &nbsp;&nbsp;&nbsp; M &nbsp;&nbsp;&nbsp; W  &nbsp;

14.表格标签---显示数据

VScode中快捷键：(tr>td*4)*4 这个快捷键，创建4行4列表格

多行编辑的快捷键：shift + alt+鼠标点选

1.标签

标签	意义	说明/注
`<table></table>`	表格
`<thead></thead>`	表格结构标签--表格头部区域	内部必含<tr>标签，一般位于第一行
`<tbody></tbody>`	表格结构标签--表格主体区域	用于放 “数据本体”
`<th></th>` (table head)	表头(第一行单元格)标签	位于表格第一行,字体加粗，单元格内文字居中
`<tr></tr>` (table row)	一行
`<td></td>` (table data)	一列

2.属性：（不常用，多在CSS中设置）

<table>内的属性：

属性名	值	描述
align	left，center，right	表格相对于周围元素的对齐方式
border	1 或 ""	表格单元是否有边框，默认无边框""
cellpadding	……px (px可省略)	单元格边沿与内容的距离，默认1px 通常设为0px
cellspacing	……px	单元格之间的空白距离，默认2px 通常设为0px
width	……px 或 %	表格的宽度
height	……px 或 %	表格的高度

<!-- bordercolor:边框颜色，heignt和width表格高宽，align:表格对其方式：center、left、rignt
    cellspacing：边框和边框的距离，cellpadding：边框和内容的距离，background：表格背景，bgcolor：表格背景颜色 -->
<table border="10" bordercolor="red" width="400" heignt="200" align="center" cellspacing="10" cellpadding="10">
  <thead>
  	<tr>
      <th>name</th>
      <th>gender</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Liudehua</td>
      <td>male</td>
      <td>55</td>
      ……
    </tr>
    ……
  </tbody>
  <tfoot>
    (tr>td*4)*4-Enter
  </tfoot>
</table>

3.合并单元格

(1)合并方式：

跨行合并：rowspan="合并单元格的个数" ,例：<td rowspan="2">粒粒</td>

跨列合并：colspan="合并单元格的个数"，例：<td colspan="3">粒粒</td>

(2)目标单元格（写合并代码的单元格）

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格……

(3)步骤(三部曲)：

确定跨行or跨列-->目标单元格_写代码-->删除多余单元格

15.列表标签---布局页面

1.无序列表(常用-重点！)

列表：<ul></ul>

列表项：<li></li>

<h2>列表总称</h2>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ………………
</ul>
<!-- type 图标样式 -->
<ul type="circle">
	<li>GTA5</li>
	<li>地平线4</li>
	<li type="disc">生化危机</li>
	<li type="square">赛博朋克</li>
	<li>镜之边缘</li>
</ul>

注意事项：

<ul>中只能嵌套<li>，其他文字/标签非法

列表项自带样式（CSS设置，通常去掉·）

各列表项之间，无顺序级别之分，并列的

<li> 与</li>之间相当于一个容器，可容纳所有元素

2.有序列表

列表：<ol></ol>

列表项：<li></li>

<h2>列表总称</h2>
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ………………
</ol>
<!--start表示开始的位置； 
    reversed倒序，倒序小于0则出现负数； 
		type有：A、a、1、Ⅰ-->
<ol type="A"  start="3" reversed>  
  <li>刺客信条</li>
   <li>消逝的光芒</li>
   <li>极品飞车</li>
   <li>使命召唤</li>
    <li>看门狗</li>
</ol>

注意事项：

<ol>中只能嵌套<li>，其他文字/标签非法

列表项自带样式（CSS设置）

各列表项之间，有顺序之分

<li> 与</li>之间相当于一个容器，可容纳所有元素

3.自定义列表(重点！)

列表：<dl></dl>

名词：<dt></dt>

描述：<dd></dd>

<dl>
  <dt>加入我们</dt>
  <dd>校园招聘</dd>
  <dd>社会招聘</dd>
  <dd>国际招聘</dd>

  <dt>联系我们</dt>
  <dd>客户服务</dd>
  <dd>合作洽谈</dd>
  <dd>腾讯采购</dd>
  <dd>媒体及投资者</dd>
</dl>

注意事项：

<dl>中只能嵌套<dt><dd>，其他文字/标签非法

列表项前无符号（CSS设置）

<dt>和<dd>没有数量限制，通常一个<dt>对应多个<dd>

<dt>和<dd>之间相当于一个容器，可容纳所有元素

16.表单标签--注册页面

表单用于向服务器传输数据

表单构成：表单域(包含所有的区域)，表单控件(表单元素)，提示信息

1.表单域：

标签	属性	属性值	作用
表单域： `<form action="" method="" name="">` 各种表单控件 `</form>`	action	url地址	指定接收并处理表单数据的服务器程序的url地址
method	提交方式： get，post	表单数据的提交方式
name	表单域名称	指定表单的名称，以区分同一页面中的多个表单

标签

属性

属性值

作用

表单域：

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

各种表单控件

</form>

action

url地址

指定接收并处理表单数据的服务器程序的url地址

method

提交方式：

get，post

表单数据的提交方式

name

表单域名称

指定表单的名称，以区分同一页面中的多个表单

2.表单控件（表单元素）

快捷键：input:text ，input:password …回车

（1）input 输入控件：<input type="" name="" value="" checked="" maxlength=""/>

属性	属性值	说明
type=""	text	单行输入文本框，默认宽度20个字符
	password	密码字段，字符被掩码
	radio	单选按钮(name属性-实现单选功能)
	checkbox	复选框
	button	可点击按钮(结合javascript启动脚本)
	file	定义输入字段和“浏览按钮，供文件上传
	hidden	定义隐藏的输入字段
	image	图像形式的提交按钮
	submit	提交按钮，表单数据提交到服务器
	reset	重置按钮，清除表单所有数据
name="" 每个表单元素必有属性	文本 (用户自定义)	表单元素的名字单选按钮，复选按钮的name必相同
value="" 每个表单元素必有属性	文本 (用户自定义)	输入框/按钮内默认内容（提示性文字）如：请输入名字单选，复选按钮的value必不同(传给后台)
checked=""	checked	首次加载时，默认选中的复选框
maxlength=""	正整数	输入字符的最大长度

label标签

<label>标签为input元素定义标注

作用：绑定一个表单元素，增加用户体验。

效果：当点击<label></label>内的文本时，浏览器自动将焦点转移/选中到对应的文本框内/按钮上

❗️<label for="">文本</label> 和表单元素的<input id="" /> 属性值必须相同

<!-- action  提交数据的地址
    method  提交数据的方式
    target  在哪里查看结果
    name    表单域名称
-->
<!-- 快捷键：input:text 回车 -->
<form action="#" method="post" name="sign in"  >

  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" value="请输入姓名" maxlength="50"><br>        
    
  <!-- pattern:对输入的内容做校验，比如数字0-9，2-5位  maxlength是输入的最大值 -->
  <label for="pwd">密码：</label>
  <input type="password" name="pwd" value="" id="pwd" pattern="[0-9]{2,8}">  <br>
  
  性别：
  <input type="radio" name="sex" value="" id="male">  <label for="male">男</label>
  <input type="radio" name="sex" value="" id="female">  <label for="female">女</label><br>
  
  爱好：
  <input type="checkbox" id="swim" name="hobby" value="">   <label for="swim">游泳</label> 
  <input type="checkbox" id="basketball" name="hobby" value="">   <label for="basketball">打篮球</label>   
  <input type="checkbox" id="run" name="hobby" value="">   <label for="run">跑步</label> <br>
 	
  <!-- button按钮 -->
	<input type="button" value="click">
	<!-- 提交按钮 -->
	<input type="submit" value="保存">
	<!-- 重置按钮 -->
	<input type="reset" value="重置">
	<!-- 图片提交按钮 -->
	<input type="image" src="/images/wechat.png" alt="加载失败" height="30">
	<!-- 上传文件 -->
	<input type="file" name="file" id="img"><br>
	<!-- 隐藏文本 -->
	<input type="hidden" name="hidden">hidden

</form>

（2）select下拉列表控件：<select></select>

注意：<select>中至少含一个<option>

<option selected=""></option> ,

属性：selected="selected"当前项为默认选中项

<form>
籍贯：
    <select name="country" id="home">
<!--       默认选中--上海 -->
        <option value="beijing">北京</option>
        <option value="sahnghai" selected="selected">上海</option>
        <option value="xian">西安</option>            
      </select>
</form>

（3）textarea文本域控件：<textarea rows="" cols="">请留言</textarea>

用于：输入较多文本到情况（留言）

注意：textarea标签没有value属性，是双标签，默认值写在标签中间，而input中的text是有value属性的，默认值为value属性值

属性	值
行： rows	正整数
列： cols	正整

<!-- 多行文本输入控件 -->
留言：
<textarea name="advice" id="advice1" cols="30" rows="10">请留下你宝贵的建议</textarea>

小小张进阶

关注

1
点赞
踩
4

收藏

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

html标签的初步学习
复制链接

扫一扫

专栏目录

HTML标签

1.标签-语法规范：

2.HTML骨架标签

3.自动生成的标签

4.标题标签

5.段落标签

6.换行标签-强制换行

7.文本格式化标签-（突出重要性）

8.容器标签

9.图像标签

10.图片路径

11.链接标签

12.注释标签

13.特殊字符

14.表格标签---显示数据

15.列表标签---布局页面

16.表单标签--注册页面

“相关推荐”对你有帮助么？