HTML常用的标签
1.HTML的解释标签：1).meta标签(网页配置)
2).title标签(设置网页标题）
3).link(导入外部文件)
4). style(设置内部样式)
5). script(添加内部js代码)
2.标签语法：
<标签名 属性名1=“属性值1” 属性名2=“属性值2” >标签内容</标签名>
<标签名 属性名1=“属性值1” 属性名2=“属性值2” > 或者 <标签名 属性名1=“属性值1” 属性名2=“属性值2” />
3.固定格式：
<!DOCTYPE html>
<html>
<head>
<!-- 设置网页文本编码方式 ：设置成utf-8，中文不会乱码-->
<meta charset="utf-8">
<!-- 设置网页标题 -->
<title>百度一下，你就知道</title>
<!-- link标签的使用
1）设置网页图标:
rel属性 - icon
href属性 - 图片地址
2）导入外部样式:
rel属性 - stylesheet
href属性 - css文件地址
-->
<link rel="icon" href="img/猫头鹰.png">
</head>
<body>
你好，世界
</body>
</html>
4.文字相关标签和相关符号内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.标题标签：h1~h6 -->
<h1>1. 标题标签</h1>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
...
<h6>六级标题 </h6>
<h1>「央视快评」坚持第九版落实二十条，抓实抓细疫情防控工作</h1>
<!-- 2.段落标签：p
需要在网页上显示一段文字就使用一个段落标签，默认情况段落会独立占一行
-->
<h1>2. 段落标签</h1>
<p>央视网消息：近期，全国本土疫情呈现传播范围广、传播链条多、疫情波及面扩大的严峻复杂态势。
中国疾控中心有关专家11月26日就第九版防控方案和优化调整疫情防控二十条措施做了进一步解读。</p>
<p>当前新冠病毒持续演变，奥密克戎变异株隐匿性更强，传播速度更快。部分地区的疫情扩散速度加快，
防控难度不断加大。中国疾控中心相关专家表示，在疫情发现初期，及时发现管控社会面的感染者、
准确判定管控密切接触者、及时精确划定并公布风险区，这些都是抢占疫情防控先机的关键。</p>
<!-- 3.行内文字标签：span
多段文字内容在一行显示
-->
<h1>3. 普通行内文字标签</h1>
<span>2022-11-27 21:28</span>
<span>北京</span>
<span>|</span>
<span>央视国际网络有限公司官方帐号</span>
<!-- 4.具有特殊功能的行内文字标签：b、strong、i、em
b - 文字加粗
strong - 文字加粗
i - 文字倾斜
em - 文字倾斜
-->
<h1>4. 加粗和倾斜文字</h1>
<p><b>中国疾控中心传防处研究员 王丽萍：</b>根据我们第九版的
防控方案和二十条的优化措施，要求我们各地在疫情处置中间，
在指挥部的整个指导下，我们的流调组、转运组、核酸检
测组要进行有效协作，信息沟通共享，
<strong>黄金24小时</strong>就是为了抢占
疫情防控的先机。</p>
<p>当前一些地方在落实防控政策中存在“<i>一封了之</i>”和“一放了
之”两种<b><i>错误的倾向</i></b>，国务院联防
联控机制要求坚决整治“<em>层层加码</em>”问题，并针对二十条优
化措施实施过程中出现的问题进行整改落实。</p>
<!-- 4.换行和空格
在html代码中之间按换行和空格在网页中无效，如果在网页上需要换行和空格的效果需要使用特定的标签和符号
换行：<br>
空格： （空一个空格）、 （空一个像素）
-->
<p>hello <br><br><br>world!</p>
<br>
<p>你好世界！</p>
<p>
  床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。
