前端三大件：HTML+CSS+JS

今天我们就来说一说HTML，可能很多人觉得这个太简单了，就是平常写网页的一堆元素。然而越是基础的东西人们越容易忽略，所以特意梳理了下相关知识，希望加深对它的理解。

是什么

HTML（HyperText Markup Language）超文本标记语言。顾名思义，它是一门语言，用来标记文档结构的语言。就像你写 word 一样，有各种格式和大纲，HTML描述了网页文档的结构，标记各种区块。

我的学习交流群点击：web前端学习交流群

版本

如果你很早以前就接触过 html,那你肯定知道下面的写法：

<!-- HTML4.01 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!-- XHTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

上面分别是 HTML4 和 XHTML 的声明部分，其中的DTD规定了可用的元素和属性，这样浏览器才能正确地渲染网页。HTML4/4.01(SGML)时代，语法较为随意，比如标签可以不闭合/大写/属性可为空等，所以各大浏览器会有语法容错机制，自动补全标签闭合等。到了后来，大家觉得这并不是浏览器该做的事情，所以有更为严格的XHTML（xml）：必须小写/闭合/属性带引号等等。但是XHTML愈加严格繁琐的语法让人不耐烦了，所以 HTML4 的下一个版本也即HTML5横空出世，轻松的语法，更多语义化的元素以及表单增强等等。

<!-- HTML 5 声明 -->
<!DOCTYPE html>

注：HTML5是主流和未来，所以下文内容均是以 HTML5 为参考。

元素

HTML 文档由各种元素和属性组成，描述了网页的结构。

常见元素HTML文档元素从上至下包括：

  • doctype:文档声明
  • head部分：包含页面设定，标题，引用资源等
    • meta
    • title
    • style
    • link
    • script
    • base
  • body部分：网页呈现出来的部分
    • div/section/article/aside/header/main/footer
    • p
    • span/em/strong/i
    • table/thead/tbody/th/tr/td
    • a
    • form/input/select/button/textarea

元素分类
按照默认样式分类

  • 块级 block: 独占一行或多行,可以设置宽高及对齐等属性
  • 行内 inline：不占独立区域，靠自身内容支撑结构，和相邻元素和睦相处，宽高无效，但水平方向可以设置padding和margin
  • 内联块级 inline-block：和其它inline元素同行显示，同时也可以设置宽高/margin/padding（水平和垂直）

按照元素类别
HTML5中的每个元素都可以归为零个或多个类别，这些类别将具有相似特征的元素分组在一起。w3c中使用的主要类别如下:

  • Metadata content（元数据元素）是可以被用于说明其他内容的表现或行为，或在当前文档和其他文档之间建立联系的元素。
  • Flow content（流元素）是在应用程序和文档的主体部分中使用的大部分元素。
  • Sectioning content（区块型元素）是用于定义标题及页脚范围的元素。
  • Heading content（标题型元素）定义一个区块/章节的标题。
  • Phrasing content（语句型元素）用于标记段落级文本的元素。
  • Embedded content（嵌入型元素）引用或插入到文档中其他资源的元素。
  • Interactive content（交互型元素）专门用于与用户交互的元素。

元素的嵌套

你可能听说过以下常见的元素的规则：

<!-- 块级元素可以包含内联元素 -->
<div><span></span></div>
<!-- 块级元素可以包含某些块级元素 -->
<section><div></div></section> <!--正确-->
<p><div></div></p> <!--错误-->
<!-- form/a 不能再嵌套自身 -->
<a><a></a></a>
<!-- 内联元素一般不能嵌套块级元素 -->
<body><a><div></div></a><body> <!--HTML4中不合法（但浏览器支持）/但HTML5中是合法的-->其中关于HTML4的嵌套规则可以参考这里, 而HTML5中对元素重新做了分类，嵌套关系根据元素的content model进行合法确定。比如上面的a>div在HTML5中就是合法的。参考HTML5中的a定义,它的内容模型定义为transparent(透明),透明的意思就是在计算合法性的时候，会忽略a本身，嵌套关系需要根据a的父标签来决定。请看下面嵌套：


<!--第一种嵌套-->
<div><a><div></div></a>
</div><!--第二种嵌套-->
<p><a><div></div></a>
</p>

第一种是合法嵌套，因为相当于div嵌套div，而第二种则不合法，因为相当于p嵌套div,浏览器会进行猜测解析，不妨在浏览器测试一下哦。

语义化

先来看两段html代码:

<!--使用万能div-->
<div class="header"></div>
<div class="left"></div>
<div class="container"><div class="content"></div>
</div>
<div class="footer"></div><!--不使用div-->
<header></header>
<nav></nav>
<main><article></article><aside></aside>
</main>
<footer></footer>

对于上面两种写法，第二种就是HTML语义化。可能有人觉得这两种写法没什么太大区别呀，结构都很清晰，但是如果脱了css这层外衣，你觉得哪种写法更容易理解呢？所谓HTML语义化，就是用最恰当的元素标签标记内容结构。

为什么需要语义化呢？

  • 在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构；
  • 语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式；
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
  • 提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
  • 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
  • 通常语义化HTML会使代码变的更少，使页面加载更快。

