目录
1 标题标签
标题标签用h1-h6表示,一共有六种，我们都看一下效果
浏览器打开后效果就是这样的
2 段落标签
段落标签用p表示，我们这样用
我们浏览器中看一下
3 换行标签
换行标签用br表示，我们在代码中使用一下
浏览器中的效果是这样的
从这里我们可以看到段落的间距是比换行的间距大的
在标题与段落中也可以换行
4 加粗标签
加粗标签可以用strong或者b表示
效果是一样的
5 倾斜标签
倾斜标签可以用em或i表示
效果是一样的
6 删除线标签
删除线标签可以用del或s表示
效果是一样的
7 下划线标签
下划线标签可以用ins或u表示
效果是一样的
8 布局标签
布局的概念可以看一下这个 78.布局管理_potato123232的博客-CSDN博客
我们用div与span创建布局，用的时候这样用就行了
从外观上来看没有任何作用
div一行只能有一个，span一行可以有多个
像这里的 为你推荐 用的就是一个div
这里也是
span在这里有应用，一行可以放多个，这里他使用了多组span
9 图像标签
我们使用img作为图像标签，一般这样用
一般配合静态文件使用，src的值给静态文件的地址，地址就分直接地址和相对地址，根据后端不同的框架略有区分，关于地址问题可以看一下这个 8.静态文件_potato123232的博客-CSDN博客
它的效果是这样的
src是img标签的必选属性，其余为可选属性
我们首先看alt，当图像不能显示的时候会替换成文字
这里我搞一个不存在的图像写入src，他就不能显示了
它的效果是这样的
下面我们再看title,width,height,border，我把他们一起都写上
它的效果是这样的
- title经测试把鼠标放上可以出现文字，那个我截图截不了
一般来讲高度与宽度我们只改一个，改动一个后另一个值等比例缩放
border这个参数一般在css改，后面我们用的话会提到
10 超链接标签
超链接标签也叫a标签，我们一般这样写
10.1 外部链接
- http或https都行
效果是这样的
点击一下就会弹出我们指定的地址
除了放一个文字我们也可以放一张图片
点击这张图片同样可以进入我们指定的地址
- 不仅文字和图像可以引入链接，视频，表格，这些都可以
除了属性href，还有一个属性是target
如果我们使用谷歌浏览器的话，上面的两个链接会覆盖掉原来的页面，现在我们加入target，然后给target赋值为_blank
点击后发现它不会关掉我当前的页面，而且它会弹出指定的页面
10.2 内部链接
10.2.1 内部html文件
除了放外部链接也可以放其他的html文件，比如我现在想链接 1.a_piture.html
点击之后发现跳转到了我们 1.a_picture.html 这个页面
10.2.2 内部路由
当然它也可以链接服务中本身的路由，这个与这讲关系不大，我单开一章 4.flask配合a标签链接内部路由_potato123232的博客-CSDN博客 如果有兴趣的话可以看一下
10.3 空链接
我们也可以放一个空链接，在href中输入#
点击完空链接后会回到页面的最上方，如果有返回顶部的功能就可以这样做
10.4 文件链接
也可以链接一个文件，如果链接的是一个文件，浏览器要把它下载在哪
我们点击一下链接
会弹出一个另存为的对话框，我们点击保存之后就可以将其下载下来
10.5 锚点链接
地址栏中的#1就是锚点，当我们点击 1.简介 的时候，会页面会自动移动到响应位置，字符 1.简介 的链接就是锚点链接
锚点链接要配合我们的标题使用，我们先给标题一个id，然后给标点链接对应的id就可以了
我们现在想要锚点链接跳到2级标题的位置，我们就这样写
刷新后我们点击锚点链接
发现会自动跳到二级标题位置
11 注释标签
相当于程序中的#，这个是给开发人员看的，不会显示在页面中，它是这样写的
在页面中我们是看不到的
查看源代码的时候可以看到
在pycharm中打开html，按 ctrl + / ，可以快速创建注释标签，且光标会自动移动到对的位置
再有标签的代码行，按 ctrl + / 可以取消注释
12 特殊字符
html中的特殊字符是必要的，比如我想这样显示
但是实际显示的是这样的
那么我们想多加几个空格就应该这样写
这样就可以了
除了空格符还有其他的字符，用的时候我们要注意一下
13 表格标签
表格一般用来展示数据，有时也用来布局，表格标签中有六种常用标签，table,tr,td，th,thead和tbody,我们先看前面三个
13.1 基本用法
table是整个的大表格，tr是一行，td是一行中的一个
我们先简单写个例子
- td可以创建后不写内容，再创建时会把前面的格子空过去
这个就是我们一个简单的表格
现在我们说th标签，th标签是表头的意思，我们用一下
- 每一行都可以多给或少给格子，无所谓
它展示出来是这样的，会给文字加粗并居中
13.2 表格属性
一般都在css中设置，我们这里也提一下
- cellpadding是单元格内容与边框的距离，cellspacing是单元格之间的距离
- 还有一个height属性，是单元格的总高度，width是单元格的总宽度
- border也可以给1以上的值，这个值是边框的宽度
这些是表格的属性，css中跟这个里面也差不多，我们给这五个用一下
- height虽然是黄色的但是可以正常使用
现在这个表格就变成这个样子了
单元格里也可以放链接与图片
13.3 表格结构标签
表格结构标签是thead和tbody，thead表示表格头部区域，tbody表示表格主体区域，我们一般这样用
在显示上与没加没有任何不同
13.4 合并单元格
13.4.1 跨行合并(竖着) rowspan
跨行合并把代码写在要合并的最上方的单元格中
我们现在2合并这两个格
我们这样写
合并成功
13.4.2 跨列合并(横着) colspan
跨行合并把代码写在要合并的最左侧的单元格中
我们合并这三个格
我们这样写
合并成功
14 列表标签
列表通常用来布局
14.1 无序列表标签
无序列表使用ul表示，列表项用li表示
像这里的百度热搜，用的就是无序列表
它的使用方式是这样的
我们现在写一下
显示出来是这样的
- ul中只能放li，li中可以放别的标签
像上面的内个列表项前的黑点儿，我们可以在css中设置
14.2 有序列表
有序列表用ol表示，列表项同样用li表示，我们写一个看一下
它显示出来是这样的
- ol中只能放li，li中可以放别的标签
像上面的内个列表项前的数字与小点儿，我们可以在css中设置
14.3 自定义列表
自定义列表有标签dl,dt,dd
语法是这样的
我们写一下看看
- 一般我们将dd进行缩进，这样后面看的时候看的舒服一点，但dt与dd并不是包含关系
效果是这样的
像上面的缩进我们一般用css改
dl只能包含dt和dd，dd是可以直接放到dl中的
显示出来是这样的
15 表单标签
表单一般应用与客户端向服务端提交数据，大多数网站的注册页面都是使用表单做的
表单一般有三个部分组成，表单域，表单控件和提示信息，上面的页面整体叫表单域，写内容的地方叫表单控件，手机号码与验证码叫做提示信息
15.1 表单域
表单域用form表示，它的语法是这样的
- 之前我用django做了一个简易的表单应用场景，感兴趣的话可以看一下 5.GET与POST_potato123232的博客-CSDN博客
我在这里先搭建一个简单的表单域
15.2 表单元素
根据不同的应用场景我们放不同的元素，我们一个一个看
- 表单元素中涉及到的属性很多，我们这里只介绍常用的属性
15.2.1 输入表单元素 input
它的语法是这样的
type可以取以下的值
我们每个都看一下是什么样子的
它显示出来是这样的
15.2.1.1 text
我们一个一个讲，先说text,我们可以在text中输入任意字符
关于text有三个属性是它可以用的
- name 这个文本框的名字，这个是给开发者看的，后续css可以配合这个名字
- value 文本框的默认值
- maxlength 文本框中文本最大长度
我们现在设置一下
现在它打开就是这个样子的
我们现在想要再输入一个值
发现输入不进去了
会以明文的形式显示，如果我们想要让其密文显示，那么我们应该用password
password可用属性与text相同
- name 这个文本框的名字，这个是给开发者看的，后续css可以配合这个名字
- value 文本框的默认值
- maxlength 文本框中文本最大长度
我就不展示了
radio通常用于单选的按钮，我们下面做个例子
现在我们想选是可以都选上的
radio点上了默认情况下再点一次是无法取消选择的
radio的属性有
- name 单选框的名字
- checked 如果checked的值为checked则会默认选中
- value 单选框的值，这个属性在前端没有影响，是用户点了之后返给后台的东西
只有radio的name相同它才能每次只选一个，我们用一下看看
它打开之后是这样的
如果我选中另一个，它会自动否掉前面的选择
15.2.1.4 checkbox
checkbox一般用于多选按钮，我们做个例子
默认情况下我们是可以给它都选上的
它能用的属性是checked，name，value，checked 如果设置了就会自动被选中，name和value我们就不写了，我们测一下checked
它打开之后就是这样的
15.2.1.5 submit
submit是这样的，你点一下提交，相关信息就能发送到你form填写的路由中
submit可用属性是name与value，name起名字我们不测了，value可以改按钮中的文字，我们简单做一下
现在打开它就变成这样了
我们现在路由是随便给的，现在你点一下它就反404了
15.2.1.6 reset
reset是重置按钮，如果点了这个表单中所有数据都会恢复默认状态，它可用的属性是name与value，value能改按钮上的字，我们测一下
现在它就变成这个样子了
15.2.1.7 button
一个普通的按钮，一般搭配js使用，可用属性为name与value，value可以写上面的文字
15.2.1.8 file
这个是上传文件的，我现在随便选一个文件看看
我选了一个python.png的文件，它就会把文件名写在后面
同一个file按钮我们只能选择一个文件上传，如果再上传一个就会覆盖掉前一个
可用属性为name与value，给value属性并不会更改前端的显示，后端会根据value值做响应的处理
15.2.1.9 hidden与image
用到再提
15.2.2 下拉表单元素 select
它的语法是这样的
- select中至少包含一个option
我们写一个看一下
我们可以使用selected = "selected" 设置默认选中项，如果没设置的话默认选中项为第一个
现在我们打开后默认项就变为了广州
15.2.3 文本域元素 textarea
input中的text只能输入单行内容，使用textarea可以输入多行内容，它的语法是这样的
这里的rows是指文本域只能显示几行，当我们设置为3的时候，文本域只能显示3行，但是我们也可以输入多行数据，cols指一行中最多字符长度(一个汉字占两个字符长度)
- 我们后续会用css改变大小，不会使用rows和cols
我们写一个看一下
我们可以在其中写字符
我们可以在这个地方写上默认的字符
这样我们打开后就是这个样子
16 label标签
常配合表单中的checkbox与radio使用，我们先简单写一个表单
现在我想点一下这个男字，前面的单选框就被选上，这个时候我们就要用到标签了，它的语法是这样的
- id在name相同的一组按钮时，id值必须唯一
- id与for的值相同
我们用一下
我们发现现在点按钮旁边的字，按钮就可以选上了，网球我们没设置，所以网球点字按钮是没反应的
文本框同样适用
我们现在点击用户名，它就会自动聚焦到文本框上
label中不仅可以放文字，放图像或者别的什么元素也行，我们这里放一张图像
我们点击这个图像，文本框同样会获取到焦点
3389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
