博主信息
博文 5
粉丝 0
评论 0
访问量 3139
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html 文档结构总结
寻梦人
原创
524人浏览过

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>
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学