HTML常用标签

最新推荐文章于 2024-06-01 23:46:19 发布

= * shmily

最新推荐文章于 2024-06-01 23:46:19 发布

阅读量344

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/weixin_46178009/article/details/105717218

版权

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Web标准的构成

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS
行为	行为指网页模型的定义及交互的编写，现阶段主要是Javascript

HTML语法规范

基本语法规范：

HTML标签是由尖括号包围的关键词，例如：
HTML标签通常是成对出现的，例如：和，我们称之为双标签。第一个是开始标签，后边一个是结束标签
有些特殊的标签必须是单个标签，例如：
，我们称之为单标签.

标签关系：

双标签关系可以分为两类：包含和并列
举例：

//包含关系，相当于父亲和孩子的关系
<head>
  <title>  </title>
</head>

//并列关系，相当于兄弟关系
<head> </head>
<body> </body>

基本结构标签

标签名	定义	说明
html	HTML标签	页面中最大的标签，我们称之为根标签
head	文档的头部	注意在head标签中我们必须要设置的标题标签是title
title	文档的标题	让页面拥有一个属于自己的网页标签
body	文档的主体	元素包含文档的所有内容，页面内容基本都是放在body里面的

举例：

<html>
	<head>
		<title>web前端</title>
	</head>
	<body>
	shmily 的前端代码
	</body>
</html>

运行结果：
web

标题标签

  <h1>一级标签</h1>
  ...
  <h6>      </h6>

段落标签

<p>段落标签</p>

换行标签

<br />此处为换行的内容

举例：

</head>
<body>
    <h1>肺炎</h1>
    <h4>新冠肺炎是新中国成立以来重大突发公共卫生事件</h4>
    <p>中央指导组成员、国家卫生健康委主任马晓伟：<br />这次新冠肺炎疫情是新中国成立以来，传播速度最快、感染范围最广、防控难度最大的重大突发公共卫生事件。</p>
    <h4>司法部回应全国多家监狱新冠肺炎感染事件</h4>
    <p>何平表示，司法部将按照国务院联防联控机制要求，严格执行相关法律法规，全力做好监狱疫情防控工作</p>
    <p>作者：shmily<br />2020年4月23日</p>
</body>

运行结果：
简单新闻

文本格式化标签

<body>
    <p>我是<strong>加粗</strong>文字</p>
    <p>我是<b>加粗</b>文字</p>
    <p>我是<em>斜体</em>文字</p>
    <p>我是<i>斜体</i>文字</p>
    <p>我是<del>删除线</del></p>
    <p>我是<s>删除线</s></p>
    <p>我是<ins>下划线</ins></p>
    <p>我是<u>下划线</u></p>
</body>
</html>

运行结果：
文本格式化标签
推荐用第一个标签，语义更加强烈

div标签

div标签用来布局，但是现在一行只能放一个div。相当于一个大盒子，下图所示就是一个div
div

span标签

一行上可以放置多个span。相当于一个小盒子
举例：

<body>
   <div>我是一个大盒子</div>
   <div>我是两个大盒子</div>
   <span>百度</span>
   <span>淘宝</span>
   <span>天猫</span>
</body>

运行结果：
布局标签

图像标签

src是标签的必须属性，他属于指定图像文件的路径和文件名
所谓属性：简单理解就是属于这个图像标签的特性

<body>
    <p>图像标签的使用：</p>
    <img src="img.jpeg"/>
</body>

图像标签的其他属性：

属性	属性值	说明
<src>	图片路径	必须属性
<alt>	文本	替换文本。图像不能显示的文字
<title>	文本	提示文本。鼠标放到图像上，显示的文字
<width>	像素	设置图像的宽度
<height>	像素	设置图像的高度
<border>	像素	设置图像的边框粗细

举例：

<body>
    <h4>图像标签的使用：</h4>
    <img src="img.jpeg"/>
    <h4>alt:替换文本，图像显示不出来的时候用文字替换</h4>
    <img src="img1.jpeg" alt="shmily"/>
    <h4>title:提示文本，鼠标放在图像上，显示的文本</h4>
    <img src="img.jpeg" alt="shmily" title="我是图像"/>
</body>

运行结果：
图片标签

<body>
    <h4>width:给图片设置宽度</h4>
    <img src="img.jpeg"  title="我是图像" width="500"/>
    <h4>height:给图片设置高度</h4>
    <img src="img.jpeg"  title="我是图像" height="100"/>
    <h4>border:给图片设置边框</h4>
    <img src="img.jpeg"  title="我是图像" width="500" border="15"/>

</body>

运行结果：

在这里插入图片描述

相对路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件的同一级img src=“baidu.gif”
下一级路径	/	图像文件位于HTML文件的同一级img src=“image/baidu.gif”
上一级路径	…/	图像文件位于HTML文件的同一级img src="…/baidu.gif"

绝对路径

