HTML基础
HTML基本理解
-
常见元素及理解
-
HTML版本
-
元素分类
-
元素嵌套关系
-
元素默认样式与定制化
-
相关真题
HTML常见元素
head中的元素
不会直接出现在页面上,表示页面的资源描述。
-
meta
-
title
-
style
-
link
-
script
-
base
//charset规定页面的字符集,确保页面不会出现编码问题,utf-8囊括基本语言 <meta charset="utf-8"> //viewport视口,页面大小,规定页面视图窗口缩放,指定页面宽度为设备宽度,初始化缩放为1,用户不能缩放 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> //base 在框架中使用,设置页面的路径 <base href="/">
body元素
-
div/section/arcticle/aside/header/footer
-
p
-
span/em/strong
-
table/thead/tbody/tr/td/th 表格相关元素
-
ul无序/ol有序/li/dl/dt/dd
-
a 链接
-
form/input/select/textarea/button 表单
div语义不明确,其他几个都是一块区域
p段落
span等是行内元素,带有一定的样式,em斜体,strong是粗体
HTML属性
属性:a[href,target] img[src,alt],
table td[colspan,rowspan], form[target,method,enctype]
input[type,value], button[type], select>option[value], lable[for]
<h1>表格</h1>
<table border="1">
<thead>
<tr>
<th1>表头1</th1>
<th2>表头2</th2>
<th3>表头3</th3>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td colspan="2">数据1<td> //占据2列的单元格
<td>数据3</td>
</tr>
<tr>
<td rowspan="2">数据1</td> //占据两行的单元格
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据2</td>
<td>数据3</td>
</tr>
</tbody>
</table>
<h1>表单</h1>
<form method="GET" action="http://www.qq.com">//放了一个链接
<p>
<select name="select1">
<option value="1">一</option>
<option value="2" selected>二</option>//选择一或者二
</select>
</p>
表头1 | 表头2 | 表头3 |
---|---|---|
数据1 | 数据2 | 数据3 |
数据1 | 数据1 占据 | 数据3 |
数据1 | 数据2 | 数据3 |
被上行数据占据 | 数据2 | 数据3 |
select>option[value]:下拉框
label[for]:label通过for属性和表单的id关联
如何理解HTML
-
文档
-
大纲: 给阅读提供方便,整体结构
-
区块
语义了解
HTML版本
发展,版本变迁,标签不同
-
html4 : 未关注标准\规范
-
html5: 考虑开发者感受,现行标准,基于以前的版本
HTML新增内容
-
新区块标签——语义化
- section
- article
- nav
- aside
-
表单增强
- 日期、时间、搜索(圆角输入框)
- 表单验证
- 通过很多属性可以进行表单验证,不需要通过JavaScript
- 有require/max/min来限制表单内容
- Placeholder自动聚焦
-
HTML5新增语义
-
header / footer 头尾
-
section / artice 区域
-
nav 导航
-
aside 不重要内容
-
em / strong 强调
- em 斜体
- strong 强调
-
i icon 图标
-
HTML元素分类
-
按照默认样式分类
- 块级block
- 默认占据整行,如p
- 行内inline
- 不会独占一行,如div
- inlineblock有自己的尺寸,可以设置宽高,如下拉框
- 块级block
-
按照内容分
- Flow
- Heading
- Secitoning
- Interacive
- Embedded
- Phrasing
- Metadata(some parts out of Flow)
- Flow
HTML元素嵌套关系
- 块级元素包含行内元素
- 块级元素不能包含块级元素
-
- p can’t > div
- section can > div
-
行内元素一般不能包含块级元素
- a 包含 div 是不一定是合法的,因为
<a>
在计算嵌套合法性时是透明的,不参与计算。合法与否取决于<a>
外层的元素,它是否能包含<div>
元素
- a 包含 div 是不一定是合法的,因为
-
遵守规则
默认样式和reset
默认样式重要,如下拉框,每个浏览器默认样式不同,所以要用CSSreset
面试真题
- doctype的意义是什么
- 让浏览器以标准形式渲染
- 让浏览器知道元素的合法性
- HTML,XHTML,HTML5的关系
- HTML属于SGML
- XHML属于XML,是HTML进行严格化的结果
- HTML5不属于SGML,XML,比XHTML宽松
- HTML5有什么变化
-
新的语义化元素
-
表单增强
-
新的API(离线、本地储存、音视频、图像、实时通信、设备能力)
-
分类和嵌套变更
- em和i有什么区别
- em是语义化的标签,表强调
- i是纯样式标签,表斜体
- HTML5中i 不推荐使用,一般用作图标
- 语义化的意义是什么
- 开发者容易理解
- 机器容易理解结构(搜索、读屏软件)
- 有助于SEO
- semantic microdata
- 那些元素可以自闭合
- 表单元素input
- 图片
- br hr
- meta link
- HTML 与 DOM的关系
- HTML是“死”的
- DOM由HTML解析而来,是“活的”
- JS可以维护DOM
- property 和 attribute 的区别](https://www.cnblogs.com/lmjZone/p/8760232.html)
二者不会相互影响
-
property 是 DOM 中的属性,是 JavaScript 里的对象
- attribute 就是 dom 节点自带的属性,例如html中常用的id、class、align等
-
attribute 是 HTML 标签上的特性,它的值只能够是字符串
- 三个方法: setAttribute、getAttribute、removeAttribute
- property 是这个DOM元素作为对象,其附加的内容,如childNodes等
-
property 是活的,getAttribute 直接获取的是 property
- form 的作用有哪些
- 直接提交表单
- Method:GET/POST
- 使用 submit / reset 按钮
- 便于浏览器保存表单
- 第三方库可以整体提取值
- 第三方库可以进行表单验证