HTML常用标签
------------------head中的标签
------------------文字相关标签和相关符号
------------------图片和超链接
------------------列表标签
------------------input标签
------------------form标签
一、head中的标签
<!-- head中能使用的标签：meta标签（网页配置）、title 标签（设置网页标题）、link（导入外部文件）、style(设置内部格式)、script(添加内部js代码) -->
<!-- 标签语法
<标签名 属性名1="属性值1" 属性名2="属性值2">标签内容</标签名>
<标签名 属性名1="属性值1" 属性名2="属性值2"> 或者 <标签名 属性名1="属性值1" 属性名2="属性值2"/>
-->
<!DOCTYPE html>
<html>
<head>
<!-- 设置网页文本编码方式：设置成utf-8,中文不会乱码 -->
<!-- meta charset='utf-8'-->
<meta charset="utf-8">
<!-- 设置网页标题 -->
<title>百度一下，你就知道</title>
<!-- 设置网页图表
link标签的使用
1）设置网页图标
rel属性 - icon
href属性 - 图片地址
2）导入外部样式
rel属性 - stylesheet
href属性 - css文件地址
-->
<link rel="icon" href="img/c.jpg">
</head>
<body>
你好，世界！
</body>
</html>
二、文字相关标签和相关符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.标题标签：h1~h6 -->
<h1>1.标题标签</h1>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h1>个性化服务加速冰雪经济发展 培育扩大内需新引擎</h1>
<!-- 2.段落标签：p
需要在网页上显示一段文字就使用一个段落标签，默认情况段落会独立占一行
-->
<h1>2.段落标签</h1>
<p>央视网消息：“3亿人上冰雪”的号召带动了冰雪运动的发展，也为冰雪产业提供了新的动能。在《户外运动产业发展规划（2022—2025年）》中，提出对户外运动装备器材运输便利化，同时研究探索在部分户外运动目的地为骑行、滑雪爱好者试点提供便利化运载服务。</p>
<p>此外，记者在深圳，浙江，四川等地滑雪场了解到，今年滑雪客群明显呈现出年轻化、亲子化的特点。雪场也相应地推出了宝宝少年营、滑雪进阶课程等等。而另外一项冰上运动——滑冰，也在“冬奥”这股东风的吹动下，有了更多人的加入。</p>
<!-- 3.行内文字标签：span
多段文字内容在一行显示
-->
<h1>3.行内文字标签</h1>
<h1>1）普通行内文字标签</h1>
<span>2022-11-27 11:53</span>
<span>环球网官方帐号</span>
<!-- 2)具有特殊功能的行内文字标签：b、strong、i、em
b - 文字加粗
strong - 文字加粗
i - 文字倾斜
em - 文字倾斜
-->
<h1>3）加粗和倾斜文字</h1>
<p><b>央视网消息：</b>“3亿人上冰雪”的号召带动了冰雪运动的发展，也为<i>冰雪产业</i>提供了新的动能。在<strong><em>《户外运动产业发展规划（2022—2025年）》</em></strong>中，提出对户外运动装备器材运输便利化，同时研究探索在部分户外运动目的地为骑行、滑雪爱好者试点提供便利化运载服务。</p>
<!-- 4.换行和空格
在html代码中按换行和空格在网页中是无效的，如果在网页中需要换行和空格的效果需要使用特定的标签和符号
换行<br>
水平线<hr>
空格： (空一个空格)、 (空一个像素)
-->
<h1>4.换行和空格</h1>
<p>hello<br><br>world</p>
<br>
<p>你好 世界</p>
<p>  窗前明月光，<br><br> 疑是地上霜。<br><br>举头望明月，<br><br>低头思故乡。</p>
</body>
</html>
三、图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="p4">目录</h1>
<a href="#p1">图片</a>
<a href="#p2">超链接</a>
<a href="#p3">一人之下</a>
<hr>
<h1 id="p1">第一章：图片</h1>
<!-- 1.图片：img
src属性：提供图片地址（既可以是本地图片地址，也可以是网页图片地址）
alt属性：图片加载失败的时候显示的提示信息
title属性：图片标题（鼠标悬停在图片上的时候才会显示）
-->
<h1>1.图片标签</h1>
<!-- 1）img标签显示本地图片 -->
<img src="img/a.jpg">
<br>
<!-- 2）img标签显示网页图片 -->
<img src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF">
<br>
<!-- 3）加载失败提示信息 -->
<img src="https://pics6.baidu.com/feed/962bd40735fae6cdcd1eaf13a5045d2f43a70f58.jpeg@f_auto?token=ac0dbf27864729144d18037cc46a0220" alt="图片加载失败">
<br>
<!-- 4）图片标题 -->
<img src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF" title="狗狗">
<br>
<hr>
<h1 id="p2">第二章：超链接</h1>
<!-- 2.超链接：a
1)标签内容：决定可见可点击的部分
2）href属性：决定目标地址
a.网页地址 - 点击打开指定的网页
b.本地的html文件地址 - 点击打开自己写的网页
c.id选择器 - 页面内定位，在希望被调转的位置定义id值:id="p1",然后在跳转位置输入:#p1
d.空串 - 重新加载页面
3)target属性：设置跳转方式（_blank - 在新的窗口中打开新的页面 _self - 默认值,在当前窗口打开新页面）
-->
<!-- 文字超链接 -->
<a href="https://image.baidu.com/search/albumsdetail?tn=albumsdetail&word=%E5%AE%A0%E7%89%A9%E5%9B%BE%E7%89%87&fr=albumslist&album_tab=%E5%8A%A8%E7%89%A9&album_id=688&rn=30">图片</a>
<!-- 图片超链接 -->
<a href="https://www.baidu.com/?tn=02003390_42_hao_pg" target="_blank">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</a>
<br>
<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&tn=02003390_82_hao_pg">
<img src="https://img2.baidu.com/it/u=566140257,3115593232&fm=253&fmt=auto&app=120&f=PNG?w=144&h=144" alt="">
<span>直击赛事现场</span>
</a>
<br>
<!-- 本地页面跳转 -->
<a href="02文字相关标签和相关符号.html"target="_blank">第一章 文字相关标签</a>
<br>
<a href="01head中的标签.html"target="_blank">第二章 head中的标签</a>
<br>
<hr>
<h1 id="p3">第三章：一人之下</h1>
<img src="https://t7.baidu.com/it/u=4036010509,3445021118&fm=193&f=GIF">
<br>
<a href="#p4">回到顶部</a>
<a href="">刷新</a>
</body>
</html>
四、列表标签
<!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标签 - 列表中每个元素对应的标签
-->
<ul>
<li>小红</li>
<li>李华</li>
<li>小花</li>
</ul>
<hr>
<h2>千锋成都校区所有的学科</h2>
<ul>
<li>
<p><b>Python数据分析</b></p>
<img src="https://img2.baidu.com/it/u=3095278001,78186962&fm=253&fmt=auto&app=138&f=JPEG?w=977&h=500" alt="">
<p>“数据分析是指用适当的统计分析方法对收集来的大量数据进行分析，将它们加以汇总和理解并消化，以求最大化地开发数据的功能，发挥数据的作用。 数据分析是为了提取有用信息和形成结论而对数据加以详 细研究和概括总结的过程。 数据分析的数学基础在20世纪早期就已确立，但直到计算机的出现才使得实际操作成为可能，并使得数据分析得以推广。</p>
<p><h3>分为四个阶段学习内容</h3></p>
<ol>
<li>Python</li>
<li>SQL</li>
<li>爬虫</li>
</ol>
</li>
<hr>
<li>
<p><b>JAVA后端开发</b></p>
<img src="https://img1.baidu.com/it/u=1133092010,4009251506&fm=253&fmt=auto&app=138&f=JPEG?w=603&h=400" alt="">
<p>Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。</p>
</li>
<hr>
<li>
<p><b>人工智能</b></p>
<img src="https://img2.baidu.com/it/u=2926734456,39294740&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=378" alt="">
<p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。</p>
</li>
</ul>
<hr>
</body>
</html>
五、input标签
<!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>
<input type="text" value="" placeholder="请输入电话号码" maxlength="10" name="tel"> -->
<br>
<br>
<!-- 2.password:密码输入框
1)value属性:输入框
2)placeholder属性：输入提示信息
3）maxlength属性：限制输入的最大长度
4)name属性：定义输入数据的意义（主要用于数据提交）
-->
<label for="i2">密码：</label>
<input type="password" value="" placeholder="请输入密码" maxlength="8" name="password" id="i2">
<br><br>
<!-- 3.单选按钮radio、复选按钮checkbox
1)name属性：同一组选项的name属性值必须一致
2)checked属性：添加checked可以让按钮处于选中状态
-->
<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="h1" checked><label for="h1">篮球</label>
<input type="checkbox" name="interest" id="h2"><label for="h2">足球</label>
<input type="checkbox" name="interest" id="h3"><label for="h3">羽毛球</label>
<input type="checkbox" name="interest" id="h4"><label for="h4">乒乓球</label>
<hr>
<!-- 4.普通文字按钮
value属性:属性值就是按钮上显示的文字-->
<input type="button" value="登录">
<input type="button" value="注册">
<hr><br>
<!-- 5.button标签 -->
<button>登录</button>
<button>注册</button>
<br><br>
<button style="background-color;rgda(0,0,0,0);border: none;">
<img src="https://img1.baidu.com/it/u=1900942348,2200054065&fm=253&fmt=auto&app=138&f=JPEG?w=150&h=150" alt=""></button>
<br><br>
<input type="time">
<input type="color">
</body>
</html>
六、 form标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- form标签
form标签又叫表单标签，它是一个容器，单独使用没有任何意义。
这个容器中一般放表单相关标签用于用户信息收集：input、select、textarea
在form标签中可以通过input标签来提供重置按钮和提交按钮，对表单的内容进行整体的重置和数据提交操作
-->
<form action="" method="GET">
<label for="">姓名</label>
<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"><label for="">女</label>
<br><br>
<!-- 如果希望重置按钮有效，必须将重置按钮和需要重置的内容放到同一个form标签中 -->
<input type="reset">
<input type="submit">
</form>
</body>
</html>
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
