简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html 文档结构总结
Blogger Information
Blog 5
fans 0
comment 0
visits 1592
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html 文档结构总结
寻梦人
Original
244 people have browsed it

Html 页面结构

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10. </body>
  11. </html>
  1. <!DOCTYPE html> 文档类型是html。
  2. html 根元素：浏览器渲染html的起点，入口。
  3. <html lang="zh-CN"> 属性，标签的特征，页面语言。
  4. html 根元素只有两个子元素 <head> 和 <body> 。
  5. <head> 头元素：针对浏览器，搜索引擎SEO 。
  6. <meta> 元标签：中介，媒婆：描述其他元素 。
  7. <meta charset="utf-8"/> ： 页面编码 。
  8. <title> : 页面标题。
  9. <body> 页面主体。

HTML 页面视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 是逻辑宽度：开发的时候用的宽度。
device-width是物理宽度：设备宽度。

html 标签

  1. 素: 页面成员
  2. 标签: 描述元素
  3. 属性: 标签特征

属性

  1. 双标签: 元素
  2. 空标签: 元素占位符
  3. 预定义标签: 浏览器自动识别,有预定义样式
  4. 自定义标签: 内容和行为由用户自定义后浏览器才能识别

属性

  1. 使用键值对描述,class="title"
  2. 预定义属性: id,class,style,src,type,name,...
  3. 通用属性: id,class,style
  4. 自定义属性: data-前缀,如data-email

语义化布局标签

  1. 优点直观,SEO,缺点数量有限,且层级会过深
  2. 有限的回退到tag + class,如<div class="xxxx">

图像

img src="url" alt="" />

1.src 是图像链接。
2.alt是进行图像描述。

链接

<a href="http://" target="_blank"></a>

  1. href 是链接地址。
  2. target的属性有四个，但我们常用的是两个：_blanl:打开新的页面窗口，_self打开在当前页面，是默认值。

列表

1. 无序列表

  1. <ul>
  2.   <li>item1</li>
  3.   <li>item2</li>
  4.   <li>item3</li>
  5. </ul>

2. 有序列表

  1. <ol>
  2.   <li>item1</li>
  3.   <li>item2</li>
  4.   <li>item3</li>
  5. </ol>

3. 自定义列表

  1. <dl>
  2.   <dt>title</dt>
  3.   <dd>description</dd>
  4. </dl>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！