html总结
一、 html
1. 作用:
写网页结构
2 HTML文件后缀
.html或者htm
3 DOCTYPE html 的作用
它是一个文档类型声明,告诉浏览器按当前标准执行代码。
4 标签
html里的标签分为两种,分别是单标签和双标签。、
单标签:非封闭类型标记,又叫空标记。
单标签:img、br 、 hr、 input、meta、source
双标记:封闭类型标记。
双标签:body、html 、h1-h6 、p、 a、 div、 span、 b 、i、 u 、s、 del、 sup、 em、 strong、 ul、 ol、 li、 dl、 dt、 dd、 table、 tr、 td、 th、caption、 thead、 tbody、 tfoot、 form、 button、 video、 audio 、header、 nav、 footer、 aside、 section、 article。
5 元素
元素指的是从开始标记到结束标记的所有内容。
6 块级元素和行内元素的区别
(1)块级元素独占一行,行内元素在同一行显示。
(2)块级元素默认宽度100%,行内元素宽度默认由内容撑开。
(3)块级元素:hn p hr body html ul ol li dl dt dd table tr td th form div header nav footer aside section article。
(4)行内元素:img span i a audio video input button select textarea b u s del sup sub em strong big small 。
(5)布局时,块级元素里可以包含行内元素和块级元素,但是行内元素一里面一般不包括块级元素。
7 图片 img
<img src=" ",alt=" " title=" ">
alt:当图片不能正常显示时显示的文字。
title:鼠标悬停在图片上时显示的文字内容。
注:img里只设置宽,不设置高,图片会等比例缩放。
8 超链接 a
<a href=""></a>
属性:target=“_blank”表示跳到新窗口打开。
target= =“_self”原窗口打开。
a还有name属性,可以通过name属性来设置锚点。
给跳转到的a加name属性,然后给点击的那个a标签的href="#name名"代码如下:
(1)跳转到同一个界面(点a跳转到a)
<a href="#box">点击我跳转到页面的另一个位置</a>
<a href=" " name="box">跳转到我</a>
(2) 从一个页面的a跳转到另一个页面的a(点a跳转到a)
<a href="03.html#box">点击我跳到03.html页面的a</a>
<a href=" " name="box">跳到我,我是03.html里面的a</a>
(3)点击a跳转到块级元素
<a href="#box1">点击我跳转到块级元素</a>
<p href=" " id="box1">跳到我这个块级元素</a>
9 文本格式化标签
<b></b>加粗<strong></strong>
<i></i>斜体<em></em>
<s></s>删除线 <del></del>
<sup></sup>上标
<sub></sub>下标
<big></big>大号字
<small></small>小号字
10 有序列表与无序列表
无序列表
<ul>
<li></li>
</ul>
有序列表
<ol>
<li></li>
</ol>
11 表格
作用:向用户展示数据
特点:同行等高、同列等宽。
<table>
<caption>表格的标题</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>
注:th可以替代td的位置,是表头,默认水平居中且加粗。
表格的属性
(1)border 表格的边框,默认无边框
(2)align 设置表格的对齐方式(默认水平居左)
(3)width height 默认由内容撑开
(4)bgcolor 背景色
(5)background 背景图片
(6)bordercolor 边框色
(7)cellpadding 设置内容距边框的距离
(8)cellspacing 单元格之间的距离,取值为0,单元格距离为0
表格合并单元格
colspan:跨列合并(取值为number)
rowspan:跨行合并
12 form表单
作用:提交数据到服务器,使页面具有交互性。
<form action=" " name=" " method=" "></form>
name:表单名称
action:提交的地址
method: 提交的方式(get 与post)
get与post的区别:
get提交数据不安全,提交数据会在地址栏显示;post安全
get提交数据有大小限制(不能大于2kb),post理论上没有限制
13 表单元素(掌握)
<form action=" " name=" " method=" ">
用户名:<input type="text" name="username" value="输入用户名">
密码:<input type="password" name="password" value="请输密码">
性别:<input type="radio" name="sex" value="men">男
<input type="radio" name="sex" value="women">女
注:单选要加name属性,而且name属性要相同
爱好:<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="play">玩
<input type="checkbox" name="hobby" value="football">足球
提交:<input type="submit" value="登录">
重置:<input type="reset" value="重置">
无功能按钮:<input type="button" value="无功能的按钮">
提交:<button>提交</button>
重置:<button type="reset">重置</button>
无功能按钮:<button type="button">无功能的按钮</button>
</form>
14 表单元素(了解)
<form action=" " name=" " method=" ">
文件:<input type="file">
注:文件要加一个enctype属性,才能成功上传文件
隐藏域:<input type="hidden" value=" ">
下拉列表:
<select name=" ">
<option value="one">小花</option>
<option value="one">小白</option>
</select>
多行文本框:
<textarea name=" " id=" " cols=" " rows=" "></textarae>
label标签(配合单选与多选按钮使用,提升用户体验度,label的for属性与单选框或者多选框的id属性绑定)
性别:<input type="radio" name="sex" value="men" id="men">
<label for="men">男</label>
<input type="radio" name="sex" value="women" id="women">
<label for="women">男</label>
15 h5新增的type类型
邮箱:<input type="email">
url: <input type="url">
搜索:<input type="search">
颜色:<input type="color">
数字:<input type="number">
范围:<input type="range" min="" max="" value=""step="">
电话:<input type="tel">
日期:<input type="date">
周:<input type="week">
月:<input type="month">
16 h5新增属性
(1)placeholder=”这里写默认提示的东西”
<input type="text" placeholder="用户名">
(2)autofocus 自动获取焦点,推荐写在第一个表单元素上
(3)required 必填项
(4)min max 最小值和最大值,配合数字和范围使用
(5)minlength maxlength 最小长度和最大长度
(6)multiple 可输入多个用逗号隔开,配合邮箱和网址使用
17 视频标签
支持格式:mp4、ogg、webM
<video src=" " width=" " autoplay controls loop muted poster=" "></video>
width:视频宽度
height:视频高度
autoplay:自动播放
controls:显示控制面板
loop: 循环播放
muted:静音播放
poster:视频播放前图片路径