date: 2021-07-29
tags:
- 前端
- HTML
categories: 前端
文章目录
最近突然想学学前端，记点笔记 记录一下学习过程给自己看。
文档结构
<html>
<head></head>:head内标签定义一些配置，给浏览器看
<body></body>:body内标签写什么浏览器就渲染什么，用户就能看到什么
</html>
标签的分类
单标签:<img/> 双标签:<h1></h1>
- 块儿级标签：独占一行，可以修改长宽，内部可以嵌套任意块儿级标签和行内标签。p标签只能嵌套行内标签
h1~h6 p div
- 行内标签：自身文本多大就占多大，不能嵌套块儿级标签，可以嵌套行内标签
i u s b span label input
标签具有的两个重要属性
- id值
类似于标签的身份证号，同一个HTML页面上id值不能重复
- class值
类似于面向对象里类的继承，一个标签可继承多个class值
标签既可以有默认的属性，也可以自定义属性
所以标签可以存储数据
<p id="d1" class="c1" username="jason" password="123"></p>
head内常用标签
<title>Title</title>:展示网页的标题
<style>
h1 {
color:green
}
</style>:内部用来书写CSS代码
<script>
alert(123)
</script>:内部用来书写js代码
<script src="js文件路径"></script>:还可以引入外部js文件
<link rel="stylesheet" href="css文件路径">:引入外部css文件
meta标签：共有http-equiv和name两个属性
1.http-equiv属性：相当于http文件头作用，向浏览器传回一些有用信息，帮助正确显示网页内容，与之对应属性值为content，content中内容就是各个参数的变量值
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset="UTF8">
<!--告诉浏览器 2秒后跳转到对应网址-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--告诉IE以最高模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性：用于描述网页，与之对应的属性值为content，content中内容主要是便于搜索引擎机器人查找信息和分类信息
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<!--用浏览器搜索时只要输入keywords后面指定的关键字那么该网页都可能被展示给用户-->
<meta name="description" content=".....">:网页的描述性信息
body内常用标签
基本标签
<h1></h1>:标题标签 1~6级标题
<h2></h2>
<h3></h3>
...
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p></p>:段落标签，一个p分一个段落
<br>:换行
<hr>:水平分割线
特殊符号
空格
> 大于号
< 小于号
& &符号
¥ ￥符号
常用标签
<div></div>: 块儿级标签
<span></span>: 行内标签
<!--上述两个标签是在构造页面初期最常使用的。
页面的布局一般先用div和span占位之后再去调整样式，
div使用非常频繁,可看成一块区域,用它规定好所有的区域,之后往该区域填写内容
普通文本先用span标签占位，之后再写具体的
-->
img标签
图片标签
<img src="" alt=""> <!-- src:1.放图片的路径，本地或者网络的 2.放url,自动朝该url发送get请求获取数据 alt:当图片加载不出来时，给图片的描述性信息 title="新垣结衣":当鼠标悬浮到图片上之后,自动展示的提示信息 height="800px" width="":高度和宽度当你只修改一个的时候，另一个参数会等比例缩放 如果手动修改两个参数但是没有考虑比例问题，图片会失真 -->a标签
链接标签:点击即跳转到对应网址
如果a标签指定的网址没有被点击过，颜色是蓝色，点击了之后是紫色(浏览器记忆了)
<a href="https://www.baidu.com/" target="">点我有你好看</a> <!-- href:1.放url,用户点击会跳转到该url页面。 2.放其它标签的id值,点击即跳转对应的标签位置 target:1.默认是_self,在当前页面跳转 2.放_blank,在新建页面跳转 -->
a标签的锚点功能eg：点击一个文本标题，页面自动跳转到对应内容的部分
<a href="" id="d1">xx</a> <a href="#d1">跳转到xx</a>
列表标签
无序列表(较多)
<body>
<ul type="">
<li>第一项</li>
<li>第二项</li>
</ul>
</body>
<!--排版一致的几行数据,基本都是ul标签
type:1.circle,空心圆点
2.none,没有样式
3.square,方块
-->
有序列表(了解)
ol 标签套 li 标签
标题列表(了解)
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
表格标签
只要是展示数据,一般可以使用表格标签
<body>
<table border="">
<thead>
<tr>
<th>加粗</th>
<td>不加粗</td>
</tr>:一行
</thead>:表头(字段信息)一般加粗，所以用th较多
<tbody>
<tr>
<td rowspan="2">数据部分</td>
<td colspan="2">数据部分</td>
</tr>:一行
</tbody>:表单(数据信息)
</table>
</body>
<!--
<table border="">:border 加外边框
<td rowspan="2">数据部分</td> rowspan 水平方向占两行
<td colspan="2">数据部分</td> colspan 竖直方向占两行
-->
表单标签form
获取前端用户数据(用户输入、选择、上传…)发送给后端
- form表单默认提交数据的方式是get请求
数据是直接放在url后面的，有name属性的input标签,输入值以?形式直接拼接在url后面
<form action="https://127.0.0.1:5000/index/"> username:<input type="text" name="username"> gender:<input type="radio" name="gender">女 gender:<input type="radio" name="gender">男 </form> 输入值后url变为https://127.0.0.1:5000/index/?username=输入值&gender=on
- 可以通过method指定提交方式
<form action="https://127.0.0.1:5000/index/" method="post">
- input标签要有name属性，在后端会以字典 键值对的形式获取所有用户输入的数据。键是name属性值。name=“username”：属性值是username，即键是username，用户输入的数据就是键值
针对不需要输入内容而是只需要选择的标签，需要提前给标签添加内容即value值。否则后端键值对的值是“on”。
gender:<input type="radio" name="gender" value="female">女<!--这个 女 字只是给用户看的，value里的才是标签的值-->
- form表单提交文件
1.method必须是post
2.enctype=“multipart/form-data”
<form action="" method="post" enctype="multipart/form-data">enctype类似于数据提交的编码格式，默认是urlencoded只能提交普通的文本数据，改成formdata就支持文件数据
<!--写一个注册功能-->
<form action=""></form>:在form标签内部写的获取用户的数据都会被提交到后端
<!--
action:控制数据提交的后端路径(给哪个后端提交数据，腾讯？百度？)
1.什么都不写，默认朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com 朝百度服务端提交
3.只写路径后缀 action='/index/'
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
-->
<body>
<h1>注册页面</h1>
<form>
<label for="d1">
username:<input type="text" id="d1">
</label>:给input框加标识,input框写在label内。即input框需要一个名字
<label for="d2">password:</label>:通过id值链接，不需要嵌套
<input type="text" id="d2">
<!--input不和label关联也没有关系,
二者都是行内标签，用p标签嵌套可以做到分段-->
<p>生日:
<input type="date">:date参数会自动形成日历
</p>
<p>password:
<input type="password">:password参数会使输入的密码不可见
</p>
<input type="submit" value="注册">
<!--不指定按钮的文本内容，不同浏览器渲染的文本内容不一致，用value指定-->
<input type="button" value="按钮">
<input type="reset" value="重置">
<p>gender:
<input type="radio" name="gender" checked="checked">男:checked是默认选中
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
<!--password=用户input输入的内容，所以gender=input男 女 其他，input框没有键，三个都能输入都能等于
所有获取用户输入的标签都应该有name属性。
name属性类似于字典的key，用户输入的数据类似于字典的value。所以上面的gender就像变量名，指向即将获取的数据，所以只能等于其中一个
-->
</p>
<p>
<input type="checkbox" checked>read
<input type="checkbox">dance
<input type="checkbox">study
</p>
<p>province:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
</select>:默认是单选
</p>
<p>前女友:
<select name="" id="" multiple>:加了multiple能多选
<option value="" selected="selected">上海</option>:selected默认选中
<option value="">北京</option>
</select>
</p>
<p>文件:
<input type="file" multiple>
</p>
<p>
<textarea name="" id="" cols="30" rows="10" maxlength="20"></textarea>
</p>
</form>
</body>
input标签
通过type属性变形
text:普通文本
password:密文
date:日期
submit:刷新浏览器，触发form表单提交数据的动作
button:就是按钮，本身无功能，js可以给它自定义功能。使用最普遍
reset:页面不刷新，重置form表单的内容
radio:单选
默认选中要加checked="checked"(属性名和属性值一致)
但标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked>女
checkbox:多选
file:上传文件，自动调用电脑的文件夹。加multiple可以上传多个
<input type="file" multiple>
hidden:隐藏当前input框
placehold:框的提示信息，例如用户名
disabled属性：禁用，不能提交数据不能修改
readonly属性：只读，可以提交数据但是不能修改
value属性：使该框有默认输入的值。就像前面不需要输入只需要选择的标签一样提前给标签添加内容。
textarea标签
获取大段文本。
maxlength可以限制字数
cols和rows调整文本框的大小
<p>
<textarea name="" id="" cols="30" rows="10" maxlength="20"></textarea>
</p>
select标签
默认是单选，加multiple变成多选，默认选中用selected
<p>前女友:
<select name="" id="" multiple>
<option value="" selected="selected">上海</option>
<option value="">北京</option>
</select>
</p>
能够触发form表单提交数据的按钮
1.<input type="submit" value="注册">
2.<button>点我</button>