<body>
    <img src="E:\相册\images\img.jpeg" />
    <img src="https://csdnimg.cn/feed/20200423/bb8e24713d67af32f82c5a4ffacd043f.jpg"/>
</body>

运行结果：
绝对路径

超链接

超链接分类：

外部链接：例如<a href=“http://www.baidu.com”>百度</a>
内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如：<a href =“index.html”>首页</a>
空链接：如果没有确定链接目标时，用#代替
下载链接：如果href里面的地址是一个文件或者压缩包，会下载这个文件
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频、视频等都可以添加超链接
锚点链接：点我们点击链接，可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为#名字的形式，如<a href ="#two">第二集</a>
找到目标位置标签，里面添加一个属性=刚才的名字，如：<h3 id=“two”>第二集介绍</h3>

链接的语法格式

<a href="跳转目标"target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，他就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

举例：

<body>
//外部链接
    <a href="http://www.qq.com">腾讯</a>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    //内部链接：网站内部之间的相互链接
     <a href="gongsijianjie.html">公司简介</a>
     //空链接
     <a href="#">公司地址</a>
     //下载链接
      <a href="img.rar">下载文件</a>
      //网页文件链接：如网页图片，音响，视频等
      <a href="http://www.qq.com"><img src="img.jepg"/></a>
      //意思就是点一下这个图片就能跳转到相应的网址上面
      //锚点链接
      <a href="#live">个人生活</a>
      //锚点链接中的目标链接
    <h3 id="live">个人生活</h3>
</body>

_blank表示在一个新的窗口打开这个超链接
_self表示在本个窗口里打开这个超链接

超链接

注释标签和特殊字符

注释标签里面的内容是给程序猿看的，这个代码是不执行不显示到页面中的

 <body>
 //快捷键是:ctrl+/
    <!-- 公司简介 -->
</body>

特殊字符

特殊字符	描述	字符代码
	空格符	&nbsp ;
<	大于号	&lt ;
>	小于号	&gt ;
&	和号	&amp ;
¥	人民币	&yen ;
©	版权	&copy ;
®	注册商标	&reg ;
°	摄氏度	&deg ;
±	正负号	&plusmn ;
×	乘号	&times ;
÷	除号	&divide ;
²	平方2（上标2）	&sup2 ;
³	立方3（上标3）	&sup3 ;

<body>
    <!-- 公司简介 -->
    讲&nbsp;&nbsp;究
    &lt;p&gt;是一个段落标签
</body>

运行结果：

表格标签

表格标签

<table></table>是用于定义表格的标签
<tr> </tr>标签用于定义表格中的行，必须嵌套在table标签中
<td> </td>用于定义表格中的单元格，必须嵌套在tr标签中
字母td指表格数据，即数据单元格的内容

举例：

<body>
    <table>
        <tr> <td>姓名</td> <td>性别</td> <td>学号</td></tr>
        <tr> <td>杨桐</td> <td>男</td> <td>22</td></tr>
        <tr> <td>老秦</td> <td>男</td> <td>24</td></tr>
    </table>  
</body>

运行结果：

表头单元格

<body>
    <h4>个人信息表</h4>
    <table>
        <tr> <th>姓名</th> <th>性别</th> <th>学号</th></tr>
        <tr> <td>杨桐</td> <td>男</td> <td>22</td></tr>
        <tr> <td>老秦</td> <td>男</td> <td>24</td></tr>
    </table>  
</body>

表格属性
属性要写在table里面去

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为"",表示没有表框
cellpadding	像素值	规定单元边与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
heigth	像素值或百分比	规定表格的高度

<body> 
    <table align="left" border="1" cellpadding="10" cellspacing="0" width="300" height="200">
        <tr> <th>姓名</th> <th>性别</th> <th>学号</th></tr>
        <tr> <td>杨桐</td> <td>男</td> <td>22</td></tr>
        <tr> <td>老秦</td> <td>男</td> <td>24</td></tr>
    </table>  
</body>

运行结果：
表格属性

表格结构标签

举例：

<table border="1" align="center" cellpadding="4" cellspacing="0">
        <thead><tr> 
                    <th>...</th> 
                    <th>...</th> 
               </tr>
        </thead>
         <tbody><tr> 
                    <td>...</td>
                </tr>
        </tbody>

合并单元格

合并单元格方式：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

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

合并单元格三部曲：
1.先确定是跨行还是跨列合并
2.找到目标单元格。写上合并方式=合并的单元格数量。比如：<td colspan=“2”></td>
3.删除多余的单元格

<body>
    <table border="1"  width=500 height=200 cellspacing=0>
        <tr>
            <td></td>
            <td colspan="2"></td>    
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>      
            <td></td>
            <td></td>
        </tr>
    </table>
    
</body>

合并单元格

列表

标签名	定义	说明
<ul></ul>	无序列表	里面只能包含li,没有顺序，使用较少。li 里面可以包含任何标签
<ol></ol>	有序列表	里面只能包含li,有顺序，使用相对较少。li 里面可以包含任何标签
<dl></dl>	自定义列表	里面只能包含dt和dd.dt和dd里面可以放任何标签

