我的前端学习day02-04--HTML基础慕课总结

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有自己的尺寸,可以设置宽高,如下拉框

• 按照内容分

  • Flow
    • Heading
    • Secitoning
    • Interacive
    • Embedded
    • Phrasing
    • Metadata(some parts out of Flow)

HTML元素嵌套关系

• 块级元素包含行内元素
• 块级元素不能包含块级元素
  • • p can’t > div
    • section can > div

  • 行内元素一般不能包含块级元素

    • a 包含 div 是不一定是合法的，因为 <a> 在计算嵌套合法性时是透明的，不参与计算。合法与否取决于 <a> 外层的元素，它是否能包含 <div> 元素

遵守规则

默认样式和reset

默认样式重要,如下拉框,每个浏览器默认样式不同,所以要用CSSreset

面试真题

1. doctype的意义是什么

• 让浏览器以标准形式渲染
• 让浏览器知道元素的合法性

2. HTML,XHTML,HTML5的关系

• HTML属于SGML
• XHML属于XML,是HTML进行严格化的结果
• HTML5不属于SGML,XML,比XHTML宽松

3. HTML5有什么变化

• 新的语义化元素

• 表单增强

• 新的API（离线、本地储存、音视频、图像、实时通信、设备能力）

• 分类和嵌套变更

4. em和i有什么区别

• em是语义化的标签，表强调
• i是纯样式标签，表斜体
• HTML5中i 不推荐使用，一般用作图标

5. 语义化的意义是什么

• 开发者容易理解
• 机器容易理解结构（搜索、读屏软件）
• 有助于SEO
• semantic microdata

6. 那些元素可以自闭合

• 表单元素input
• 图片
• br hr
• meta link

7. HTML 与 DOM的关系

• HTML是“死”的
• DOM由HTML解析而来，是“活的”
• JS可以维护DOM

8. 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

9. form 的作用有哪些

• 直接提交表单
  • Method：GET/POST
• 使用 submit / reset 按钮
• 便于浏览器保存表单
• 第三方库可以整体提取值
• 第三方库可以进行表单验证