HTML基础知识普及
小编:艳芬 678阅读 2020.09.14
meta/title/style/link/script/base
规定页面的字符编码meta name="viewport" viewport视口:手机屏幕/电脑屏幕等设备的视口有多大 width=device-width: 视口宽度=设备宽度 initial-scale=1.0: 初始化的缩放比例是1 maximum-scale=1.0: 最大缩放是1 user-scalable=no: 用户不能缩放
div: 是 层? 是 区域? 是 容易? 由于语义不明确,似乎可以是任意一种。 section, article, aside, header, footer: 有明确含义的 一块区域 p: 段落 span/em/strong: 行内元素(em, strong 带默认样式:em斜体 strong粗体)
table/thead/tbody/tr/td:表格相关元素。 tr(table row)表格中的一行,td(table data)单元格。 thead封装整行,将该行作为表头 th:将tr中的第一个单元格 设置为 标题单元格
ul/ol/li/dl/dt/dd:列表相关的元素。 ul(unordered list无序列表) ol(ordered list有序列表) li(list item列表项) dl(defined list定义的列表) dt(defined title定义的标题) dd(defined data定义的内容)
a:链接
form/input/select/textarea/button:表单 输入框 下拉框 文本输入区域 按钮
HTML重要属性- a[href, target] target:在哪儿打开链接,默认在当前窗口打开。target=blank新窗口打开
- img[src, alt] alt:alternative替代资源,一般为文字
- table td[colspan, rowspan] 单元行 需要占用多行/多列,使用colspan rowspan属性
- form[target, method, enctype] target: 表单提交地址 method: 提交方式)post get) enctype: encode type 编码类型(对post而言) urlencode(提交文本) formdata(把数据进行编码后 进行提交。因此,可以上传文件)
- input [type, value, name, id]
- button[type]
- select>option[value]
- label[for] 与表单项 相关联。点击某个label时,相当于点击 该label对应的表单项。用于单选框 复选框
- 描述网页内容各个部分之间的 结构关系
-
新区块标签
- section
- article
- nav
- aside
-
表单增强
- input新增类型:日期,时间,搜索
- 表单验证: required, min, max, pattern
- placeholder autofocus
- header/footer: 即可表示 网站的头部,也可表示 区块的头部(比如article中 可以包含header footer)
- section/article: div是没有语义的 区块(当找不到合适的语义标签时,就使用div). section和article相比,section适用于更琐碎的信息
- nav:navigate
- aside: 侧边栏
- em/strong: emphasis(斜体)/strong(加粗)
- i: icon图标
可以按样式,按功能(区块,链接,表单元素)
-
按默认样式分:
- block块:呈方块形状,默认会占据整行(div section article aside)
- inline行内元素/内联元素:没有 规则的形状,不会独占一行(跟文本相关的元素 span em strong)
- inline-block: 可以像inline元素一样 和其它元素 在同一行。对外像inline元素,对内 像block元素(形状可能是块状,有自己的宽高尺寸等)。 (inline-block: 一些表单元素,下拉框 输入框)
div, p 都是块级元素 span, em, strong 都是inline元素 select 是inline-block元素
-
按内容分(content model):
- Flow: 在文档流中 有一些影响的元素(大部分可见的元素 都属于flow元素)
- Metadata:表示信息的元素,有一些metadata不在flow中,html中head中的title,base,script等,这些标签是不占据文档流的。
- Heading:h1-h6标题,hgroup
- Sectioning: 主要是一些分区的元素,比如section article aside nav
- Interactive:有交互/互动的元素(和用户有交互), 链接(点了链接就跳转了). 比如 a, audio, button等 和用户有交互的元素
- Phrasing: 这部分的元素 大都属于inline类型的元素,被包含在一个段落中 是段落的一部分。phrasing本身并不是完整的(只是其他元素中的一部分),比如em(一句话中可能有两个需要强调的词组,就使用em包裹)。
- Embeded: 可嵌入的元素(是嵌入别的元素中,还是被嵌入?)一些元素 可以在其中 嵌入其他元素。比如audio video img
Flow content
Phrasing content
Interactive content
Embeded content
Metadata content
HTML元素的嵌套关系
哪些元素 可以出现在 哪些地方,哪个元素 可以被另一个元素包含。
基本原则:
- 块级元素(block) 可以包含 行内元素(inline). 比如div元素可以包含(a, span)
- 块级元素 不一定 能包含块级元素 块级 包含 块级:div包div, section包div。 块级元素(段落p) 不能包含 块级元素(div)
- 行内元素 一般不能包含 块级元素 span包div 是不行的。 行内元素(a元素) 可以包含 块级元素(div)。
* 元素的分类 * content modelHTML元素默认样式
html不写样式时,会有 默认的样式 * 默认样式的意义: 如果默认没有样式 需要对每个元素定义 各种基础的样式,增加了 开发人员的负担。 * 默认样式 会带来问题: 有些默认样式 是我们不想要的,需要清除默认样式 再写一些自己需要的样式。 比如下拉框是没办法清除 默认样式的,此时 需要的定制成本 是很高的。 有些样式 不同浏览器的处理结果 是不同的 * css reset 有些样式 是我们不想要的,统一去掉 有些样式 不同浏览器的处理结果 不一样,显式地统一 css reset的简单粗暴方式: *{ margin:0; padding:0; } 浏览器在查找元素时,使用的是什么策略?如果我用*,会不会一个一个的去匹配元素 会不会比较慢HTML面试真题
* 1. doctype的意义是什么? 对盒子模型 进行标准的处理(width看做content-width) 让浏览器知道 元素书写方法的合法性(doctype: html4, xhtml) * 2. html, xhtml, html5的关系 html属于SGML的一个应用(SGML是一个通用的标记语言,xml也是SGML的一个应用) xhtml属于xml,是html进行xml严格化的结果 html5是个独立的规范,不属于SGML或XML,书写方式上 html5比XHTML宽松 * 3.html5 有什么变化? 变化是 相对于html4 和xhtml而言的 * 增加 新的语义化元素,比如section article nav aside header footer, 便于书写 更富有语义的结构。把之前语义不强的i,b元素 都不推荐使用了。 * 表单增强,包括新的元素 和 表单验证。 * 新的API(离线application cache, 音视频,图形canvas,实时通信websocket,本地存储local storage,设备能力 包括定位 获取加速计 陀螺仪的状态) * 元素分类和嵌套的变更,html5对元素 重新进行了分类,嵌套规则也有一些变化,但是 推理的过程 完全变了,因为分类变化了。比较明显的就是a元素的变化,a能否包含 块级元素,取决于a外面的元素是什么 * 4. em和i有什么区别 主要是语义化上面的变化,em和i的默认样式 都是斜体的。 * em是语义化的标签,表强调 * i是纯样式的标签,表斜体 其没有强调的意思 * html5中不推荐使用i,一般把i作为图标 表示icon的含义 * 5.语义化的意义是什么 * html文档 按照语义化去编写 读起来就会 很容易,能够一眼看到它的大纲 开发者就容易理解 * 也是机器容易理解的结构(比如 搜索引擎,读屏软件) 如果大纲写的好,机器就容易理解你的页面 * 有助于SEO * 不要到处用div,需要section就用section 需要article就用article * semantic microdata,这是另外一个规范 会在html中添加一些新的标记,让后去标注 这个东西 是什么。对页面中的元素 做进一步的语义化标记 方便搜索。 * 6.哪些元素可以自闭合 不是所有的元素里面 都可以放别的元素的,有些元素就是放在那儿 它里面就没有别的元素了。常见的有以下这些元素: * 表单元素input(input框内 不能有其他元素) * 图片img(不能在图片中嵌入 别的元素) * br hr(br换行 hr水平线) * meta link(元信息:meta link) * 7.HTML和DOM的关系 * HTML是写好的带结构的文本,是'死'的 * DOM是 由HTML 经过浏览器解析 而来的,DOM是存在于浏览器内存中的 一个树状的结构, 是'活'的 * JS维护DOM * 8.property和attribute的区别 一般都译作'属性',认为:property是'特性' attribute是'属性'. * 写在html中的 被认为是 attribute * property一般被用在 (html经过解析之后的得到的dom)dom元素中 调试技巧,在inspect查看器中选中的元素 在console中有个名称'$0'. 使用'$0',可以查看选中元素的一些属性。 * 9.form的作用有哪些 使用form有很多好处,就算是用ajax提交数据 也应该加上form。 * 直接提交表单(直接用get/post的方式 进行表单提交),必须有form * 表单和submit/reset配合,submit可以提交表单 reset可以重置表单 * 使用form 可以使 浏览器记录下 表单中的数据 * 第三方库 可以整体提取值 jquery中的serialize 可以把表单中的值 * 第三方库 在有form时,才能进行表单验证
相关推荐
- 前端面试题-HTML语义化标签 一、HTML5语义化标签标签描述article页面独立的内容区域。aside页面的侧边栏内容。bdi允许您设置一段文本,使其脱离其父元素的文本方向设置。command命令按钮,比如单选按钮、复选框或按钮details用于描述文档或文档某个部分的细节dialog对话框,比如提示框sum…
- 精选前端面试题之HTML5/CSS3 1、xhtml和html有什么区别?HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。2、什么是盒子模型?在网页中,一个元素占有空…
- 3DMAX提示和技巧 本主题标识使用 Civil View 的一些重要提示和技巧。常规使用屏幕分辨率至少为 1280x1024 的 Civil View。低于此分辨率时,一些面板将占用过多屏幕空间。 将视口设置为线框显示以达到最佳性能。 要尽可能简化用户界面,请在单个视口中工作并关闭 3ds Max 命令面…