HTML常用知识点总结
一、HTML
1.注释
<!---->
<!--注释是代码之母-->
2.HTML文档结构
<!--主要的两层结构-->
<html>
<!--head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的-->
<head></head>
<!--body内的标签 写什么浏览器就渲染什么 用户就能看到什么-->
<body></body>
</html>
<!--全部的-->
<!--html样式-->
<!doctype html> <!--表示下列文档按照HTML5的格式-->
<html lang="en"> <!--默认语言使用英文-->
<!--head头部,主要用来完成一个网页的相关设置的-->
<head>
<!--汉字编码,meta元,主要用来完成对应设置的-->
<meta charset="UTF-8">
<!--移动端开发设置-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--设置一个网站的搜索关键字-->
<meta name="keywords" content="">
<meta name="description" content=""><!-- 网站的描述内容-->
<title></title> <!--网站标签名字-->
<style>
/*书写样式的地方*/
</style>
</head>
<!--主体部分-->
<body>
</body>
<script>
/*也可以写到body内*/
</script>
</html>
1.1 head内常用标签
<head>
<title>Title</title> <!--网页标题-->
<!--内部用来书写css代码-->
<style>
h1 {
color: greenyellow;
}
</style>
<!--内部用来书写js代码-->
<script>
alert(123)
</script>
<!--设置网站小图标(浏览器标签页图标)-->
<link rel="shortcut icon" href="路径/链接" type="image/jpg">
<script src="myjs.js"></script> <!--还可以引入外部js文件-->
<link rel="stylesheet" href="mycss.css"> <!--引入外部css文件-->
<!--当你再用浏览器搜索的时候,只要输入了keywords后面指定的关键字,那么该网页都有可能被百度搜索出来展示给用户(提升SEO)-->
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<!--网页的描述性信息(百度搜索简介)-->
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!">
</head>
1.2 body内常用标签
1.2.1 基本标签
<h1>我是一号标题</h1>
<h1>我是二号标题</h1>
<h1>我是三号标题</h1>
我是普通文本
<b>我能加粗</b>
<i>我能倾斜</i>
<u>下划线</u>
<s>删除线</s> <!--中间带斜杠-->
<p>我是段落,会自动换行的那种</p>
<br> <!--换行-->
<hr> <!--分割线-->
通过上几个标签,我们会发现了一个现象,那就是有的换行有的不换行,如h标签、p标签就是换行的,而其他除了br换行符以外,其他的都是默认一行,这又是怎么回事呢。
1.2.1 块儿级标签与行内标签
1.块儿级标签:独占一行
如:h1~h6 p div
1.块儿级标签可以修改长宽,行内标签不可以,修改了也不会变化。
2.块儿级标签内部可以嵌套任意的块儿级标签和行内标签。
但是p标签虽然是块儿级标签,但是它只能嵌套行内标签 不能嵌套块儿级标签。如果你套了,问题也不大。因为浏览器会自动帮你解开(浏览器是直接面向用户的,不会轻易的报错,哪怕有报错用户也基本感觉不出来。)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签(HTML书写规范)
2.行内标签:自身文本多大就占多大
如:i u s b span
行内标签不能嵌套块儿级标签,可以嵌套行内标签。
1.2.3 特殊标签
<!--一个代表一个空格-->
> 大于号
< 小于号
& '&'符号
¥ 钱¥
© 版权©
® 商标®
展示效果:
> < & ¥ © ®
二、HTML常用标签
2.1 div与span标签
div 块儿级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的,页面的布局一般先用div和span占位之后再去调整样式,尤其是div使用非常的频繁。
div你可以把它看成是一块区域,也就意味着用div来提前规定所有的区域,之后往该区域内部填写内容即可,而普通的文本先用span标签 。
<div>
<p>嘻嘻哈哈</p>
</div>
<span>哈哈嘻嘻</span>
<span>哈哈嘻嘻</span>
2.2 img标签
格式:
<img src='' alt='' height="" width="" title="">
src
1.图片的路径,可以是本地的,也可以是网上的。
2.url,自动朝该url发送get请求获取数据
alt
当src的图片加载不出来时,输出alt后跟的内容
title=''
可以在alt后面跟上title,当鼠标悬浮在图片上时可以展示title的内容
height='800px'
width=''
高度和宽度当你只修改一个的时候,另外一个参数会等比例缩放
如果你修改了两个参数,并且没有考虑比例的问题,那么图片就会失真(压缩)
示例:
width宽height高,默认就是该图片的像素,可按照该比例进行调整
<img src="xugav.JPG" alt="徐家汇" height="1512px" width="2016px">
2.3 链接标签
格式:
<a href="" target=''></a>
href
1.放url,用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self (默认为_self)
你也可以修改为新建页面跳转 _blank
示例1:跳转至baidu.com
<!--当前页面跳转-->
<a href="https://www.baidu.com/" target='_self'>百度一下,你知道。</a>
<!--新建标签页跳转-->
<a href="https://www.baidu.com/" target='_blank'>百度一下,你知道。</a>
示例2:设置锚点(实现站内跳转)
<div style="height: 1000px;background-color: red" id="d1">顶部</div>
<div style="height: 1000px;background-color: green" id="d2">中间</div>
<div style="height: 1000px;background-color: blue">底部</div>
<a href="#d1">回到顶部</a>
<a href="#d2">回到中间</a>
<!--通过绑定id值的方式,来进行跳转-->
补充:
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
2.4 列表标签
无序列表:
<ul>
<li>第一项目</li>
<li>第二项目</li>
<li>第三项目</li>
</ul>
展示效果:
●第一项目
●第二项目
●第三项目
有序列表
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
展示效果:
1.第一步
2.第二步
3.第三步
其他样式:
<ol type="A"> </ol> 表示开头用ABC表示
<ol type="I"> </ol>表示开头用I、II、III
<ol type="1" start="5"> </ol> 从5开始
自定义列表
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<!--展示效果-->
帮助中心
账户管理
购物指南
订单操作
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
展示效果:带缩进的
标题1
内容1
标题2
内容2
2.5 表格标签
<table border="6"> <!--加边框(这里写的是6,写1、2、3都行)-->
<thead> <!--表头(字段信息)-->
<tr> <!--一个tr就是一行,下面的就是字段的内容-->
<th>姓名</th> <!--th加粗,td普通文本(这里的加粗不可以用b标签)-->
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<!--以上为表字段设置-->
<tbody> <!--表单(数据信息)-->
<tr>
<td>盖伦</td> <!--td普通文本-->
<td>39</td>
<td>DBJ</td>
</tr> <!--一个tr就是一行-->
<tr>
<td>娑娜</td>
<td>18</td>
<td>弹琴</td>
</tr> <!--一个tr就是一行,在盖伦下面又插入一条-->
</tbody>
</table>
最终效果:
后续还可以通过td标签的 colspan rowspan属性进行水平方向和垂直方向的合并。(垂直方向占多行是向下的合并的,另外还要考虑带来的数据移位问题)
rowspan = 向下
colspan = 向右
例:
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">100分</td>
<td>第一名</td>
</tr>
<tr>
<td>李四</td>
<td>第二名</td> <!--只写两条数据-->
</tr>
</tbody>
扩展,在表的上方加个名称
<table border="1">
<caption><b>成绩单</b></caption>
扩展,表格底部tfoot
会出现飘黄,不影响,都是小意思
tfoot不受宽高调整的影响
<table border="1" width="400" height="200">
<thead>
。。。。。略
</thead>
<tbody>
。。。。。略
</tbody>
<tfoot>
<td>总结</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tfoot>
</table>
2.6 input表单标签
input标签
input标签就类似于前端的变形金刚,通过type属性变形。
- text 普通文本
- password 密文
- date 日期(可通过打开小日历进行勾选)
- submit 用来触发form表单提交数据的动作
- button 就是一个普普通通的按钮,本身没有任何的功能,可通过JS来定义各种功能
- reset:重置内容
- radio:单选
默认选中要加checked='checked',可简写为checked
- checkbox:多选
默认选中要加checked='checked',可简写为checked
- file:获取文件 也可以一次性获取多个
- hidden:隐藏当前input框
2.6.1 label表单语义化
<p>
<!--带上label标签的话,可以通过点击“用户名”这些字段来跳转到输入框-->
方法1:
<label>用户名:<input type="text"></label>
方法2:
<label for="d1">用户名:</label>
<input type="text" id="d1">
</p>
可以将整个标签包裹在内,可以将文件包裹在内,随后通过lable标签内的for属性的值,与input标签的id值进行匹配。
2.6.2 radio单选
<p>性别:
<!--这里会飘黄,原因都是没有使用label,但是不影响-->
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="others">其他
</p>
<!--
radio表示单选,这里不加name="gender"的话会发现,一旦选中就不不能取消了
checked 表示默认选项
name表示后端收到数据的key
value表示后端接收到的数据 这里的name和value必须都要有,与type="text"不同,这个不用value
-->
2.6.3 date日期标签
<!--date可以通过小日历来选中时间-->
<p>生日:
<input type="date" name="birthday"> <!--这里需要加上name属性-->
</p>
2.6.4 checkbox多选
<p>爱好:
<!--表示多选,checked表示默认选中-->
<input type="checkbox" name="hoby" value="篮球">篮球
<input type="checkbox" name="hoby" value="唱歌">唱歌
<input type="checkbox" name="hoby" value="美妆">美妆
<input type="checkbox" name="hoby" value="电影">电影
<input type="checkbox" checked name="hoby" value="吃饭">吃饭
<input type="checkbox" checked name="hoby" value="睡觉">睡觉
<input type="checkbox" checked name="hoby" value="打游戏">打游戏
</p>
<!--
checkbox:默认选中
这里同样的,需要配置name属性以及value属性
-->
2.6.5 重置、提交、按钮
<input type="submit" value="注册">
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>点我</button>
<!--
submit:用来触发form表单提交数据的动作
button:就是一个普普通通的按钮 本身没有任何的功能 但是它可以使用js给它自定义各种功能
reset:重置内容
-->
2.6.6 file文件
<p>个人照片:
<!--file:获取文件 也可以一次性获取多个multiple-->
<input type="file" multiple name="myfile">
</p>
我们在上传头像这一块,需要提交文件数据,但是已我们目前的代码,后端接收到的只是文件名,而并不是内容。
解决方法:在form标签的末尾添加 enctype="multipart/form-data"
<form action="" method="post" enctype="multipart/form-data">
</form>
2.6.7 fieldset与legend
<form action="" method="post">
<fieldset>
<legend>自动化运维平台</legend>
<p>
<label>账号:<input type="text" name="username"/></label>
</p>
<label for="pwd"> 密码:</label><input type="password" id="pwd" name="password"/>
</p>
<input type="checkbox" id="remember-me" name="remember-me" value="True"/> <label for="remember-me"> 记住我 </label>
<input type="submit" value="登录" />
</fieldset>
</form>
效果展示:
2.7 select标签
2.7.1 单选
<select name="addr" id="">
<!--默认选中selected-->
<option value="sh" selected>上海</option>
<option value="bj" >北京</option>
<option value="sz">深圳</option>
</select>
<!--
与input标签不同,只需要在select标签上添加name属性即可,
option不需要添加name属性,只需要添加value
-->
2.7.2 分组单选
<!--
optgroup为组名,颜色加深。
-->
<select name="addr" id="">
<optgroup label="上海">
<option value="静安区">静安区</option>
<option value="黄浦区" selected>黄埔区</option>
<option value="徐汇区">徐汇区</option>
</optgroup>
<optgroup label="北京">
<option value="朝阳区">朝阳区</option>
<option value="海淀区">海淀区</option>
</optgroup>
<optgroup label="深圳">
<option value="南山区">南山区</option>
<option value="福田区">福田区</option>
</optgroup>
</select>
2.7.3 多选
<!--
默认是单选,可以加mutiple参数变多选,
select多选
-->
<select name="star" id="" multiple>
<option value="张国荣" selected>张国荣</option>
<option value="刘德华" selected>刘德华</option>
<option value="周杰伦" selected>周杰伦</option>
<option value="吴签">吴签</option>
</select>
2.8 textarea大段文本标签
可获取大段文本
<!-- textarea标签 获取大段文本-->
<textarea name="" id="" cols="40" rows="4">
</textarea>
<!--cols表示横向长度,rows表示纵向高度(宽度)-->
2.9 音频标签
<!--需要加上controls-->
<audio src="music.mp3" controls></audio>
src = 音频的路径
controls = 显示播放的控件、否则为空
autoplay = 自动播放(部分浏览器不支持)
loop = 循环播放
注:目前仅支持的音频格式为:MP3、Wav、Ogg
<!--还可以使用这个标签-->
<embed src="../static/music.mp3" width="400px" height="400px">
2.10 视频标签
<!--需要加上controls-->
<video src="video.mp4" controls></video>
src = 音频的路径
controls = 显示播放的控件、否则为空
autoplay = 自动播放(部分浏览器不支持,Chrome需要添加muted属性)
loop = 循环播放
muted = 静音播放
poster = 加载等待的画面图像
注:目前仅支持MP4 、WebM 、Ogg
<!--还可以使用这个标签-->
<embed src="../static/video.mp4" width="400px" height="400px">
2.10.1 谷歌浏览器自动播放
<!--
谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性
(静音播放)
-->
<video controls="controls" autoplay muted loop poster="./media/pig.jpg">
<source src="../static/video.mp4" type="video/mp4">
</video>
2.11 总结
针对用户选择的标签,需要加name、value属性。
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" checked value="female">女
<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>addr:
<select name="addr" id="">
<option value="上海" selected>上海</option>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
</select>
</p>
针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">
username:<input type="text" id="d1" name="username" value="默认值">
</label>
另外还可以跟上:
disable 禁用(输入框变成灰色,无法选中。)
readonly只读(输入框可以选中,颜色也无变化,但是不可编辑。)
我们在上传头像这一块,需要提交文件数据,但是已我们目前的代码,后端接收到的只是文件名,而并不是内容,解决方法:在form标签的末尾添加 enctype=“multipart/form-data”
<form action="" method="post" enctype="multipart/form-data">
</form>
三、input标签补充
3.1 required
'''
作用:
标记一个字段是否为必须,如果字段无数据则无法提交
格式:
<input type="text" name="name" required="required">
'''
使用效果如下:
3.2 pattern
'''
作用:
与required配合使用,利用正则可实现对用户输入的内容做校验,不符合正则的,则不能提交
格式:
<input type="text" name="name" required="required" pattern="\d">
'''
这里的正则仅做演示,作用为仅匹配数字
使用效果如下:
3.3 placeholder
'''
作用:
用来提示用户输入的,当用户真的输入了文字之后,会被输入的文字覆盖。、
格式:
<input type="text" name="name" placeholder="张三">
<input type="password" name="password" placeholder="123">
'''
注:
placeholder与value都可以做到给用户提示的效果,但是前者仅做提示,并不能直接当做默认数据进行提交,因为后端收不到数据。
后者value可以当做默认数据来直接提交,但是当用户需要进行修改时,还需要删除掉原来的“默认”数据,体验不好。
3.4 readonly
'''
作用:
使输入框无法进行编辑,但数据可以正常提交。
格式:
<input type="text" name="name" value="张三" readonly>
<input type="password" name="passwd">
'''
提交到后端的数据:
(以Django框架为例子)
<QueryDict: {'name': ['张三'], 'passwd': ['123']}>
后端可收到数据。
3.5 disabled
'''
作用:
禁用,完完全全的禁用。后端完全收不到该字段的数据。
格式:
<input type="text" name="name" value="张三" disabled>
<input type="password" name="passwd">
'''
例如:
<QueryDict: {'passwd': ['123456']}>
3.6 autofocus
'''
作用:
当页面加载完毕时,获取焦点(加载完就选中输入框)
格式:
<input type="password" name="passwd" placeholder="123" autofocus>
'''
3.7 maxlength
'''
作用:
限制输入数据的长度,超出长度的数据则无法输入进去,自然后端也就收不到。
格式:
<input type="password" name="passwd" placeholder="123" maxlength="5">
'''