【前端】HTML
【摘要】 如今，网上已经存在大量前端教程。虽然教程内容充足，但是往往过于繁杂，导致萌新学了忘，忘了学，学了用不到，用到了还记岔了，于是便怀疑自己。我也有着这样的感触。
如今，网上已经存在大量前端教程。虽然教程内容充足，但是往往过于繁杂，导致萌新学了忘，忘了学，学了用不到，用到了还记岔了，于是便怀疑自己。我也有着这样的感触。但有幸遇到了suency666前辈，前辈授课输出精华，绝不拖泥带水，作为萌新感激不尽。
一、什么是HTML
超文本标记语言（英语： HyperText Markup Language ，简称 HTML ）是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点， HTML 运行在浏览器上，由 浏览器 来解析。
二、HTML标准的文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> 声明为 HTML5 文档
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
其他不用管
三、HTML语法
双标签
-
<元素> 受标记影响的内容 </元素>
-
<元素 属性 1= 属性值 属性 2= 属性值...> 受元素影响的内容 </元素>
<h1>内容</h1>
<div id="news">这是我的一条新闻</div>
单标签
-
<元素/>
<img src="a.png" />
四、HTML常用标签
<a>, <br>, <div>, <h1>-<h6>, <textarea>, <select>, <label>, <hr>, <img>, <input>, <p>, <span>, <table>
其他标签用到再查：HTML <a> 标签
五、HTML <a> 标签
可以分为三大类：块级元素，内联元素，内联块级元素
⚫ 块级元素
◼ 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
◼ 元素的高度(height)，宽度(width)，行高(line-height)以及顶和底边距(margin,padding)都可设置
◼ 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）常用的块元素有：
<div>,<p>,<h1>...<h6>,<ul>,<ol>,<dl>,<table>,<address>,<blockquote>,<form>设置display:block，可以将元素转换块级元素
⚫ 内联元素
◼ 和其它元素都在一行上
◼ 元素的高度，宽度及顶部和底部边距不可设置
◼ 元素的宽度就是他包含的文字和图片的宽度，不可改变。
◼ 常用的内联元素有：<a>,<span>，<br>,<strong>,<em>
◼ 设置display:inline；可以将块级元素转换为内联元素
⚫ 内联块级元素
◼ 和其它元素都在一行上
◼ 元素的高度，宽度及顶部和底部边距可设置
◼ 常用的内联块状元素有：<img> , <input>
display:inline-block;
float:left/right;
position: absolute/fixed;可以将元素设置为内联块级元素
六、明明展示效果可以由css解决，为何还要那么多语义化标签？
-
为了搜索引擎优化（SEO）
搜索引擎：百度、搜狗、Bing、Googel，每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码，如果不使用语义化，搜索引擎没办法识别网页的大致内容。
语义化做的越好，搜索引擎就越能理解我们网页的内容，提高网页被搜索到的可能
-
为了让浏览器理解网页
阅读模式 、语音模式
像div这样没有任何语义的元素很有可能被阅读模式插件给忽略掉
标签语义化很重要，但不意味着萌新要把HTML所有标签吃个遍，而是学好基础的几个，等掌握前端绝大多数技术栈，需要精益求精时，再回头学
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）