【Web知识点】------ HTML
文章目录
一、HLML （超文本标记语言）
1、什么是HTML
-
前端三门语言：前端三剑客
-
HTML：相当于人体骨架，标签语言，没有太多的语法结构，学习标签就行了。（HyperText Markup Language，简称 HTML）
-
CSS：相当于人的皮肉、化妆，属于装饰性的语言。
-
JS：JavaScript赋予了人的灵魂和内涵，与python相似，都是后台的语言，可以做页面效果的。
-
-
HTML内容
-
HTML 标签页面内容
<!DOCTYPE html> <!--文档类型--> <html lang="en"> <!--根标签--> <head> <!--网页头部--> <meta charset="UTF-8"> <!--国际编码 UTF-8--> <title>Title</title> <!--网页标题--> </head> <body> <!--网页的主体 可视化区域--> </body> </html> <!--<!DOCTYPE html>标签的作用：在html文件最前面进行声明，定义文档类型，告知浏览器用html这种规范去解析文档-->【注】新建HTML文件，没有这个界面的话，输入 英文字符 ! 再按一下 Tab键 就可以自动生成出来
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> # ! ---> Tab键 自动生成的代码界面不太一样 # width=device-width 以设备的宽度为准，页面高度是由内容撑开的，定义宽度就行 # nitial-scale=1.0 缩放级别1.0就是不缩放 # http-equiv="X-UA-Compatible" 好像是IE8之后的浏览器才会出现的设置，好像是设置兼容性的 # <title>Document</title>名字随便取 # 无用的可以删除，保留以下代码即可： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> </body> </html> -
打开一个网页，所看到的文字、图片、输入框，全部都是由这些标签所构成
-
2、怎么学HTML
- HTML 是一门标记语言，标记语言由一套标记标签组成
- 学习 HTML，其实就是学习标签
3、开发工具
- 编辑器 ： Pycharm （推荐的）、Vscode （微软的）
- 浏览器 ：Chrome、Firefox
二、HTML常用标签
1、标签定义
-
由尖括号包裹单词构成 eg：<html>，标签不可能以数字开头
-
标签使用样式：
-
开始标签—标签体----结束标签
<a> 1111 </a> -
自闭合标签
eg：<br>,<hr>,<input><img>
-
-
注意事项
-
错误示例
<a><b></a></b> # 不能交叉嵌套 -
正确示例：
<a> <b> </b> </a> # 前期做好缩进，方便后期检查
-
2、标签、标签属性
-
标签不区分大小写，推荐小写
-
标签属性：
- 通常为键值对形式出现，eg: color=“red” id = ‘eat’
- 属性只能出现在开始标签和自闭和标签内
- 属性名字全部小写，属性值必须用单引或者双引包裹
- 如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）
3、标签分类
- 块级标签和内联标签
- 块级标签：占据一行
<p>/<h1>/<table>/<ol>/<ul>/<form>/<div> - 内联标签：
<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>
- 块级标签：占据一行
- 块级元素的特点
- 总在新行上开始
- 高度，行高以及外边距和内边距都可控制
- 宽度缺省，则是它容器的100%
- 它可以容纳内联元素和其他块元素
- 内联元素的特点（inline元素）
- 和其他元素在一行上
- 高，行高以及外边距和内边距不可改变
- 宽度就是其文字或图片宽度，不可改变
- 内联元素只能容纳文本或者其他内联元素
4、块级标签（4个）
1. <head> </head> 标题标签
2. <p> </p> 段落标签
3. <li> </li> 列表标签：有序列表、无序列表、定义列表
有序列表 <ol type="5种可以选" start="从type的第几个开始数"> </ol>
无序列表 <ul type="默认/disc或none或circle或square"> </ul>
自定义列表 <dl> <dt></dt> <dd></dd> <dd></dd> </dl>
4. <div> </div> div标签
-
标题标签(header)：一般用在文章的标题，有h1~h6
<!doctype html> <html> <head> <meta charset="GBK"> </head> <body> <h1>1级标签</h1> <h2>2级标签</h2> <h3>3级标签</h3> <h4>4级标签</h4> <h5>5级标签</h5> <h6>6级标签</h6> <h7>7级标签</h7> </body> </html>
-
段落标签(Paragraph)：会把 HTML文档 分割成若干段落【有自己独特的样式，比如有默认的外边距】（只会按照标签显示，标签内的空格如果没有特殊操作，就不会显示出来）
<!doctype html> <html> <head> <meta charset="GBK"> </head> <body> <p> 你在楼上看风景,看风景的人在桥上看你,明月装饰你的窗子,你装饰别人的梦 </p> <p> 美好的生活在康庄大道上,你却在独木桥上.春宵一刻值千金，花有清香月有阴.三里清风三里路 步步清风再无你.叮当陪了大雄80年，在大雄临死前他对叮说:“我走之后你就回到属于你的地方吧！” 叮当同意了。 大雄死后，叮当用时光机回到了80年前，对小时候的大雄说:“大雄你好，我叫叮当。” </p> </body> </html>
-
列表标签
列表标签分为：有序列表、无序列表以及自定义列表
【有序列表
<ol type="5种type可以选" start="从type的第几个开始数">】【无序列表
<ul type="默认/disc或none或circle或square">】【自定义列表
<dl>,<dt>,<dd>】<!DOCTYPE html> <head> <meta charset="UTF-8"> </head> <body> <!--无序列表--> <ul> <li>苹果</li> <li>梨子</li> <li>香蕉</li> </ul> <!--有序列表--> <ol> <li>足球</li> <li>篮球</li> <li>排球</li> </ol> <!--定义列表--> <dl> <dt>湖南省</dt> <dd>长沙市</dd> <dd>岳阳市</dd> <dt>湖北省</dt> <dd>武汉市</dd> <dd>黄冈市</dd> </dl> </body> </html>
- div标签：用于分化一个一个的区域（最常用的标签）【最原始、最干净的容器：什么特性都没有（可以自己给它设置样式，此处无招胜有招），想装什么，就装什么，容器标签】（可以嵌套，可以用来分层，区分目录、结构）【可以用于网页的栅格布局（格式：左右分区，上下页眉和页脚）】
5、行内标签（4个）
1. <img src="图片地址"/> 图片标签
2. <b></b> <strong></strong> <i></i>粗体/斜体标签
3. <a href="目标网址">链接显示的文本</a> 超链接标签/a 标签
4. <span> </span>文字标签
-
图片标签： 图片标签，用于向页面插入图片（占地面积取决于图片自身大小）
图形标签插入图片
<img src="图片地址" alt="下载失败时的替换文字" title="提示文本"/> <!--src:标志图像的位置,图片路径--> <!--alt:下载不成功时，可看到该属性指定文本,alt=""可以为空--> <!--title: 鼠标滑过图片时显示的文本--> <!--图像可以是:GIF，PNG，JPEG格式图像文件--> -
粗体/斜体标签：粗体标签将文字加粗(<b>或<strong>)，斜体标签将文字倾斜(<i>)
-
超链接标签<a>：超链接标签其实就是 a 标签，一般用于网页之间的跳转还能做锚点， 进行跳转
<a href="目标网址" title="鼠标滑过显示的文本 target="_blank/_self>链接显示的文本</a>【target="_blank/_self实现网页跳转和本页内跳转（要注意目标网址的区别）】
【href=“可以是链接网址，也可以链接到文件路径”】 -
文字标签：Span 标签是单纯的文字标签，只有配合 CSS 才能有样式
5、行内元素、块级元素的相互转换（样式修改）
-
行内元素—>块级元素：
style="display:block" -
块级元素—>行内元素：
style="display:inline"
三、HTML特殊符号
1、特殊符号
- 特殊符号就是网页上一些比较特殊的符号
- 有时候我们需要特殊符号，比如，我要把html代码显示在页面上
2、特殊符号代码
-
特殊符号以 & 开头，分号结尾
-
 字符的宽度 -
