HTML
HTML(hypertext markup language) 超文本标记语言.
HTML的注释
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
搭建前端的时候,常用注释来划分区域
<!--开始-->
代码内容
<!--结束-->
HTML的文档结构
<!DOCTYPE html> <!--只是web浏览器关于页面使用哪个HTML版本进行编写的指令>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <!--head部分给浏览器看的-->
<body>
<!--head部分给浏览器看的-->
</body>
</html>
eg:
<h1>一级标题</h1>
<a href="https://www.baidu.com"></a>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574164236&di=673d71a348017105679b4a79b29b5ba3&imgtype=jpg&er=1&src=http%3A%2F%2Fimg2.178.com%2Fnews%2F201706%2F292032664119%2F292033211715.jpg" alt="无法显示后提示的信息">
</body>
</html>
标签的分类
按是不是两头都有
- 双标签(h1,a)
- 自闭合标签(img)
按占空间分
-
块级标签 (h1~h6, p,br,hr,div)
独占一行
块级标签内可以嵌套其他块级标签和行内标签
特例:p中只能嵌套行内标签
-
行内标签(u,i ,s,b span)
行内部文本多大,就占多大
行内不能嵌套行内和块级
标签的属性
- 标签通常应该由的三个属性
- id 类似于身份证号,每一个标签都应该有id值,同一个HTML文档中,标签的id不能重复
- class 类属性,类似面向对象类的继承,class = 'c1,c2,c3' 这个标签就拥有c1,c2,c3的所有样式
- style 规定元素的行内样式(CSS样式)
head内常用标签
title 定义网页标题
style 内部支持写css代码
link 引入外部css样式文件
script 内部可以直接写js代码 也可以引入外部js文件
meta 定义网页源信息
<!--keywords表示搜啥可以搜的到-->
<meta name="keywords" content="动漫,新番,音乐,专辑,BT,游戏,手办,同人,东方,萌化,美工,汉化,galgame,漫画,同人志,同人本,呲哩呲哩 - cilicili.cc">
<!--description表示搜索后显示的内容-->
<meta name="description" content="「 动漫• 二次元 • ACG • 萌导航」人生本来很简单，只要快乐就好。 ">
body内常用标签
| 标签 | 含义 |
|---|---|
| h1~h6 | 标题标签 |
| p | 段落标签,一个p就是一行内容 |
| u | 下划线 |
| i | 斜体 |
| s | 删除线 |
| b | 加粗 |
| br | 换行 |
| hr | 一条分割线 |
body内特殊符号
| 标签 | 含义 |
|---|---|
|   | 空格 |
| & | & |
| ¥ | ￥ |
| > | > |
| < | < |
| © | © |
| ® | ® |
body内的重要标签
div 一块区域,可以在块区内填写任何内容
span 用来组合行内元素，以便通过样式来格式化它们。
div和span是前期构建网页的基本骨架
-
a 链接标签
-
跳转功能 herf参数控制跳转的地址
-
一个地址如果在机器上没有被点击过,默认为蓝色,点击过后,变为紫色
-
a标签默认是在当前窗口跳转
target = '_self' (默认)
target = '_blank' 打开新的标签页
-
-
锚点功能
-
在a标签设置id值
然后再href中传入对应a标签的id值,点击即可跳转到对应的位置
<a href="" id="a1">文章开头</a> <div style="background-color: red;height: 1000px"></div> <div style="background-color: green;height: 1000px"></div> <div style="background-color: orange;height: 1000px"></div> <a href="" id="a2">文章中部</a> <div style="background-color: black;height: 1000px"></div> <div style="background-color: green;height: 1000px"></div> <div style="background-color: orange;height: 1000px"></div> <a href="#a1">回到顶部</a> <a href="#a2">回到中部</a>
-
-
-
img 图片标签
- src
- 1.图片地址 可以是本地图片地址
- 2.url(网址) 自动向该网址发送get请求,获取图片资源
- alt
- 当前图片无法加载的时候,显示的提示信息
- title
- 鼠标悬浮在图片上的提示信息
- width和heigth
- 二者其一设置一个就可以,默认等比例缩放,
- 两个都改会导致图片失真
- src
列表标签
无序列表
ul
li
type参数
disc 实心圆点,默认值
circle 空心圆点
square 实心方块
none 无样式
有序列表
ol
li
type参数
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表
dl
dt 小标题
dd 小章节
表格标签
展示数据用
<table>
<thead>
<tr>
<th>username</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>
一个tr表示一行
一个td或者th表示一个字段或者字段内容
ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<h1>一级标题</h1>
<a href="https://www.baidu.com"></a>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574164236&di=673d71a348017105679b4a79b29b5ba3&imgtype=jpg&er=1&src=http%3A%2F%2Fimg2.178.com%2Fnews%2F201706%2F292032664119%2F292033211715.jpg" alt="无法显示后提示的信息">
<img src="111.jpg" alt="">
<p>段落</p>
<u>下划线</u>
<s>删除线</s>
<b>加粗</b>
<p>666666</p>
<br>
<p>666666</p>
<p>1111111111111</p>
<hr>
<p>11111111111111</p>
</body>
</html>
form表单
用来获取用户的输入(输入,选择,上传的文件)
再将获取的到的数据打包发送给后端.
参数
-
action 控制数据提交的地址
三种模式:
- 不写 默认值是向当前这个页面所在的地址提交数据
- 写全路径(https://www.baidu.com)
- 只写路径后缀(/index/)
-
method 控制数据提交的方式
- get form表单的默认格式,
- post
input
type参数
- text 普通文本
- password 输入的内容,在浏览器中会显示成密文
- date 日期
- radio 可选圆圈 当两个radio 的name属性相同时,变为单选
- checkbox 可选方框 多选
- hidden 隐藏
- file 传文件 如果要向后端传输文件,需要将form 中enctype属性改为
enctype="multipart/form-data" - button 普通按钮 自身没有含义,可以给它绑定js事件
- reset 重置按钮
- submit 提交按钮 能够自动触发form表单提交数据的动作
其他属性
- disable属性 禁用该input框
- value 用来设置默认值
- checked 在radio和checkbox中,默认选中
注意:当属性名和属性值相同的时候,可以只写属性名
select标签
下拉栏
一个个option标签就是一个个的选项
<p>provincesel
<select name="province" id="">
<option value="sh">sh</option>
<option value="bj">bj</option>
<option value="sz">sz</option>
</select>
</p>
默认是单选
可以给select标签添加一个multiple参数 就可以变成多选(crtl 或shift那种多选)
testarea
获取大段文本
触发form表单提交数据的动作
-
input标签的type=submit属性
<p><input type="submit"></p>执行后会自动生成一个submit提交按钮 -
button标签
<p> <button>button</button> </p>
注意:
-
所有获取用户输入的标签,都应该有name属性
name属性就类似于字典的key,input框获取到的用户输入会放到input框的value属性中,存在列表中
-
选择框 通过value属性将数据传到后端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>register</title>
</head>
<body>
<h1>register</h1>
<form action="http://127.0.0.1:8000/index/"></form>
<p>username:
<input type="text" name = "username">
</p>
<p>password:
<input type="password" name = "password">
</p>
<p>birth:
<input type="date" name = "birth">
</p>
<p>gender:
male<input type="radio" name = "gender">
female<input type="radio" name = "gender">
</p>
<p>
<input type="reset" value = "reset">
<input type="submit" value="submit">
</p>
</body>
</html>