小笔记

常见标签

  • 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文本框,可以有下拉,默认值要在标签之间加

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容