文章目录

1.认识HTML
2.HTML标签的使用
- 2.1注释
- 2.2标题
- 2.3段落
- 2.4换行
- 2.5字体加粗、斜体字、删除线、下划线
- 2.6图片
- 2.7超链接
- 2.8表格
- 2.9列表
- 2.10表单标签
- 2.11div
- 2.12span
3.HTML特殊符号

1.认识HTML

（1）HTML是网页的编程语言，文件的内容主要由“标签”构成
（2）标签的写法
①<标签名属性名 = “属性值”>标签内容</标签名>
②<标签名>
（3）文件的基本结构

<html><head><title>标题</title></head><body>网页可以看到的内容</body>
</html>

举例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题</title>
</head>
<body>网页可以看到的内容
</body>
</html>

在这里插入图片描述
（4）在浏览器中右键检查进入开发者工具选择元素就可以查看html的内容

2.HTML标签的使用

2.1注释

网页中就不显示了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题</title>
</head>
<body><!-- 注释 -->网页可以看到的内容
</body>
</html>

在这里插入图片描述

2.2标题

展示的结果是，字体是加粗的，从大到小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>hello</h1><h2>hello</h2><h3>hello</h3><h4>hello</h4><h5>hello</h5><h6>hello</h6>
</body>
</html>

在这里插入图片描述

2.3段落

段落之间间隔一定的空隙

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>这是第一段</p><p>这是第二段</p>
</body>
</html>

在这里插入图片描述

2.4换行

在编辑器中换行，网页不会给我们换行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>这是第一段第一行</br>这是第一段第二行</br>这是第一段第三行</br></p><p>这是第二段</p>
</body>
</html>

在这里插入图片描述

2.5字体加粗、斜体字、删除线、下划线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><strong>strong 加粗</strong><b>b 加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u>
</body>
</html>

在这里插入图片描述

2.6图片

< img src = “图片路径”>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./花花.jpg" alt="花"><!-- 可以设置标题、宽、高、边框 --><img src="./花花.jpg" title="花" width="100px" height="100px" board="3px">
</body>
</html>

2.7超链接

（1）href：跳转的路径（这个路径可以是相对路径，也可以是绝对路径）
（2）target：设置跳转的方式，默认是_self（本页面跳转），可以设置成_blank（新的标签页打开）
（3）#：代表本页面的某一个位置，点击就跳到对应的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 点击这里会跳到这是第一段第一行这个位置 --><a href="#跳到此处">跳到id为跳到此处的位置</a><p id="跳到此处">这是第一段第一行</br>这是第一段第二行</br>这是第一段第三行</br></p><a href="www.baidu,com">跳不到百度</a>
</br><a href="http://www.baidu.com">本页面跳到百度</a>
</br><a href="http://www.baidu.com" target="_blank">新的页面跳到百度</a>
</br><a href="http://www.baidu.com" target="_blank"><!-- 这里点击图片也会跳转到百度 --><img src="./花花.jpg"></a><a href="javascript:void(0)">点我不会跳</a>
</body>
</html>

在这里插入图片描述

2.8表格

< table >：整个表格
< tr >：一行
< td >：一个单元格
< th >：表头单元格. 会居中加粗

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 居中、边框、内容距离边框的距离、单元格之间的距离 --<table align="center" border="1" cellpadding="20" cellspacing="0"><thead><tr><th>姓名</th><th>学号</th><th>性别</th></tr></thead><tbody><tr><td>张三</td><td colspan="2">男</td></tr><tr><td>李四</td><td>002</td><td>女</td></tr></tbody></table>
</body>
</html>

在这里插入图片描述

2.9列表

分为有序列表、无序列表、自定义列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h3>无序列表</h3><ul><li>今天</li><li>要</li><li>开心</li></ul><h3>有序列表</h3><ol><li>明天</li><li>也要</li><li>开心</li></ol><h3>自定义列表</h3><dl><dt>每天</dt><dd>都要</dd><dd>很</dd><dd>开心</dd></dl>
</body>
</html>

在这里插入图片描述

2.10表单标签

表单标签涉及和用户交互的部分（用户输入内容，选择等），也涉及和服务端交互（可以使用表单标签来发送http请求到服务端）
（1）< form >表单标签：action设置发送到服务端的路径，可以把表单控件的数据发送到服务端；表单控件有< input >、< select >、< textarea >
（2）< input >：type可以是text（文本）、password（密码）、file（文件）、radio（单选）、Checkbox（复选）、button（普通按钮）、submit（提交按钮）、reset（重置按钮）
注意：点击提交按钮，会发送http请求，跳转到action指定的路径发送数据，数据的格式是键1=值1&键2=值2（键是表单控件的name，值是表单控件的value）；提交按钮只有在form表单中，单击后才可以默认提交表单，如果没有包含在form中就没哟效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="后端路径">文本框：<input type="text"></br>密码框：<input type="password"></br>上传文件：<input type="file"></br>单选框：男<input type="radio" name="sex">女<input type="radio" name="sex"></br>复选框：打篮球<input type="checkbox" name="hobby">踢足球<input type="checkbox" name="hobby"></br>普通按钮：<input type="button" value="点我"></br>提交按钮：<input type="submit" value="点我提交"></br>重置按钮：<input type="reset" value="点我重置"></br></form>
</body>
</html>

在这里插入图片描述
（3）lable：用于结合input提升用户的体验，效果是点击lable也能选中input

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="后端路径">单选框：<label for="male">男</label><input id="male" type="radio" name="sex"><label for="female">女</label><input id="female" type="radio" name="sex"></br></form>
</body>
</html>

（4）select：下拉菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form>下拉菜单：<select><option>--地点--</option><option>北京</option><option>西安</option><option>上海</option></select></form>
</body>
</html>

在这里插入图片描述

（5）textare：文本域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form>文本域：<!-- 这里不要换行，否则会出现一些默认的空字符串 --><textarea rows="5" cols="10"></textarea></form>
</body>
</html>

在这里插入图片描述

2.11div

块级元素：一块占据单独的一行，默认占据父元素的全部高度，高度可以自己指定，也可以通过包含的内容来确定，如< div >、< p >、< h >

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="background-color: red;">生活的压力，工作的失意，学业的压力，爱的惶惶不可终日，挺过来的，人生就会豁然开朗，挺不过来的，时间也会教你，怎么与它们握手言和，所以不必害怕的。你特别烦的时候 先保持冷静 或者看一部开心的电影 或者喝一大杯水 不要试图跟朋友聊天 朋友是跟你分享快乐的人 而不是分享你痛苦的人 不要做一个唠唠叨叨的抱怨者 从现在起 要学会自己去化解 去承受</div><div style="background-color: blueviolet;height: 30px;"></div>
</body>
</html>

2.12span

一个span不单独占据一行，属于内联元素，多个内联元素会在一行显示，如< img >、< lable >、< strong >、< i >

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><strong>strong 加粗</strong><b>b 加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u>
</body>
</html>

在这里插入图片描述

3.HTML特殊符号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>1&nbsp;2<br>1&lt;2<br>2&gt;1<br>1&amp;2
</body>
</html>