共计 2057 个字符,预计需要花费 6 分钟才能阅读完成。
一、概念
1.1 超级文本
超文本是用超链接的办法,将各种不同空间的文字信息组织在一起的网状文本。
1.2 标记
<div>hello world</div>
div 标记“hello world”为一个块级元素的内容
1.3 语言
- 标记语言:html、xml
-
编程语言:
- java、c、python(强类型编程语言)
- js、php(弱类型编程语言)
二、实质
html 实质是一个在互联网上传递信息的载体的 协定,这个协定规定了咱们如何定义网页,程序员依据这个协定编写网页代码,浏览器依据这个协定解析程序员编写的代码。
三、构造
<!DOCTYPE html>
<html>
<head>
<meta>
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> 示意⽂档类型申明,阐明该⽂档为 Html5 ⽂档,告知浏览器以何种形式渲染文档。
<html> 示意 html ⽂件的根标签,所有的 html 标签应该位于 html 标签外部
<head> 示意 html 的头部,head 外部标签次要⽤于设置或者导⼊内部⽂件,⼀般不间接显示在浏览器视⼝中,常⽤的⼦标签为 meta、title、link、script,别离示意元信息设定、⽂档题目、css、js
<body> 示意 html 的体部,其外部次要放⽹⻚内容,其内容会显示到浏览器视⼝中
四、语法
4.1 正文
<!– 正文 –> html 有且只有这一种正文形式
4.2 元素
-
按标签个数
- 单标签元素
- 双标签元素
-
按元素性质
- 块元素
- 行内元素
- 按元素性能
4.3 属性
<u> 属性名不辨别大小写,属性值辨别大小写,且能够用引号引起来 </u>
- 外围属性
绝大多数标签都领有的属性 - 自有属性
某标签特有的属性
五、单标签元素
- <meta>
- <br>
- <hr>
- <img>
<u>alt</u> 属性:图片显示谬误时,在图片地位显示的文字。本质是通过文字代替图片的内容。
<u>title</u> 属性:图片失常显示时,鼠标悬停于图片上显示的文字。本质是对图片的一种 正文或形容。
六、块元素
作用:搭建网页构造
特点:
- 独占一行空间
- 默认宽度占父元素的 100%
- 高度由子元素或内容决定
- 能够通过 css 为其指定宽高
实例:
div(无意义的块元素)/html / body / h1~h6 题目 / p / ul>li / ol>li / dl>dt,dd
七、行内元素
作用:在构造中填充网页内容
特点:
- 与其余行内元素共享同一行的空间
- 宽高由本身决定
- 不能通过 css 为其指定宽高
- 设置浮动后能够设置宽高,即变为相似行内块级元素
实例:
span / a / video / audio / img(非凡的行内元素)
八、性能元素
8.1 table
格局:
<table>
<caption></caption>
<thead>
<tr>
<td\th></td\th>
</tr>
</thead>
<tbody>
<tr>
<td\th></td\th>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
属性:
border / cellspacing(单元格之间的间距)/ rowspan / colspan
8.2 form
-
input
- 单行文本框 type=text
- 明码框 type=password
- 单选按钮 type=radio
- 复选框 type=checkbox
- 附件 type=file
- select
- textarea
- button
8.3 iframe 蕴含另外一个文档的内联框架
九、语义化
9.1 概念
语义化是指对文本内容的结构化(内容语义化),抉择合乎语义的标签(代码语义化),便于开发人员浏览、保护、编写出更优雅的代码,同时辅助搜索引擎的无效爬取。
9.2 作用
- 丢掉 css 款式时能够让页面也呈现出清晰的构造。
- 和搜索引擎建设良好沟通,有助于爬虫爬取更多无效信息:爬虫依赖于标签来确定上下文和各个关键字的权重。
- 不便其余设施以标签意义解析网页。
- 便于团队开发和保护,使代码更具备可读性,缩小差异化。
9.3 html5 中的语义化标签
<header> 定义文章的介绍信息:题目,logo,slogan;包裹目录局部,搜寻框,一个 nav 或者任何相干的 logo;一个页面中 <header> 的个数没有限度,能够为每个内容块增加一个 header;
<nav> 定义文章导航栏,链接等;nav 个别和 u、li 配合做导航栏;
<main> 定义文章的次要内容 main 标签在一份文档中是惟一的,其后辈元素经常包含 <article>;
<article> 定义文档中能够脱离其余局部,一份独立的内容,通常带有题目,当 article 内嵌 article 时,里外层的内容应该是相干的,比方一篇微博和它的评论;
<section> 与 article 的差异在于,它是整体的一部分,或者是文章的一节,一般来说 section 也会带有题目;
<aside> 侧边栏(与 article 并列存在)或者嵌入内容(在 article 内),通常认为是独立拆分进去而不受整体影响的一部分,作为次要内容的从属信息,如索引,词条列表,或者页面及站点的从属信息,如广告,作者材料介绍等;
<footer> 页脚,通常蕴含作者、版权信息或者相干链接等;
起源 – 简书