Web前端 --- HTML

目录

• HTML
  • 文件名的后缀
  • HTML的注释
• HTML常用标签
  • form表单
    • form的参数
    • 能够触发form表单提交数据的动作有两个标签
    • 与后端进行交互，所有获取用户输入的标签，都应该有name属性

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内特殊符号

&nbsp   空格
&amp    &
&yen    ￥
&gt     >
&lt     <
&copy   ©
&reg    ®

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"