重学HTML

最新推荐文章于 2022-03-25 17:01:59 发布
最新推荐文章于 2022-03-25 17:01:59 发布
阅读量109 收藏
点赞数
原文链接：https://juejin.im/post/5cc55911f265da039955e5b6
版权

HTML

HTML常见元素

head区

  • 特点：不会在页面上留下直接的内容，主要负责页面的一些资源和描述的加载
  • meta
    • 作用：提供有关页面的元信息(meta-information),比如编码格式
    • 常见属性：
      • 【1】charset,表示编码格式，一般值为"UTF-8";<meta charset="UTF-8">
      • 【2】name,提供了名称/值对中的名称,常见的有值有
        • 【2-1】keywords,搭配content属性使用做SEO优化;<meta name="keywords" content="HTML,ASP,PHP,SQL">
        • 【2-2】viewport,搭配content属性使用定义一些用户使用视口的限制;<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"">依次表示视口宽度等于设备宽度,初始化缩放比例为1.0,最大缩放比例1.0,用户不可以缩放
  • title、style、link、script、
  • base
    • 作用：页面上的所有链接规定默认地址或默认目标<base href="/">
    • 常见属性:
      • 【1】href,值为URL路径,规定页面中所有相对链接的基准 URL(必选属性)
      • 【2】target,值为_blank,_parent,_self,_top,framename,在何处打开页面中所有的链接(非必选属性)

body区

  • div、section、article、aside、header、footer
  • p
  • span、em、strong
  • table、thead、tbody、tr、td
  • ul、ol、li、dl、dt、dd
  • a
  • form、input、select、textarea、button

HTML的理解

所谓的html可以理解为一个文档,由描述文档的结构组成(标题，摘要，正文···),有区块和大纲;这样做的好处是有利于爬虫去爬取,SEO优化,更加具有语义化等

HTML的版本对比

语法对比

HTML4XHTMLHTML5
标签允许不结束标签必须结束标签允许不结束
属性不用带引号属性必须带引号属性不用带引号
标签/属性可大写标签/属性必须小写标签/属性可大写
Boolean属性可省略值Boolean属性必须写值Boolean属性可省略值

HTML5新增内容

  • 新区块标签
    • section
    • article
    • nav
    • aside
  • 表单增强(form,input)
    • input新增类型,比如日期、时间、搜索等
    • 表单验证:通过增加required,max···属性对表单进行校验
    • placeholder
    • 自动聚焦(autofocus)
  • 新增语义
    • header/footer标签表示头尾
    • section/article表示区域
      • 和div的区别，div没有任何语义，在不明确当前区域是做什么的时候使用并且div不会计入页面大纲的算法计算范围
    • nav导航
    • aside侧边栏。表示一些不是很重要的内容，比如网址的简介，友情链接等不会进入页面大纲的内容
    • em/strong强调
    • iicon

HTML元素分类

按默认样式分

  • 块级(block)
    • 【1】是一个方块的形状
    • 【2】默认会占据整行，不会给其它元素留出空间
    • 【3】可以设置宽高
  • 行内(inline)
    • 【1】不一定是方形的也可以说它不一定是有规则形状的
    • 【2】不会独占一行
    • 【3】不可以设置宽高
  • 行内块级(inline-block)
    • 【1】是一个方块的形状
    • 【2】不会独占一行
    • 【3】可以设置宽高

按内容分

  • Flow
    • 对文档流有一定影响的元素
  • Metadate
  • Heading
    • h1~h6
  • Sectioning
    • section,article,aside,nav
  • Interactive
    • 有互动的元素：跟用户有交互的元素，比如a,button,select等
  • Phrasing
    • 一些零碎的文本片段,一般是行内元素
  • Embedded
    • 嵌入其它资源的一些元素比如audio,vidio,img等

参考链接

HTML元素的嵌套关系

基本原则

  • 块级元素可以包含行内元素
  • 块级元素不一定能包含块级元素
    • p不能包含div,section等
  • 行内元素一般不能包含块级元素
    • 提到一般就肯定有特殊的，这个特殊的就是a可以包含块级元素

常见问题

  • 【1】a>div是不是合法的？为什么？参考文档
    • 根据W3C的html5的规范中，元素a的内容模式(Content model),在其包含块级元素的时候可以认为它是透明的，即浏览器在计算盒模型的时候不会讲其计算进去，所以这个答案是不一定合法的；如下例中，当我们将a标签看成透明的后，第一个div直接被body包裹，合法；第二个div直接被p包裹，不合法。
    <body>
    <a href="https://www.baidu.com">
        <div>合法的</div>
    </a>
    <p>
        <a href="https://www.baidu.com">
            <div>不合法的</div>
        </a>
    </p>
   
