目录
一.HTML标签
1.标签的分类
- 单标签
img br hr
<img />- 双标签
a h p div <a></a>- 按照标签属性分类
1.块儿标签
自己独占一行
2.行内(内联)标签
自身文本有多大就占多大
2.常用标签
div标签和span标签
这两个标签是没有任何意义的,主要是用来"布局"页面
div:一般用在占位置布局
span:一般用在占文本布局
img标签
用来展示图片的
例:<img src = "XXX.png" title = "XXX" width = "200px" alt = "">
src:1.内部的图片地址2.写外链的地址
title:鼠标悬停时显示的内容(是所有标签都要的)
width:图片的宽度
height:图片的高度
*******一般情况下,高度和宽度任意定义一个即可,另外一个会等比例缩放*******
alt:当图片不存在时,显示的内容
a标签
<a href = "http://www.XXX.com" target="_blank">点击</a>
href属性指定目标网页地址,该地址的几种类型:
- 绝对URL - 指向另一个站点(比如 href = "http://www.jd.com")
- 相对URL - 指当前站点中确切的路径(href = "index.html")
- 锚URL - 指向页面中的锚(href = "#top")
target:
- _blank:表示在新标签页中打开目标网页
- _self:表示在当前标签页中打开目标网页
3.标签的注意点
标签的嵌套
标签之间是可以互相嵌套的,标签套标签
块儿级元素是可以嵌套所有的标签的
p标签不能够嵌套块儿级元素,但是它可以嵌套行内元素
行内元素只能嵌套行内元素,不能够嵌套块儿级元素,就算写了嵌套也不报错,只是没有效果而已
**********针对前端来说,不会轻易报错,如果写的不对只是没有对应的效果**********
标签的两个自带重要属性
id值:相当于是人的身份证,一个文档中,id值不能够重复,必须唯一
class值:可以有多个,一个标签可以有多个class值,一个class值也可以被多个标签拥有
<div id="d1" class='c1 c2 c3'></div>
<div id="d2" class='c2'></div>
<div id="d3" class='c3'></div>
<div id="d3" class='c1'></div>#d1
.c1
要想使用id值,必须使用#开头
要想使用class值,必须使用 .开头
4.列表与表格
列表
1.无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>type属性:
- disc(实心圆点,默认值)
- circle(空心圆圈)
- square(实心方块)
- none(无样式)
2.有序列表
3.标题列表
表格
table标签:
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>凯文</td>
<td>20</td>
<td>男</td>
<td>2000</td>
</tr>
</tbody>
</table>
结果:
id 姓名 年龄 性别 薪资
1 凯文 20 男 2000
属性说明:
- border:表格边框
- cellpadding:内边框
- cellspacing:外边框
- width:像素,百分比(最好通过CSS来设置长宽)
- rowspan:单元格竖跨多少行
- colspan:单元格横跨多少列(即合并单元格)
form表单标签(注意是form,不是from)
<form action="">
<p>
<label for="inp1">
username: <input type="text" id="inp1">
</label></p>
<p>
<label for="inp2">
password: <input type="password" id="inp2">
</label>
</p>
<p>
<label for="inp3">
password: <input type="date" id="inp3">
</label>
</p>
<p>
<input type="checkbox" name="hobby"> read
<input type="checkbox" name="hobby"> music
<input type="checkbox" name="hobby"> tangtou
</p>
<p>
<input type="checkbox" name="hobby1"> read1
<input type="checkbox" name="hobby1"> music1
<input type="checkbox" name="hobby1"> tangtou1
</p>
<p>
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
<input type="radio" name="gender"> 未知
</p>
<p>
<input type="hidden" value="123">
</p>
<p>
<input type="file" multiple>
</p>
<p>
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">河南</option>
</select>
</p>
<textarea name="" id="" cols="30" rows="10">
</textarea>
<p>
<input type="submit" value="登录">
<input type="reset" value="重置"></p>
</form>
属性说明:
- name:表单提交时的”键“,注意和id的区别
- value:表单提交时对应项的值
type = "button","resect","submit"时,为按钮上显示的文本年内容
type = "text","password","hidden"时,为输入框的初始值
type = "checkbox", "radio", "file",为输入相关联的值- checked:radio和checkbox默认被选中的项
- readonly:text和password设置只读
- disabled:所有input均适用
select属性说明:
- multiple:布尔属性,设置后为多选,否则默认单选
- disabled:禁用
- selected:默认选中该项
- value:定义提交时的选项值
验证form表单朝后端提交数据
<form action = "">
action:
***写朝后端提交的地址***
这里写什么地址就朝这个地址提交数据,应该填写后端的地址
1.什么都不写:朝当前地址提交
2.全写:http://127.0.0.1:5000/index/ 朝这个地址提交
3.只写后缀:/index/ 自动补全IP
***form表单要想把数据提交到后端,每一个标签都要有一个name属性***
name的属性值就是提交到后端数据的key值,用户输入的内容就是value值
针对复选框、单选框标签都应该有一个value属性,用于区别前端用户选择的哪个选项
对于数据的提交必须满足以下两个条件:
1.请求方式必须是post
2.数据编码方式:
1.application/x-www-form-urlencoded
2.multipart/form-data
3.json
3.编码方式必须是multipart/form-data才能提交问价
4.urlencoded只能够提交不是文件的数据,form-data是可以提交普通数据和文件数据
5.urlencoded形式的数据长什么样子:
username=&password=&date=&hidden=123&myfile=&city=
6.form-data编码格式的数据:
username=&password=&date=&hidden=123&myfile=&city=
boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy
文件数据:
***对于form-data提交的数据,后端还是在form里面去普通数据,而在files里面去文件数据***
7.form表单不能够提交json数据
8.如果想提交json格式的数据:Ajax技术、第三方的api工具postman
二.CSS介绍
1.什么是CSS
CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)
***CSS就是对HTML标签做样式的,让不好看的变得好看***
2.CSS的一些常用介绍
CSS语法
选择器{
属性名1:属性值;
属性名2:属性值;
属性值3:属性值;
属性值4:属性值;
属性值5:属性值;
}
CSS注释
CSS里:
/*这就是注释*/
HTML里:
<!-- 这就是注释 -->
注释快捷键是: CTRL + ?
CSS的几种引入方式:
行内样式:
<p style = "color:red"> Hello world.</p>
内部样式:
<head>
<meta charset = "UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
外部样式:
<link href = "mystyle.css" rel = "stylesheet" type = "text/css"/>