前端页⾯field_web前端:html基本操作
1. HTML概述
HTML是英⽂Hyper Text Mark-up Language(超⽂本标记语⾔)的缩写,他是⼀种制作万维⽹页⾯标准语⾔(标记)。相当于定义统⼀的⼀套规则,⼤家都来遵守他,这样就可以让浏览器根据标记语⾔的规则去解释它。
浏览器负责将标签翻译成⽤户“看得懂”的格式,呈现给⽤户!(例:djangomoan模版引擎)
总结:HTML其实就是⼀套规则,⼀套浏览器能够识别的规则;
2. 准备须知
这⾥使⽤pycharm编辑器编写html:
1)打开pycharm,新建html⽂件;
2)html效果查看:
编写html代码后,点击选择pycharm中html⽂件右上⾓显⽰的浏览器图标,查看效果展⽰;
到html⽂件路径,直接点击打开或者选择浏览器打开查看效果;
3. Doctype标准
Doctype告诉浏览器使⽤什么样的html或xhtml规范来解析html⽂档;
有和⽆的区别
BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])
这个属性会被浏览器识别并使⽤,但是如果你的页⾯没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照⾃⼰的⽅式解析渲染页⾯,那么,在不同的浏览器就会显⽰不同的样式。如果你的页⾯添加了那么,那么就等同于开启了标准模式,那么浏览器就得⽼⽼实实的按照W3C的标准解析渲染页⾯,这样⼀来,你的页⾯在所有的浏览器⾥显⽰的就都是⼀个样⼦了
有,⽤什么?
Doctype告诉浏览器使⽤什么样的html或xhtml规范来解析html⽂档, dtd⽂件则包含了标记、attributes 、properties、约束规则
4. head标签
4.1 meta标签
提供有关页⾯的元信息,例:页⾯编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词;
页⾯编码
刷新
html中提交表单用什么属性跳转
关键词
描述
IE兼容
与任何早期浏览器版本相⽐,Internet Explorer 8 对⾏业标准提供了更加紧密的⽀持。 因此,针对旧版本的浏览器设计的站点可能不会按预期显⽰。 为了帮助减轻任何问题,Internet Explorer 8 引⼊了⽂档兼容性的概念,从⽽允许您指定站点所⽀持的 Internet Explorer 版本。 ⽂档兼容性在 Internet Explorer 8 中添加了新的模式;这些模式将告诉浏览器如何解释和呈现⽹站。 如果您的站点在 Internet Explorer 8 中⽆法正确显⽰,则可以更新该站点以⽀持最新的 Web 标准(⾸选⽅式),也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的⽅式来显⽰内容。 通过使⽤ meta 元素将 X-UA-Compatible 标头添加到⽹页中,可以实现这⼀点。
当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的⽹页时,它将使⽤ 指令来确定如何显⽰该⽹页。 如果该指令丢失或未指定基于标准的⽂档类型,则 Internet Explorer 8 将以 IE5 模式(Quirks 模式)显⽰该⽹页。
4.2 title标签
元素可定义⽂档的标题。
浏览器会以特殊的⽅式来使⽤标题,并且通常把它放置在浏览器窗⼝的标题栏或状态栏上。同样,当把⽂档加⼊⽤户的链接列表或者收藏夹或书签列表时,标题将成为该⽂档链接的默认名称。
4.3 link标签
4.4 style标签
在页⾯中写样式;
4.5 script标签
5. body标签
标签⼀般分为两种:⾏内标签和块级标签;
块级标签: div(⽩板),H系列(加⼤加粗),p标签(段落和段落之间有间距)
⾏内标签: span(⽩板)
标签之间可以嵌套
标签存在的意义,css操作,js操作
5.1 P和br标签
5.2 a标签
跳转:
锚:
5.3 h标签
标题h1、h2、h3、h4、h5、h6、h7表⽰不同的⼤⼩;
5.4 div标签
块级标签-⽩板,可以设置属性;
5.5 span标签
⾏内标签-⽩板
5.6 input系列
text
password
submit
button
radio 单选框
页⾯效果如下:
checkbox 多选框
页⾯效果如下:
file 上传⽂件
页⾯效果如下:
reset 重置
页⾯效果如下:
5.7 form标签
form相当于⼀个表单,配合input标签submit可以把表单的内容提交到指定位置,提交内容以字典的形式提交{‘user’:
xx,'email':xx,'pwd':xx},key值为name属性值
action表⽰提交动作,把数据提交到指定的路径,methon指定提交类型,默认为get;
ost与get的区别:
method默认为get类型,数据会包含在html的头部进⾏提交,表现形式是点击提交后会在外部url路径上查看提交到的数据表单内容;method如果指定为post类型的话,数据会包含在html的body内进⾏提交,从外部看不出来⾥⾯的信息;
5.8 img标签
页⾯效果如下:
5.9 列表 ul dl ol
页⾯效果如下:
5.10 表格 table
简单table:
页⾯显⽰效果如下:
合并单元格:
页⾯显⽰效果如下:
5.11 label标签
点击⽂字使其关联的标签获取光标
5.12 fieldset标签
页⾯展⽰效果如下:
5.13 textarea 多⾏输⼊
显⽰效果如下:
5.14 select下拉框
显⽰效果如下:(按住ctrl点击选择,可实现多选)
6. 总结
块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素
块级元素不能放在p、h、dt标签⾥⾯,例如:不能将div标签嵌⼊p标签中等
li标签可以包含div标签
块级标签与块级标签并列,内联标签与内联标签并列
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论