</body>
复制代码

HTML元素的默认样式

默认样式的意义

  • 试想一个场景哈，当用户访问我们的网站的时候此时用户的网络很差，在没加载css的时候我们更希望的是用户可以看到我们页面的结构，和拥有一定的功能，比如select下拉框。所以说html默认样式的意义对我们来说是很重要的

默认样式带来的问题

  • 表单样式需要重写，因为默认样式很丑很难满足日常的开发

CSS Reset

HTML面试真题

【1】doctype的意义是什么？

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

【2】HTML,XHTML,HTML5的关系？

  • HTML是属于SGML的一个应用,SGML是一个非常通用的标记语言
  • XHTML是属性XML的一个应用,是HTML进行XML严格化的结果
  • HTML5不属于SGML或XML,它自己是一个独立的规范,比XHTML更加宽松

【3】HTML5有什么变化？

  • 新的语义化的元素
  • 表单增强
  • 新的API(离线、音视频、图形、实时通信、本地存储、设备能力)
  • 分类和嵌套变更

【4】em和i有什么区别？

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

【5】语义化的意义是什么？

  • 开发者容易理解
  • 机器容易理解结构(搜索、读屏软件)，大纲算法
  • 有助于SEO优化
  • semantic microtata规范

【6】哪些元素可以自闭合？

  • 表单元素input
  • 图片img
  • br,hr(水平线)
  • meta,link

【7】HTML和DOM的关系

  • HTML是‘死’的
  • DOM是HTML解析而来的，是活的
  • JS可以维护DOM

【8】property和attribute的区别？

  • attribute是‘死’的
  • property是‘活’的

【9】form的作用有哪些？

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

转载于:https://juejin.im/post/5cc55911f265da039955e5b6