</p>
</body>
</html>
5.图片和超链接的内容
(1)图片的解释： 1. 图片：img
src属性：提供图片地址(既可以是本地图片地址，也可以是网页图片地址)
alt属性：图片加载失败的时候显示的提示信息
title属性：图片标题（鼠标悬停在图片上的时候才会显示）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="top">目录：</h1>
<a href="#p1">图片</a>
<a href="#p2">超链接</a>
<a href="#p3">一人之下</a>
<hr>
<h1 id="p1">第一章：图片</h1>
<h1>1. 图片标签</h1>
<!-- 1)img标签显示本地图片 -->
<img src="img/luffy.jpg">
<br>
<img src="img/猫头鹰.png">
<br>
<!-- 2)img标签显示网页图片 -->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
<br>
<img title="佐罗" src="https://img0.baidu.com/it/u=441143381,2281784016&fm=253&fmt=auto&app=138&f=PNG?w=500&h=750">
<!-- 3)加载失败提示信息 -->
<br>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf8292.png" alt="百度">
<br>
<br>
<!-- 4)图片标题 -->
<img src="img/luffy.jpg" title="路飞">
<br>
<hr>
(2)超链接的解释：2. 超链接： a
1.标签内容：决定可见可点击的部分
2.href属性：决定目标地址
a.网页地址 - 点击打开指定的网页
b.本地html文件地址 - 点击打开自己写的网页
c.id选择器 - 页面内定位
d.空串 - 重新加载页面
3)target属性：设置跳转方式（_blank - 在新的窗口中打开新的页面；_self - 默认值，在当前窗口中打开新的页面）
<!-- 文字超链接 -->
<a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>
<!-- 1.图片超链接 -->
<a href="https://www.baidu.com" target="_blank">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</a>
<!-- 2.图片和文字混合超链接 -->
<a href="https://www.baidu.com/s?wd=2022%E5%8D%A1%E5%A1%94%E5%B0%94%E4%B8%96%E7%95%8C%E6%9D%AF&rsv_dl=Worldcup_PC_2022_index_tips">
<img src="img/猫头鹰.png" alt="">
<span>直击赛事现场</span>
<img src="img/luffy.jpg" alt="">
</a>
<br>
<br>
<!-- 3.本地页面跳转 -->
<a href="02文字相关标签和相关符号.html" target="_blank">第一章 文字相关标签</a>
<br>
<a href="01head中的标签.html" target="_blank">第二章：head中的标签</a>
<hr>
<h3 id="p3">第三章：一人之下</h3>
<img src="https://img2.baidu.com/it/u=3318578886,1105072164&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082" alt="">
<br>
<a href="#top">回到顶部</a>
<a href="">刷新</a>
</body>
</html>
6.列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>第一次月考考试成绩排名：</h2>
<!--------- 1. 有序列表：ol、li ------------>
<!--
ol标签 - 整个列表对应的容器
li标签 - 列表中每个元素对应的标签
-->
<ol>
<li>小明</li>
<li>张三</li>
<li>李四</li>
<li>老王</li>
</ol>
<hr>
<h2>已经拿到驾照的学生：</h2>
<!--------- 2. 无序列表 ------------>
<!--
ul标签 - 整个列表对应的容器
li标签 - 列表中每个元素对应的标签
-->
<ul>
<li>小红</li>
<li>李华</li>
<li>小花</li>
</ul>
<hr>
<h2>千锋成都校区所有的学科</h2>
<ul>
<li>
<p>Python<b>数据分析</b></p>
<img src="https://img2.baidu.com/it/u=712550803,4064578802&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=448" alt="">
<p>数据分析是指用适当的统计分析方法对收集来的大量数据进行分析，将它们加以汇总和理解并消化，以求最大化地开发数据的功能，
发挥数据的作用。数据分析是为了提取有用信息和形成结论而对数据加以详细研究和概括总结的过程。
数据分析的数学基础在20世纪早期就已...</p>
<h4>分为4个阶段学习：</h4>
<ol>
<li>语言基础</li>
<li>爬虫</li>
<li>Excel</li>
<li>数据库</li>
</ol>
</li>
<li>
<p>Java后端开发</p>
<img src="https://img2.baidu.com/it/u=2209690810,3591215071&fm=253&fmt=auto&app=120&f=JPEG?w=690&h=388" alt="">
<p>Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。
Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进...</p>
</li>
</ul>
</body>
</html>
7.input标签和from标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- input标签会因为type属性值的不同，表现出完全不同的功能 -->
<!-------1.text(默认)：普通文本输入框
1)value属性: 输入框内容
2)placeholder属性：输入提示信息
3)maxlength属性：限制输入的最大长度
4)name属性：定义输入数据的意义（主要用于数据提交）
--------->
<h2>输入账号和密码</h2>
<label for="i1">账号:</label>
<input type="text" value="张三" placeholder="请输入账号" maxlength="10" name="username" id="i1">
<br><br>
<!-------2.password：密码输入框 --------->
<label for="i2">密码:</label>
<input type="password" value="123456" placeholder="请输入密码" maxlength="12" name="密码" id="i2">
<!-------3.单选按钮(radio)、复选按钮
1)name属性：同一组选项的name属性值必须一致
2)checked属性：添加checked可以让按钮处于选中状态
--------->
<br><br>
<h2>选择性别：</h2>
<input type="radio" name="gender" id="g1" checked><label for="g1">男</label>
<input type="radio" name="gender" id="g2"><label for="g2">女</label>
<br><br>
<h2>兴趣爱好：</h2>
<input type="checkbox" name="interest" id="in1"><label for="in1">篮球</label>
<input type="checkbox" name="interest"><label for="">足球</label>
<input type="checkbox" name="interest" checked><label for="">爬山</label>
<input type="checkbox" name="interest"><label for="">看电影</label>
<hr>
<!-----------4.普通文字按钮(button)
value属性：属性值就是按钮上显示的文字
------------>
<br>
<input type="button" value="登录">
<input type="button" value="注册">
<!----------5. button标签 ------------->
<button>取消</button>
<br><br>
<button style="background-color: rgba(0, 0, 0, 0);border: none;">
<img src="img/相机.png" alt="">
</button>
<hr>
<input type="color">
<input type="date">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!---------- form标签
form标签又叫表单标签，它是一个容器，单独使用没有任何意义。
这个容器中一般放表单相关标签用于用户信息收集：input、select、textarea。
在form标签可以通过input标签来提供重置按钮和提高按钮，对表单中的内容进行整体的重置和数据提交操作
---------->
<form action="" method="GET">
<h3>姓名：</h3>
<input type="text" name="姓名" id="">
<h3>生日：</h3>
<input type="date" name="生日">
<h3>性别：</h3>
<input type="radio" checked name="gender"><label for="">男</label>
<input type="radio" name="gender" id=""><label for="">女</label>
<br><br>
<!-- 如果希望重置按钮有效，必须将重置按钮和需要重置内容放到同一个form标签中 -->
<input type="reset">
<input type="submit">
</form>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