那怎么写语义化的HTML呢？
尽可能少的使用无语义的万能标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

浏览器默认样式

现代浏览器对于HTML元素都提供了了默认的样式，比如body默认有一定的margin,下拉框/按钮等都有默认的外观。然而，这些默认的样式某些情况下会带来问题，比如我们想要定制下拉框的外观，那就需要花费精力去处理默认样式，提高了定制成本。

解决的方向大概有两个：

  • 干掉默认样式：覆盖重置（css reset）
  • 统一默认样式：修改统一

css reset的话，可以在网络上找到一些简单的代码或者简单的通过以下来重置样式：

html *{margin:0;padding:0...
}

又或者通过统一的样式来处理，比如normalize.css

我的学习交流群点击：web前端学习交流群

flask html 得到文本框 input的内容_你需要知道的HTML知识相关推荐

  1. flask html 得到文本框 input的内容_【笔记7】HTML及其常见标签

    概述:HTML(Hypertext Markup Language)是"超文本标记语言",它是制作网页的标准语言 它的标签有四个特点:尖括号包围:通常成对出现(有些不是,比如:&l ...

  2. flask html 得到文本框 input的内容_前端基础之html - 我不是蜘蛛侠

    HTML 初识 web服务本质 html是什么? 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则 ...

  3. flask html 得到文本框 input的内容_flask入门 （二）（不用写代码的前端！）

    flask入门 (二)(不用写代码的前端!) 前言 今天要介绍的依然是 flask 框架,前面介绍的仅仅是 flask 快速搭建最小应用的知识点,既然我们需要自己做网站,那肯定离不开前端页面的制作. ...

  4. 在jsp页面中点击编辑按钮，显示input边框，可编辑，点击保存按钮，输入框消失，不可编辑，并将文本框中的内容保存到数据库中

    寻找的资料 一. 默认readonly不允许编辑.点击编辑的时候加上边框样式,去掉readonly属性 <style>.readonly input{border:none}</st ...

  5. 获得焦点时选择文本框的所有内容（Vanilla JS或jQuery）

    本文翻译自:Select all contents of textbox when it receives focus (Vanilla JS or jQuery) 什么是Vanilla JS或jQu ...

  6. 删除web文本框中的内容需要或者文本框失去焦点，点击“Backspace”键时页面回退，屏蔽页面回退键的方法

    问题:web文本框中的内容需要删除或者文本框失去焦点,点击"Backspace"键时,页面就回退了,下面是一种屏蔽页面回退键的方法. 原因:当文本输入框设置为只读时,按后退键默认都 ...

  7. 文本框根据输入内容自适应高度

    2019独角兽企业重金招聘Python工程师标准>>> jQuery实现 (function($){$.fn.autoTextarea = function(options) {va ...

  8. html 获取文本框中的内容

    获取文本框中的内容有以下两种方法: 假设为如下文本框: <input type="text" value="" id="text"&g ...

  9. html隐藏input边框线,html中去掉文本框(input type=text)的边框或只显示下边框

    去掉: 只留下边框: CSS - input 只显示下边框 CSS 样式 :   border:none;   border-bottom: 1px solid #000 文本框input:text ...

  10. 如何清除文本框中的内容

    如何清除文本框中的内容: 1.设置文本框的默认值 <input name ="name" value="张三"> <input name=&q ...

最新文章

  1. 数据结构:O(nlogn)算法
  2. mysql mmm 主主_Microsoft Azure部署MYSQL-MMM(2)配置主主复制
  3. 第三道深搜-----------hdu1016
  4. 洛谷 - P4016 负载平衡问题(最小费用最大流)
  5. jQuery下如何使用Json传递数据
  6. mysql索引(b+tree)小记
  7. Flowable通过api查询流程返回流程图节点
  8. C++ 迭代器失效问题
  9. 【深度学习】循环神经网络（RNN）的tensorflow实现
  10. JavaScript中document.getElementById和document.write
  11. 现代通信原理3.2：线性系统的时域与频域特性
  12. centos修改用户密码图形化
  13. serialVersionUID 生成
  14. thinkphp5地址的获取和修改接口过程
  15. 没有心的男人 2012-02-08 21:11:06
  16. 云溪云原生分布式数据库安全功能以及实现介绍
  17. NC平台 后台任务配置
  18. 无鸭不过秋，这样吃鸭润燥解乏！
  19. 计算机管理主分区改成逻辑分区,win10系统电脑的四个分区都是主分区，主分区如何改为逻辑分区？...
  20. 语音识别之语音激活(VAD)检测(一)

热门文章

  1. 安科瑞企业微电网能效管理平台在某食品加工厂35kV变电站应用分析
  2. HDU 6438 Buy and Resell (优先队列 or 贪心)
  3. Acwing-4645. 选数异或
  4. 撸羊毛之殇系列——之抖音极速版
  5. LIN总线开发:STM32F0 TJA1020
  6. OpenGL ES EGL eglMakeCurrent
  7. Nginx reopen reload作用及工作过程
  8. mysql 校验 身份证_MySql整理篇之身份证校验
  9. 工欲善其事，必先利其器-程序员工具推荐
  10. php滚动公告栏,jQuery实现上下滚动公告栏详细代码