weixin_34128534
关注
C/C++学习路线总结与分享
dvlinker的技术专栏
10-07 9万+
C/C++学习路线总结与分享
HTML做一个简单的页面（纯html代码）地球专题学习网站
QQ_____365392777的博客
08-19 2116
🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。🏅...
重学Html
weixin_30823227的博客
01-05 62
其实是新学Html 5 HTML5 中的一些有趣的新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、search 当前，vid...
重学html5
weixin_43756060的博客
05-08 178
DOCTYPE声明 不是html的标签，它是在告诉浏览器，页面要使用哪个HTML版本进行编写的指令 <!DOCTYPE html> 新增的标签 结构标签–有意义的div article 标记定义一篇文章 header 定义一个页面或一个区域的头部 nav 定义导航链接 section 定义一个区域 aside 定义页面内容部分的侧边栏 hgroup 定义文件中一个区块的相关信...
重学前端之HTML
dream-seeker的博客
01-19 437
HTML Hyper Text Markup Language (超文本标记语言)
重学前端-HTML篇
weixin_33887443的博客
05-09 99
标签(元素)分类HTML： Hyper Text Markup LanguageHTML标签又称为HTML元素，分内联元素、块级元素和内联块级元素。基础学习：[HTML基础文档]（1）内联元素inline element不独占一行，无法定义宽高高度由本身内容大小决定，可嵌套内联元素与纯文本strong、em、del、ins、sub、sup、span、label、a（2）块级元...
重学HTML相关笔记
XQC_KKK的博客
05-05 424
1、html简介 * 什么是html？ -HyperText Markup Language:超文本标记语言，网页语言 ** 超文本：超出文本范畴，使用html可以轻松实现这样操作 ** 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称> ** 网页语言： * 第一个html程序。 - 创建Java文件.Java ** 先编译，然后再运行(jvm) - html后缀...
jkkj重学前端全套资源
08-23
01-开篇词+学习路线+架构图 (3讲) 02-模块 一：JavaScript (15讲) 03-模块二：HTML和CSS (16讲) 04-模块三：浏览器实现原理与API (9讲) 05-模块四：前端综合应用 (5讲) 06-特别加餐 (8讲) 07-尾声 (1讲)
零基础学HTML CSS源代码
05-10
HTML基本标记.html HTML基本标记的用法。 我的第一张网页.html 演示我的第一张网页。 第2章（源代码\第2章） 示例描述：本章演示常用HTML标记和格式 注释.htm 注释的用法。 标题标记....
学习html的心得体会
热门推荐
weixin_47978224的博客
03-19 1万+
1、HTML的简介及大体介绍： HTML 是用来描述网页的一种语言。 它是一种超文本标记语言，并不是一种编程语言。它包含了一套标记标签，并用此来描述网页。因此HTML文档包含了HTML标签和文本内容。 HTML标签是由尖括号包围的关键词， HTML 标签通常是成对出现的，比如 <p> 和 </p> 标签对中的第一个标签是开始标签，第二个标签是结束标签 一个HTML元素包含了开始标签、内容、结束标签。例如：<p>这是一个段落。</p> 2、HTML的运用
HTML元素分类、嵌套关系、默认样式、面试真题
Hello
02-18 235
HTML元素分类 按样式分 block 块级 单独一行，块状 inline 行内/内联 不一定什么形状 inline-block 内联块级 <div>DIV元素</div> <p><span>内联元素</span>内联元素<strong>好巧，我也是内联元素&...
用reset.css重置浏览器默认样式的重要性
Kevin.T的前端日志
10-10 1267
遇到一个问题描述如下： 试用HTML/CSS制作一个网页头部, 要求: 头部宽度为浏览器宽度; 头部内有一个居中的,宽度为600px, 高度为30px的导航条; 导航栏内有3个栏目, 分别是”首页”, “分类”, 和”关于我们”; 每个块宽度为200px, 背景为黑色,文字为白色居中; 鼠标移动到每一个栏目上时, 栏目的背景颜色变成红色;
十、HTM经典回顾
weixin_46820017的博客
05-03 184
本文主要内容 html 的常见元素 html 元素的分类 html 元素的嵌套关系 html 元素的默认样式和 CSS Reset html 常见面试题 html 的常见元素 html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。 1、head 区域的 html 元素 head 区域的 html 元素，不会在页面上留下直接的内容。 meta title style link script base base元素的
CSS之!important（重要性）
MR_yuan24的专栏
10-19 946
我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。 如下代码： p{color:red!important;} p{color:green;} 三年级时，我还是一个胆小如鼠的小女孩。 这时 p 段落中的文本会显示的red红色。 注意：!important要写在分号的前面 这里注意当网页制作者不设置cs
html默认样式总结
wushaoxion的博客
09-25 772
我们都知道，一些html标签通常都带有默认css样式，我们在写网页时，这些默认的样式就会时不时的跳出来捣一下乱，搞得我们很是无奈。 所以成手在写css样式时，一般都会在开头写一段初始化程序，来去掉这些默认样式，最简单的方法就是使用*{margin：0;padding：0;}。 但是通常我们很少使用这种方法，因为通配符*的效率极低。 所以我们要先熟悉标签的默认样式，再来研究怎么对付他们。
html标签样式是什么意思,HTML的各个标签的默认样式是什么？
weixin_26899879的博客
06-11 327
HTML的各个标签的默认样式是什么？html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }li ...
你知道HTML标签设计的本意吗？
每天多懂一点点
08-16 712
“DIV+CSS”这个词汇不知道害了多少人，也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。这样做，对于视觉上并没有什么影响，因为还原了之前设计的页面效果图，但如果这种HTML文档交给机器（例如蜘蛛）去分析，它可能根本找不到重点，你整个页面对它来说，就如同一个白蚁窝，它第一件要做的事情可能就是把这些相同的东西给去掉，然后再做内容的筛选。
为什么要初始化css样式。
evilemon的博客
07-02 5082
首先我们要知道，每一个html标签都有其自己的默认样式，而css则可以改变html的样式。 比如一个div元素，它存在默认的margin值，而设计需要其对齐左上角，那么就要修改其margin值，对于大量的div设置就很麻烦，所以初始化css样式就很重要。 其实，各大门户网站都有其初始样式，只要通过chrome调试中的resource标签获取其css样式表即可。 各主流浏览器下的默认css样式
什么叫默认样式
m0_67176957的博客
03-25 423
默认样式 通常情况下，浏览器都会为元素设置一些默认样式。 默认样式的存在会影响到页面的布局，通常情况下，我们编写网页时，必须要去掉浏览器的默认样式(主要是pc端的页面，移动端的页面比较少) 示例:body会有一个8px的边框，会影响到我们页面的布局 <style> .box1{ width:100px; height:100px; ...
HTML入门：理解控件标签——按钮的应用
它的`value`属性可以设置为"重填"，帮助用户清除先前的输入。 HTML（HyperText Markup Language）是一种超文本标记语言，它由一系列标记符组成，这些标记符告诉浏览器如何组织和呈现网页内容。HTML是网页设计的核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值