day1 - HTML常用标签
1.html网页基本结构
<!-- html版本说明 -->
<!DOCTYPE html>
<!-- 网页基本结构
html标签 - 代表整个网页
head标签 - 代表网页头部内容
body标签 - 代表网页内容部分
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
网页内容构建处
</body>
</html>
2.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">
<!-- 设置网页标题 -->
<title>百度一下，你就知道</title>
<link rel="icon" href="img/猫头鹰.png">
</head>
<body>
你好，世界
</body>
</html>- link标签的使用
设置网页图片
rel属性：icon
href属性：图片地址
导入外部样式：
rel属性：stylesheet
href属性：css文件地址
<link rel="icon" href="img/猫头鹰.png">3.文字相关标签和相关符号
1.标题标签：h1~h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>2.段落标签：p
需要在网页上显示一段文字就使用一个段落标签，默认情况段落会独占一行
<p>央视网消息：近期，全国本土疫情呈现传播范围广、传播链条多、疫情波及面扩大的严峻复杂态势。</p>3.行内文字标签：span
多段文字内容在一行显示
<span>2022-11-28</span>
<span>北京</span>
<span>丨</span>
<span>央视国际网络有限公司</span>
4.具有特殊功能的行内文字标签：b、strong、i、em
b - 文字加粗
strong - 文字加粗
i - 文字倾斜
em - 文字倾斜
<h1>加粗和倾斜文字</h1>
<P><b><i>中国疾控中心传防处研究员 王丽萍：</i></b>根据我们第九版的防控方案和二十条的优化措施，要求我们各地在疫情处置中间，在指挥部的整个指导下，我们的流调组、转运组、核酸检测组要进行有效协作，信息沟通共享，<strong>黄金24小时</strong>就是为了抢占疫情防控的先机。</p>5.换行和空格
在html代码中之间按换行和空格在网页中无效，如果在网页上需要换行和空格的效果需要使用特定的标签和符号
换行：<br>
空格：&emsp；（空一格空格）、 ；（空一个像素）
<p>hello <br><br> world!</p>
<br>
<p>你好世界</p>
<br>
<p>
  床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。
</p>4.图片和超链接
1.图片：img
src属性：提供图片地址（可以是本地图片地址，也可以是网页图片地址）
alt属性：图片加载失败时显示的提示信息
title属性：图片标题（鼠标悬停在图片上的时候才会显示）
- 1）img标签显示网页图片
<img src="img/mao.jpg">
<br>
<img src="img/猫头鹰.png">- 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>- 4）图片标题
<img src="img/luffy.jpg" title="路飞">2.超链接：a
标签内容：决定可见可点击的部分
href属性：决定目标地址
a. 网页地址 - 点击打开指定网页
b. 本体html文件地址 - 点击打开自己写的网页
c. id选择器 - 页面内定位
d. 空串 - 重新加载页面
target属性：设置跳转方式
_blank - 在新的窗口中打开新的页面
_self - 默认值，在当前窗口中打开新的页面
- 文字超链接
<a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>- 图片和文字混合超链接
<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">
<span>直击赛事现场<span>
<img src="img/luffy.jpg">
</a>
<br> - 本地页面跳转
<h1 id="top">目录：</h1>
<a href="#p3">一人之下</a>
<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>5.列表标签
1.有序列表
ol标签： 整个列表对应的容器
li标签：列表中每个元素对应的标签
<h2>
第一次月考考试成绩排名：
</h2>
<ol>
<li>1.小明</li>
<li>2.张三</li>
<li>3.李四</li>
<li>4.老王</li>
</ol>2.无序列表
ul标签：整个列表对应的容器
li标签：列表中每个元素对应的标签
<h2>
已经拿到驾照的学生：
</h2>
<ul>
<li>小红</li>
<li>李华</li>
<li>小花</li>
</ul>- 例题
<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>分为四个阶段学习：</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>6.input标签
1.input标签基础构成
input标签会因为type属性值的不同，表现出完全不同的功能
text(默认)：普通文本输入框
value属性: 输入框内容
placeholder属性：输入提示信息
maxlength属性：限制输入的最大长度
name属性：定义输入数据的意义（主要用于数据提交）
label属性：使文本可控
<h2>输入账号和密码</h2>
<label for="i1">账号:</label>
<input type="text" value="张三" placeholder="请输入账号" maxlength="10" name="username" id="i1"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可以让按钮出去选中状态
<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>
<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>4.普通文字按钮（button）
value属性：属性值就是按钮上显示的文字
<input type="button" value="登录">
<input type="button" value="注册">button标签
<button>取消</button>
<button style="background-color: rgba(0, 0, 0, 0);border: none;">
<img src="img/相机.png">
</button>
<input type="color">
<input type="date">7.form标签
from标签
1)form标签又叫表单标签，它是一个容器，单独使用没有任何意义。
2)这个容器中一般放表单相关标签用于用户信息收集：input、select、textarea。
3)在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"><label for="">女</label>
<!-- 如果希望重置按钮有效，必须将重置按钮和需要重置内容放到同一个form标签中 -->
<input type="reset">
<input type="submit">
</form>
1903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