无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
<li></li>之间相当于一个容器，可以容纳所有元素

<body>
    <!-- 无序列表 -->
    <h4>你喜欢哪个明星</h4>
    <ul>
        <li>杨九郎</li>
        <li>秦霄贤</li>
        <li>张云雷</li>
        <li>张九良</li>
        <li>
            <p>123456</p>
        </li>
    </ul>
</body>

有序列表

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的
<li></li>之间相当于一个容器，可以容纳所有元素

<body>
    </ul>
    <!-- 有序列表 -->
    <h4>青春有你2排行榜</h4>
    <ol>
        <li>虞书欣</li>
        <li>乃万</li>
        <li>喻言</li>
    </ol>
</body>

有序列表默认前面有数字

自定义列表

<dl></dl>里面只能包含<dt>和</dd>
<dt>和</dd>个数没有限制，经常是一个<dt>对应多个</dd>

<body>
    <dl>
        <dt>帮助我们</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>
</body>

表单标签

表单标签
表单域

表单域是一个包含表元素的区域
<form>会把他范围内的表元素信息提交给服务器

语法结构：
<form action=“url地址” method=“提交方式” name=“表单域名称”>
各种表单元素控件
<form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

body>
    <form action="demo.php" method="POST" name="naem1">

    </form>
    
</body>

input

input表单元素：

在表单元素中<input>标签用于收集用户信息
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按键等）

语法结构：
<input type=“属性值”>

注意：
<input/>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型

type属性及其属性值的描述：

属性	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框。
file	定义输入字段和“浏览”按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清楚表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

举例：

<body>
    <form action="qwe.php" method="get">
         <!-- text 文本框用户可以在里面输入任何文字 -->
        用户名：<input type="text" name="username"  value="请输入用户名"><br>
        <!-- password是一个密码框，用户看不见 -->
        密码：<input type="password" name="psw"><br>
        手机号：<input type="text"><br>
        <!-- 普通按钮，后期结合js配合使用 -->
        <input type="button" value="获取短信验证码"><br>
        <!-- radio 单选按钮，可以实现多选一 -->
        <!-- name 是表单元素名字，这里性别单选按钮必须要有相同的名字才能实现多选一 -->
        性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"> <br>
         <!-- checkbox 复选按钮，可以实现多选多 -->
        爱好：吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby" checked="checked">打游戏<input type="checkbox" name="hobby"><br>
         <!-- 提交到我们的后台的按钮 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单的原始状态 -->
        <input type="reset" value="重新填写"><br>
        <!-- 文件域，使用场景上传文件使用 -->
        上传头像：<input type="file">

    </form>  
</body>

运行结果：
在这里插入图片描述

使用radio时，建议使用name，可以实现多选一的效果

input表单属性：

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段的字符的最大长度

<body>
    <form >
        用户名：<input type="text" name="username"  value="请输入用户名"><br>
        密码：<input type="password" name="psw" ><br>
        性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <br>

在这里插入图片描述

注意点：
name和value是每个表单都有的属性值，主要给后台人员使用
name表单元素的名字，要求单选框和复选框要有相同的name值
checked属性主要针对于单选框和复选框，主要作用一打开页面，就默认选中的某个元素
maxlength是用户可以在表单元素中输入的最大字符，一般使用较少

//单选按钮和复选框可以设置checked属性，当页面打开的时候就默认选中这个按钮

 性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"> <br>
 爱好：吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby" checked="checked">打游戏<input type="checkbox" name="hobby">

label标签

label标签的意思就是当我们点击男这个字的时候或者点击这个图片上的小人的时候就可以选中这个单选框，比radio范围更大一点
label
label标签的for属性应当与相关元素的ID属性相同

<input type="radio" id="man"><label for="man">男</label>
<input type="radio" id="human"><label for="human">女</label>

下拉表单

//selected="selected"表示默认的状态是河南
  籍贯：
    <select>
        <option selected="selected">河南</option>
        <option>北京</option>
        <option>北京</option>
        <option>上海</option>
    </select>

在这里插入图片描述

文本域标签

//cols="50"每行最多输入50个字符，rows="5"最多可以输入5列
        今日反馈：
        <textarea cols="50" rows="5">有问题请留言</textarea>

在这里插入图片描述

= * shmily

关注

0
点赞
踩
2

收藏

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

标题标签 <h1>一级标签</h1> ... <h6> </h6>段落标签<p>段落标签</p>换行标签<br />此处为换行的内容举例：</head><body> <h1>肺炎</h1> <h4>...
复制链接

扫一扫

专栏目录

HTML常用标签

Web标准的构成

HTML语法规范

标题标签

段落标签

换行标签

文本格式化标签

div标签

span标签

图像标签

相对路径

绝对路径

超链接

注释标签和特殊字符

表格标签

列表

表单标签

input

label标签

下拉表单

文本域标签

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