1. 认识HTML
- HTML是Hyper Text Markup Language(超文本标记语言)的缩写，是构成Web页面的基本元素，是一种规范，一种标准。
- HTML不是一种编程语言，而是一种描述性的标记语言，通过标识符来标识网页中内容的显示方式，例如图片的显示尺寸、文字的大小、颜色、字体等。
- 浏览器能够对这些标记进行解释，按照要求显示出文字、图像、动画、媒体等网页内容。
- HTML5是HTML的一个版本，该版本新增与优化了很多内容。现今，几乎所有市面流行的浏览器都能很好的支持HTML5，所以我们后面学习的知识都以HTML5作为标准。
2. 网页基础知识
- HTML模板的基本含义
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>-
标签知识
- 由 <> 包裹的关键词称为标签
- 标签有单标签与双标签之分
- <>之间除了标签名之外，还可以有
属性="值"的各种属性设置
-
HTML的lang属性
- 主要用于决定浏览器是否自动弹出翻译框
- 常用值
en，代表网页是一个英文网页，浏览器打开该网页会弹出翻译提示框 - 常用值
zh-cn，代表网页是一个中文网页，浏览器打开该网页不会弹出翻译提示框 - 所以，如果你网页主要服务于国内用户，值选择
zh-cn
-
结构与样式
- 结构：body中书写的内容会展示在浏览器可视区中，每个标签都有默认的样式
- 样式：通过编写css代码可以改变各个内容的样式
我们学习的路线是先学习结构部分的各种标签，再学习css改变样式。
-
前端代码书写规范
- 标签、属性名以及相关符号书写均在英文半角状态下的小写
- 养成写注释的好习惯
<!--注释--> - id、class必须以字母开头
- 所有双标签必须闭合
- 根据层次结构对标签进行tab缩进
- 属性值必须带引号，单双引号都可以，根据你们团队的开发规范来
3. 认识标签
HTML规范中有很多很多的标签，常用的标签并不多。
meta标签
meta标签写在head标签中，是一个辅助标签，根据属性不一样所表示的含义也不一样，常用的有：
<meta charset="utf-8"><meta name="keywords" content="关键词1 关键词2">— 用于表示该网页的关键词，便于搜索引擎抓取。<meta name="description" content="网页的描述">— 对该网页的简介，搜索引擎在搜索结果中会展示出来。<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">— 指定渲染内核。
div标签
用于将文档划分为独立的、不同的部分，构成完整网页的骨架。
H系列标题标签
h1~h6用于表示标题，默认加粗增大。h1建议唯一，利于SEO。
排序标签
ul 无序列表标签
<ul>
<li>31省市区新增确诊15例</li>
<li>DWG战队获得S10全球总决赛冠军</li>
<li>拜登当选新一任美国总统</li>
<li>2020天猫双11成交额4982亿</li>
</ul>ol 有序列表标签
<ol>
<li>打开冰箱门</li>
<li>将大象放进冰箱</li>
<li>关上冰箱门</li>
</ol>dl dt dd 标签
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>p 段落标签
<p>被那迎面而来的温热香风吹在脸庞上，萧炎有着瞬间的失神，狠狠的甩了甩头，将心中的旖念压下...</p>span 标签
<p>让span包裹的文字<span style="color:red">变红色</span></p>a 标签 — 超链接
<a href="https://www.baidu.com">点我跳转到百度</a>
<a href="https://www.baidu.com" target="_blank">新标签页打开百度</a>a 标签 — 锚点
<a href="#wrap">点我页面滚动到id为wrap的标签</a>
评论（0）
暂无评论