常见标签
- h1-h6,标题
h1代表页面最大的标题
h2是二级标题
h3-h6依次更弱的标题 - p
段落,表示大段文字,一般为1行至很多行 - a
链接到一个地址
< a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
< a href="#">百度</a>
<a href="#about">百度</a>
<a href="/getCourse"></a>
targer打开网页的位置,title再网页未打开时的提示信息 ,#只是代表有超链接到某个点,但是不会跳转也不会刷新,#about跳转到id为about的内容上,即为锚点
- img
自闭合标签,不用加/,即<img src="" alt="">
alt默认情况不展示,当页面出问题的图片不展示时会有一段提示,有利于优化搜索引擎 - div 语义是一大块,用于区分,给页面划分区块,让结构更清晰
- id class
给元素起名字,方便添加标记,增加样式
id 给页面上元素起一个唯一的名字,类似于人的身份证号,根据当前功能,语义化命名
class 代表一类元素,不同元素也可以添加同样的class - ul li
ul是无序列表,一般与li搭配使用,用于表示并列的内容,可相互嵌套,ul的直接子元素是li,ul的直接子元素一定是li - ol li
ol有序列表,用于展示代表步骤或者编号的内容 - dl dt dd
自定义标签dl,用于展示一系列有标题dt、有内容的元素dd
一般用于表单 - button 按钮标签
- strong em span
需要强调一下一个段落里的某几个字,可以用span
块级元素相对个别行内元素进行修改
strong强调内容,或者认为很重要的
em 强调内容,没有那么重要
span无任何强调的意思,只是可以加修饰 - iframe
用于嵌入一个页面,注意跨域问题
<iframe src="http://google.com" name="mypage"></iframe>
<p><a href="http://baidu.com" target="myPage">百度
</p>
左侧菜单栏,右边是iframe,点击左边的链接,再右侧iframe显示
应用场景,后台有很多区块,每个区块对应一个图表,一个图表作为一个iframe放在页面上,其他网站如想用,复制链接,用iframe即可。
- table
用于展示表格,一般不建议用表格做布局
thead tbody th tr td tfoot ,一般thead tbody tfoot都可以省略
tr行,th标题里的一列 td内容的一列
DOCTYPE文档保存方式,告诉浏览器用
h5的方式解析渲染页面
不加DOCTYPE浏览器以自己的方式渲染页面,是一种混杂模式
head是与内容展示无关的标签
<html lang="zh">告诉浏览器以哪种语言展示,做出一些浏览页面的语言种类选择的提示,zh代表中文
meta charset="UTF-8"中文格式
,页面保存哪种编码方式,在页面指明 meta charset="",防止出现乱码
<meta http-equiv="X-UA-Compatible" conten="IE=edge,chorme="1">
如果是使用chorme内核去渲染,如果是双核的如360用双核去渲染
<meta name="viewport" content="width=device-width, inital-scale=1,maximum-scale=1">
移动端正常显示的效果
<meta name="keywords" content="">
<meta name="description" content="">
搜索引擎优化
块级元素和行内元素
块级元素占据一整行空间h1-h6 p ul li
行内元素只占自身大小a strong em img button
form表单有什么用?有哪些常见的input标签,分别有什么用?
用于收集填写的信息,提交后台,表单的元素用form包括所有的元素,形成完整的数据
<form action="" method=""> </form> action 是表单内容提交的地址,method是提交的方式
- text,输入单行文本时用
- password,输入密码时用
- checkbox输入复选框
- textarea输入文本域<textarea neme="" value=""></textarea>
- radio单选圆角框
- reset 重置按钮
- hidden隐藏域
-submit 提交按钮 - select选择列表 <select name=""><option value=""></option></selext>
post和get方式的区别?
post get都是浏览器向服务器发送数据的形式
1、get方式提交会将内容进行拼接,在网址栏显示提交的地址,输入的内容;post方式提交网址栏不会发生变化
2、浏览器的url字符有限制,过长的是会被截断的,如果get方式传递的数据过大,服务器或得到不完整的数据。 get一般用于提交少量数据,post用于提交大量数据
3、如果想向后台要数据,查询东西,用get
4、向后台传数据,用post
5、安全性高的也用post
在input里。name有什么作用?
name属性规定input 元素的名称,用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。name值为什么,传递的就是什么,必须得有,才能传递数值后台
radio如何分组?
后台识别的为元素的value,对于radio,name是相同的,为一组,不同的为不同的组。使用的情景是本身属于同一个大类,即必须有一个统一的name,再细分不同的value。比如最喜欢的球类,name全设置为ball,value可设置为basketball,tennis等各个选项
placeholder属性有什么作用?
在页面显示的时候,输入框会有提示信息,方便用户填写,placeholder可以起到提示作用,告诉使用者此处该输入什么内容
type=hidden隐藏域有什么作用?
<input type="hidden" name="abc" value="123">
会提交给服务器,但是再浏览器页面不显示,一般用来暂存信息,使用安全策略常用
比如设置name 及value防止一些仿站,当提交信息时,后台会跟之前存的信息进行校验,对于一些仿站,虽然网站看起来一模一样,但是后台校验时不能通过
target在何处打开action
enctype编码方式
type=text普通的文本输入框,可以输入文字,单行的,回车按钮是无效的,如果有默认的值,可加value
type=password,默认显示为圆点
type=checkbox复选框,可多选
lable用来在表单,提示作用
为了让点击文字也可输入内容,设置<lable for =“username”></lable>
<input id="username" type="text" >
checkbox
file是文件上传
<input type="name" accept="image/png"只允许接受.png文件
下拉菜单select option时如果默认选择直接加selected即可
菜单项input一定要加name,否则后台识别不了,
textarea文本框,可以有下拉,默认值要在标签之间加