Web前端 --- HTML
HTML
超文本协议
文件名的后缀
文件的后缀是给人看的,对于计算机来说,全都是二进制,之所以不同的后缀名有不同的功能,是我们程序员自己人为的定制的
注释是代码之母
HTML的注释
单行注释:
多行注释:<!-- 多行注释(分行写) --->
我们在搭建页面的时候,通常会利用注释来划分区域
HTML常用标签
#### 标签的分类1:*
1.双标签(h1,title,head,body,style,i,s,u,p,a,div,span,ol,li,table,thead,tbody,tr,td,)
2.自闭和标签(meta,scrip,link,br,hr,img)
标签的分类2:
1.块级标签 h1~h6 p br hr div
独占一行,
注意:
(1).块儿级标签内可以嵌套其他块儿和行内标签
(2).p标签虽然是块儿级标签,但是他的内部不能嵌套任何块儿级标签,只能嵌套行内标签
2.行内标签 s i u b span
内部文本多大,就占多大,行内不能嵌套行内和块
标签通常有两个属性
id 就类似于是身份证号,每一个标签都应该有id值,并且在同一个html文档中,标签的id不能重复
class 类属性 有点类似于面向对象的继承 class = 'c1 c2 c3' 你这个标签就会拥有c1 c2 c3的所有样式
head内常用标签
title:定义网页标题
style:内部支持写css代码
link:引入外部css样式文件
script:内部可以直接写js代码,也可以引入外部js文件
meta:定义网页源信息
body内常用标签
h1~h6 段落标题
p 段落标签,一个p就是一行内容
s 删除线
b 加粗
u 下划线
i 斜体
br 换行
hr 一条分割线
body内特殊符号
  空格
& &
¥ ¥
> >
< <
© ©
® ®
body内重要的标签
div 块儿标签 可以在这块区域内填写任何内容
span 行内标签 内部文本有多少占多少
body内链接标签
a
跳转功能
<a href="https://www.sogo.com">点我点我</a>
描点功能
<a href="" id="a1">文章开头</a>
<a href="#a1">回到顶部</a>
body内图片标签
img
<img src="11111.jpg" alt=""title="真好看">
参数解释:
src:向网页上展示图片的地址,也可以是url(网址)
alt:当图片加载不出来的时候,展示的提示信息
title:鼠标悬浮上去之后展示的提示信息
width和height:宽度和高度,只设置一个的时候等比例缩放,两个一起设置会失帧
body中的列表标签
无序列表
ul>li
有序列表
ol>li
标题列表
dl>dt 小标题,自动加粗
dd 小章节
body中的表格标签
<table>
<thead>
<tr> # 一个tr就是一行
<th>username</th> # th会自动加粗
<th>password</th>
<th>hobby</th>
<th>is_delete</th>
</tr> 一个tr就表示一行
</thead>
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>study</td>
<td>0</td>
</tr>
</tbody>
</table>
form表单
能够获取用户输入(输入,选择,上传的文件)并将用户输入的内容全部发送给后端
form的参数
action:控制数据提交的地址
1.不写,默认就是朝当前这个页面所在的地址提交数据
2.写全路径(https://www.baidu.com)
3.只写路径后缀(/index/)
通常情况下input需要结合label一起使用
<label for="d1">用户名:<input type="text" id="d1"></label>
绑定id值之后点击label标签内的任何位置都可以自动选中input框
能够触发form表单提交数据的动作有两个标签
1.input标签 type=submit
2.button标签
与后端进行交互,所有获取用户输入的标签,都应该有name属性
1.name属性就类似于字典的key
2.input框获取到的用户输入都会放到input框的value属性中
3.针对选择框,传到后端的数据,由value属性决定
4.form表单如果要提交文件数据,必须在form中修改一下属性
enctype="multipart/form-data"