空格的宽度 -
<< 小于号 -
>> 大于号 -
常用特殊符号代码
ww<a ==> ww <!--以上只会在网页显示ww，它会视<a为一个标签，如果要显示，则使用特殊字符--> <<br/> ==> < ><br/> ==> > "<br/> ==> " ©<br/> ==> © ®<br/> ==> ® &<br/> ==> & ⁢ ><br/> ==> < > ⁢ ><br/> ==> < >
-
四、HTML表格
1、概念
- 定义：表格其实就是大家平时看到的二维表，比如Excel表格之类
- 地位：表格布局火于90年代，如今一般用于后台展示数据
- 结构：表格分为表头，表身和表脚
2、HTML表格
-
表格标签：table
-
表头标签：thead
-
表身标签：tbody
-
表脚标签：tfoot
-
表格其他用法补充:
-
caption 表格标题
-
rowspan 合并行
-
colspan 合并列
-
代码
<!doctype html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="2"> <thead> <tr> <th>序号</th> <th>班级</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>46</td> <td>haha</td> <td>22</td> <td>男</td> </tr> <tr> <td>46</td> <td>hehe</td> <td>20</td> <td>男</td> </tr> <tr> <td>46</td> <td>xixi</td> <td>22</td> <td>女</td> </tr> </tbody> </table> </body> </html> -
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table tr td{
border:1px solid blue;
width:50px;
}
</style>
</head>
<body>
<table style = "border-collapse:collapse;">
<caption>表格标题</caption>
<thead>
<tr><td>name</td><td>age</td><td>gender</td></tr>
</thead>
<tbody>
<tr><td>小明</td><td>18</td><td>男</td></tr>
<tr><td>小红</td><td>18</td><td>女</td></tr>
<tr><td>美美</td><td>保密</td><td>保密</td></tr>
</tbody>
</table>
<!-- <tbody></tbody>:加上此标签,表格的内容会在全部下载后才显现-->
<!-- <table></table>:在没有加上css样式时,在浏览器中是没有表格线的-->
<!-- <th></th>:表头默认为粗图，居中-->
</body>
</html>
五、HTML表单<form>(常用)
1、概念
- 表单：搜集用户数据信息的各种表单元素的集合区域
- 作用：用于收取用户数据并向后台发送，前后交互的方式之一
2、应用
-
表单常应用于 登录注册，搜索，文件上传等
-
get与post：
-
get会拼接到路径，post不会拼接到路径（放到post里面，打包成请求体后，帮我们去访问，不会被保存到服务器日志和浏览器记录，也不会缓存，更安全）
-
get是有URL限制的，最大长度限制取决于浏览器和web服务器，get只能发ascll码、键值对等单一字符；post发送的数据量更大，还可以发送文件、图片等更多的数据类型
-
post 比 get 慢一些，post主要用于修改或写入（上传）数据（带着数据去存数据），get是直接通过参数向服务器要数据（光脚的去找别人要数据）
-
代码
<!doctype html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="https://www.sogou.com/web" method="get"> 用户名<input type="text" name="query"> 提交<input type='submit' value="提交"> </form> <!--action:指向服务器某个程序--> <!--method:post/get:--> <!--get: 1.提交键值对(name+value),放在地址栏中url后面 2.安全性相对较差，3.对提交内容长度有限制 适用于查询类--> <!--post: 1.不会将提交内容放在地址栏中 2.相对安全 3.理论上对提交内容长度无限制--> </body> </html>
-
3、HTML表单
-
表单属性（3个）
-
action：提交时候的地址,默认使用当前页面
-
method：提交时候的方法，有get 和 post 两种方法，默认使用 get
-
entype：设置编码格式，有三种（application/x-www-form-urlencoded）
-
-
表单标签（3个）
-
textarea标签：文本域标签，一般用于多行文本
<p> 个人简介：<textarea rows="10" cols="30"></textarea> </p> -
Input标签：表单中使用频率最高的标签，没有之一
-
input 的 type 属性
text：文本框， password：密码框，radio：单选框，checkbox：复选框， button：按钮， file：文件选择，hidden：隐藏域，submit：提交， reset，重置；image，图片提交；
-
input 的name属性：表单提交项的键， 与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用
-
input 的value属性：表单提交项的值 ，可以用户输入，也可以固定值
-
input标签中不同type，value值的不同
type=“button”/“reset”/“submit” ----定义按钮上显示文本
type=“text”/“password”/“hidden” ----定义输入字段初始值
type=“checkbox”/“radio”/“image” ----定义与输入相关联的值
-
input标签的其他属性
placeholder：提高用户体验度，name：表单与后台交互时最重要的一个属性，要求input标签都带上，readonly：只读，disabled：禁用，value：input的值 单选多选下拉框必须设置value属性，这样后台才能获得你选中的到底是哪个或哪几个选项
-
代码见作业
-
-
select下拉框标签，一般用于选项
下拉选项（option）：下拉框的基本标签，有多少个option 就有多少个下拉选项
下拉状态（selected）：表示选中某个下拉选项
下拉框显示（size）：表示下拉框，显示多少个，默认为一个
下拉框的名字（name）：表示下拉框向后台提交数据的时候，所传的名字
<!doctype html> <html> <head> <meta charset="GBK"> </head> <body> <p>地 址： <select name="addr" id=""> <optgroup label="湖南省"> <option value="cs">长沙市</option> <option value="cd">常德市</option> </optgroup> <optgroup label="湖北省"> <option value="cs">长沙市</option> <option value="cd">常德市</option> </optgroup> </select> </p> </body> </html>
-
- 表单中常用的标签
六、web小案例（用户注册页面）
1、效果
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册界面</title>
</head>
<body>
<form action=""
method="get">
<p>
用户名：<input type="text" name="usr" placeholder="请输入用户名">
</p>
<p>
密 码：<input type="password" name="psw" placeholder="请输入密码">
</p>
<p>
性 别：
男<input type="radio" name="sex" value="female">
女<input type="radio" name="sex" value="male">
保密<input type="radio" name="sex" value="male">
</p>
<p>
爱 好：
唱歌<input type="checkbox" name="hobby" value="sing">
跳舞<input type="checkbox" name="hobby" value="dance">
画画<input type="checkbox" name="hobby" value="swim">
</p>
<p>上传头像：
<input type="file" name="file">
</p>
<p>地 址：
<select name="addr" id="">
<optgroup label="湖南省">
<option value="cs">长沙市</option>
<option value="cd">常德市</option>
</optgroup>
<optgroup label="湖北省">
<option value="cs">长沙市</option>
<option value="cd">常德市</option>
</optgroup>
</select>
</p>
<p>
<form>
个人简介： <textarea rows="10" cols="30"></textarea>
</form>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
