一.head中的标签
head中能使用的标签：meta标签（网页配置），title标签（设置网页标题），link（导入外部文件），style（设置内部样式），script（添加内部js代码）
标签语法
<标签名 属性名1=“属性值1” 属性名2=“属性值2”>标签内容</ 标签名>
<标签名 属性名1=“属性值1” 属性名2=“属性值2” />
<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>
<!-- 1.标题标签：h1~h6 -->
<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
...
<h6>六级标签</h6>
<!-- 2.段落标签：默认情况段落会独立占一行 -->
<p>火星距离地球约1.4亿英里，围绕着太阳运行，这颗行星也被称为红色星球，
、是继水星、金星及地球之后距离太阳第四近的行星。几百年来的研究和探索，
使得我们对火星的了解仅次于地球。近年来，随着好奇号和毅力号探测器相继
在2012年、2021年成功登陆火星，我们对火星的认识更加深入。每年的11月28
号是火星节，让我们在今天庆祝探索火星取得的成就吧。</p>
<!-- 3.行内文字标签：span
多段文字内容在一行显示
-->
<span>2022-11-27 10:48</span>
<span>成都</span>
<span>|</span>
<!-- 4.具体特殊功能的行内文字标签
b - 文字加粗
strong - 文字加粗
i - 文字倾斜
em - 文字倾斜
-->
<p><strong>古时的人们观察到夜空中有一颗与众不同的移动
天体，它明亮的红色甚至用肉眼都能分辨。</strong>人类
的好奇心<b>被勾起来了，它也许不是离地球最近的行星（这
个名头属于金星），但却是最能激发想象力的行星。</b>我
们了解得越多就越能想象，<i>火星在很久以前或许和地球一
样，拥有生命、河流及海洋，</i>以及比现在厚得多的大气
层。火星上的条件虽然并不适宜人类生存，<em>但已经比其
他行星好得多了，</em>这或许也是我们倾向于畅想移
民火星的原因。</p>
<!-- 4.换行和空格
<br> - 换行
  - 一个空格
- 一个像素
-->
</body>
三.图片和超链接
<body>
<h1 id="top">目录：</h1>
<a href="#pic">图片：</a><br>
<a href="#link">超链接：</a>
<hr>
<h1 href="">第一章：图片</h1>
<!-- 1.图片：img
src属性：提供图片地址（既可以是本地图片地址，也可以是网页图片地址）
-->
<!-- img标签显示本地图片 -->
<img src="img/百度logo.png">
<br>
<!-- img标签显示网页图片 -->
<h1 id="pic">1.图片标签</h1>
<img src="https://tenfei02.cfp.cn/creative/vcg/800/new/VCG41560336195.jpg">
<br>
<!-- 加载失败提示信息 -->
<img src="https://tenfei01.cfp.cn/creative/vcg/800/new/VCG41560336195.jpg" alt="图片加载错误">
<br>
<!-- 图片标题 -->
<img title="图片" src="img/猫头鹰.png">
<br>
<h1 id="link">第二章：超链接</h1>
<br>
<!-- 2.超链接：a
1）标签内容：决定可见可点击的部分
2）href属性：决定目标地址
3）target属性：设置跳转方式（_blank - 在新的窗口中打开新的页面；_self - 默认值，在当前窗口中打开新的页面）
-->
<!-- 文字超链接 -->
<a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>
<br>
<!-- 图片超链接 -->
<a href="#">
<img src="img/百度logo.png">
</a>
<br>
<!-- 图片和文字混合超链接 -->
<a href="#">
<img src="img/猫头鹰.png" alt=""><br>
<span>你好，廖书德</span><br>
<img src="img/中国.png" alt="">
</a>
<br>
<!-- 本页面跳转 -->
<a href="02文字相关标签和相关符号.html" target="_blank">第一章 文字相关标签</a>
<br>
<a href="02文字相关标签和相关符号.html" target="_blank">第二章：head中的标签</a>
<br>
<hr>
<a href="http://www.imeitou.com/weimei/258979.html">2022</a>
<br>
<a href="#top">回到顶部</a>
</body>
四.列表标签
<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="img/python.jpg">
<h4>分为四个学习阶段：</h4>
</li>
<ol>
<li>语言基础</li>
<li>爬虫</li>
<li>excel</li>
<li>分析</li>
</ol>
</ul>
</body>
五.input标签
<body>
<!-- input标签会因为type属性值的不同，表现出完全不同的功能 -->
<!--
1.text（默认）：普通文本输入框
1）value属性：输入框内容
2）placeholder属性：输入提示信息
3）maxlength属性：限制输入的最大长度
4）name属性：定义输入数据的意义（主要用于数据提交）
-->
<label for="i1">账号:</label>
<input type="text" value="张三" id="i1" placeholder="请输入账号" maxlength="10" name="username">
<!-- 2.password:密码输入框 -->
<label for="i2">密码:</label>
<input type="password" value="123456" id="i2" placeholder="请输入密码" maxlength="6" name="password">
<br>
<!-- 3.单选按钮(radio),复选按钮
1）name属性：同一组选项的name属性必须一致
2)checked属性：添加checked可以让按钮处于选择状态
-->
<h2>选择性别：</h2>
<input type="radio" name="gender" id="g1"/><label for="g1">男</label>
<input type="radio" name="gender" id="g2"/><label for="g2">女</label>
<br>
<h2>兴趣爱好：</h2>
<input type="checkbox" name="interest" id="in1"/><label for="in1">篮球</label>
<input type="checkbox" name="interest" id="in2"/><label for="in2">足球</label>
<input type="checkbox" name="interest" id="in3" checked/><label for="in3">爬山</label>
<input type="checkbox" name="interest" id="in4"/><label for="in4">足球</label>
<hr>
<!-- 4.普通文字按钮（button）
value属性：属性值就是按钮上显示的文字
-->
<input type="button" value="登录"/>
<input type="button" value="注册"/>
<!-- 5.button标签 -->
<button>取消</button>
<br>
<button style="background-color: azure;border: none;">
<br>
<img src="img/java.jpg" alt=""/>
</button>
</body>
六.form标签
<body>
<!-- form标签
form标签又叫表单标签，它是一个容器，单独使用没有任何意义，
这个容器中一般放表单相关标签用于用户信息收集：input，select，textarea
-->
<form action="" method="GET">
<h3>姓名:</h3>
<input type="text" name="姓名" id=""/>
<h3>生日:</h3>
<input type="date" checked name="生日" id=""/>
<h3>性别:</h3>
<input type="radio" checked name="gender"/><label for="">男</label>
<input type="radio" name="gender"/><label>女</label>
<br>
<!-- 如果希望重置按钮有效，必须将重置按钮和需要重置内容放到同一个form标签中 -->
<input type="reset"/>
<input type="submit"/>
</form>
</body>
七.文本域标签和select标签
<hr />
<select name="" id="">
<optgroup label="四川省">
<option value="成都市">成都市</option>
<option value="德阳市">德阳市</option>
<option value="绵阳市">绵阳市</option>
</optgroup>
<optgroup label="广东省">
<option value="深圳市">深圳市</option>
<option value="广州市">广州市</option>
<option value="珠海市">珠海市</option>
</optgroup>
</select>
<hr />
<!-- 2.多行文本域：textarea
1）标签内容：输入框内容
2）placeholder：输入提示信息
3）maxlength：能输入字符的最大个数
4）rows：能同时显示的行数
5）cols：位置一行能显示的字符的个数（不精确）
-->
<textarea placeholder="请输入你的建议" maxlength="30" rows="3" cols="10">张三</textarea>
</body>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
