html基础相关

Yibo98145
211 阅读9分钟

基本概念

  • 网页的核心技术:域名知识+HTTP服务器知识+HTML知识+其他知识
  • www即万维网=URL+HTTP+HTML。WWW服务器通过超文本标记语言(HTML)把信息组织成为图文并茂的超文本，利用链接从一个站点跳到另个站点。是由不同的文档、多媒体文件连通而形成的逻辑网络。前端核心没有包含css，js，早期网页只有HTML。
  • 互联网:不管用什么办法能使彼此通讯的，统称为互联网。这个网络可大可小，小到只有两台设备相连，大到可以亿万设备互通。
  • 因特网:是互联网的一种，必须是一定规模的网络设备这个网最大，几乎全世界的计算机以及计算机相关的设备都连进来了。所以因特网就是全世界最大的网，而且能提供多种网络服务的网。万维网依存于因特网，没有因特网就没有万维网。
  • 互联网包括因特网，因特网包括万维网。

背景以及现状

在www发明以前没有网页的概念，交流靠发送邮件。互联网为ip到ip的网络。在1990年左右tim-berners-lee发明了www让每个人输入网址就可看到网页。发明了URL，HTML，HTTP。创立了w3c制定规则。
浏览器历史内核历史

浏览器内核

渲染引擎，负责对网页语法的解释,并渲染（显示）网页。

内核种类

  • Trident（IE内核）
    IE、360浏览器、QQ浏览器、搜狗浏览器、遨游浏览器（国内浏览器）
    Gecko（Firefox内核）旧
  • Netscape
    Presto （Opera老内核）旧
  • Opera， 新版Opera使用Blink
    Webkit (Safari内核)
  • Safari 、老的Chrome、360极速版、搜狗高速浏览器、Android默认浏览器（高速版）
    Blink （Chrome内核，基于 Webkit开发）
  • Chrome、Opera、未来的Edge。
  • X5
    微信小程序
  • 双核浏览器
    Trident + Webkit 或者 Trident + Blink（兼容模式和极速模式）

HTML

HTML全称超文本标记语言，定义了网页内容的含义和结构，用标签让浏览器知道文本各部分是什么，哪里是标题，列表以及该怎么显示。“超文本”是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

HTML5

  • 狭义指最新版本的HTML语言含旧标签和新标签
  • 泛指HTML5和它的朋友们（css3等）它有更大的技术集，允许构建更多样化和更强大的网站和应用程序这个集合有时称为HTML5和它的朋友们，不过大多数时候仅缩写为一个词HTML5。

HTML基础语法

  1. HTML 由一系列的元素（elements）组成
  2. 元素也可以有属性（Attribute），属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。
  • 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
  • 属性的名称，并接上一个等号。
  • 由引号所包围的属性值。(不包含 ASCII 空格（以及 " ' ` = < > ）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。与命令行作比较)
  • 布尔属性没有值，只有真与假
  1. HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。
  2. 不包含任何内容的元素称为空元素。比如<img> 元素没有</img> 结束标签，以前的语法会有 <img />现在不需要。
  3. <!--...--> HTML注释
  4. 代码排错，搜索w3c validator

HTML文档详解

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>
  • <meta charset="utf-8">放在第一排，防止出现汉字浏览器看不懂
  • <!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年），DOCTYPE 用来链接一些 HTML 编写守则，有点像自动校正等。只是因为历史原因必须将它们保留，但没有实际作用。现在只需在文件开头写上即可不写会进入怪异模式。
  • <html></html> — <html> 元素。这个元素包含了整个页面的内容，有时也被称作根元素。属性lang="en"or"zh -CN"浏览器的翻译插件就是根据这一属性翻译的
  • <head></head> — <head>元素。这个元素放置的内容不是展现给用户的，而是包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS样式表和字符编码声明等。head中的标签大部分时间与顺序无关涉及到css和js时与顺序有关utf-8写在最前面。
  • <meta charset="utf-8">— 这个元素指定了当前文档使用 UTF-8 字符编码 ，UTF-8 包括绝大多数人类已知语言的字符。基本上UTF-8可以处理任何文本内容，还可以避免以后出现某些问题，我们没有任何理由再选用其他编码。
  • <title></title> — <title>元素。这个元素设置页面的标题，显示在浏览器标签页上，同时作为收藏网页的描述文字。
  • <body></body> — <body>元素。这个元素包含期望让用户在访问页面时看到的内容，可以是文本、图像、视频、游戏、可播放的音轨或其他内容。

章节标签

  • 标题h1-h6
  • 章节section
  • 段落p
  • 文章article
  • 页眉header
  • 页脚footer
  • 主要内容main
  • 旁支内容aside
  • 划分div（块元素）
  • 行内划分span（内联元素）

全局属性

全局属性是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。

  • class表示类别<div class="box1 box2 textbox">这个div就被同时赋予了box1、box2、textbox这三个class类名，中间使用空格隔开。
  • 表示元素是否可被用户编辑contenteditable布尔属性，没有值
  • hidden让一个元素看不见
  • ID表示元素的id，尽量用class不要用id，因为id唯一性不会得到保证会误导人。用js语法找id xxx.style时有许多忌讳，window已经有的全局属性都不可以
  • style样式属性，若head里的css和元素里面有style，那么元素里的style优先级高
  • tabindex指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名
    abindex=负值 (通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。
    tabindex="0" ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的，通常是最后。
    tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。
  • title包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户。鼠标浮上去即可显示出来的

默认样式

是指html标签本身带有的样式，通常不是理想的样式，css reset重新写默认样式通常将默认样式清零。可以去淘宝查看他们的reset。

内容标签

  • 有序列表
<ol>
  <li>  </li>
</ol>
  • 无序列表
  <ul>
    <li></li>
  </ul>
  • 描述列表
 <dl>
      <dt>描述对象</dt>
      <dd>描述内容</dd>
</dl>
  • html中多个连续的空白或换行都会变成一个表现，若想讲所有空格表现出来需要用
    • 

  • <code>代码</code>code标签中的字体是等宽的，code默认样式是内联元素，通常用pre包裹code
    • 

  • <hr>水平分割线，空元素
    • 

  • <br>回车，空元素
    • 

  • <a href="www.baidu.com"></a>链接
    • 

  • <em></em>，<strong></strong>强调
    • 

  • <quote></quote>内联引用
    • 

  • <blockquote></blockquote>块引用
    • 



块级元素和内联元素 Block-level elements and Inline elements.


    

  • 块级元素在页面中以块的形式展现——相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
    • 

  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素a或者强调元素em和strong。
    
块级元素
    • 



以后待补充:


所有标签必须闭合，比如<p></p>？

CSSRESET?

读完https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web以及网道即可




developer.mozilla.org/zh-CN/docs/…




 
 
 
 
avatar 
  
 
文章
  
阅读
  
粉丝