1、在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格
2、在html中有些时候，我们不能直接书写一些特殊符号
3、比如多个连续的空格，比如字母两侧的大于和小于号
4、如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
实体的语法：&实体的名字；&nbsp; 空格&gt;   大于号&lt;   小于号&copy; 版本符号

2）meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看charset 指定网页的字符集name 指定的数据的名称content 指定的数据的内容keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/><meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">description 用于指定网站的描述<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>网站的描述会显示在搜索引擎的搜索的结果中title标签的内容会作为搜索结果的超链接上的文字显示

3）语义化标签

在网页中HTML专门用来负责网页的结构
所以在使用html标签的时候，应该管住的是标签的语义，而不是他的样式标题标签：h1 ~ h6 一共有六级标题从h1~h6重要性递减，h1最重要，h6最不重要h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1一般情况下标题标签只会使用到h1~h3，h4~h6很少用标题标签都是块元素在页面中独占一行的元素称为块元素（block element）
块元素（block element）- 在网页中一般通过块元素来对页面进行布局行内元素（inline element）- 行内元素主要用来包裹文字- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素- 块元素中基本上什么都能放- p元素中不能放任何的块元素浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正比如：标签写在了根元素的外部p元素中嵌套了块元素根元素中出现了除head和body以外的子元素... ...布局标签（结构化语义标签）header 表示网页的头部main 表示网页的主体部分(一个页面中只会有一个main)footer 表示网页的底部nav 表示网页中的导航aside 和主体相关的其他内容（侧边栏）article 表示一个独立的文章section 表示一个独立的区块，上边的标签都不能表示时使用sectiondiv 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素span 行内元素，没有任何的语义，一般用于在网页中选中文字

4）列表

列表（list）1、铅笔2、尺子3、橡皮在html中也可以创建列表，html列表一共有三种：1、有序列表2、无序列表3、定义列表无序列表，使用ol标签来创建无序列表使用li表示列表项  无序列表，使用ul标签来创建无序列表使用li表示列表项定义列表，使用dl标签来创建一个定义列表使用dt来表示定义的内容使用dd来对内容进行解释说明列表之间可以互相嵌套<ul><li>结构</li><li>表现</li><li>行为</li></ul><ol><li>结构</li><li>表现</li><li>行为</li></ol><dl><dt>结构</dt><dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd><dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd><dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd></dl><ul><li>aa<ul><li>aa-1</li><li>aa-2<ul><li>aa-1</li><li>aa-2</li></ul></li></ul></li></ul>

5）超链接

 超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置使用 a 标签来定义超链接属性：href 指定跳转的目标路径- 值可以是一个外部网站的地址- 也可以写一个内部页面的地址超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素<a href="https://www.baidu.com">超链接</a>target属性，用来指定超链接打开的位置可选值：_self 默认值 在当前页面中打开超链接_blank 在一个新的要么中打开超链接<a href="07.列表.html" target="_blank">超链接</a><a href="#bottom">去底部</a><a href="#p3">去第三个自然段</a><p>第一自然段</p><p>第二自然段</p><p id="p3">第三自然段</p><p>第四自然段</p><!-- 在开发中可以将#作为超链接的路径的展位符使用
可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值id属性（唯一不重复的）- 每一个标签都可以添加一个id属性- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
--><a href="#">这是一个新的超链接</a>例如上面的去到第三自然段<!-- 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生 --><a href="javascript:;">这是一个新的超链接</a>

6）图片标签

图片标签用于向当前页面中引入一个外部图片使用img标签来引入外部图片，img标签是一个自结束标签img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）属性：src 属性指定的是外部图片的路径（路径规则和超链接是一样的）alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录width 图片的宽度 (单位是像素)height 图片的高度    - 宽度和高度中如果只修改了一个，则另一个会等比例缩放注意：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大但是在移动端，经常需要对图片进行缩放（大图缩小）图片的格式：jpeg(jpg)- 支持的颜色比较丰富，不支持透明效果，不支持动图- 一般用来显示照片gif- 支持的颜色比较少，支持简单透明，支持动图- 颜色单一的图片，动图png- 支持的颜色丰富，支持复杂透明，不支持动图- 颜色丰富，复杂透明图片（专为网页而生）webp- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式- 它具备其他图片格式的所有优点，而且文件还特别的小- 缺点：兼容性不好base64 - 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片    - 一般都是一些需要和网页一起加载的图片才会使用base64效果一样，用小的效果不一样，用效果好的
<img width="200"  src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="你猜是什么意思">

7）内联框架

内联框架，用于向当前页面中引入一个其他页面src 指定要引入的网页的路径frameborder 指定内联框架的边框
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
<h1>Hello</h1>

8）音视频

  audio 标签用来向页面中引入一个外部的音频文件的音视频文件引入时，默认情况下不允许用户自己控制播放停止属性：controls 是否允许用户控制播放autoplay 音频文件是否自动播放- 如果设置了autoplay 则音乐在打开页面时会自动播放但是目前来讲大部分浏览器都不会自动对音乐进行播放 loop 音乐是否循环播放  <audio src="./source/audio.mp3" controls autoplay loop></audio> <audio src="./source/audio.mp3" controls></audio> <!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 --><audio controls><!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ --><source src="./source/audio.mp3"><source src="./source/audio.ogg"><embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100"></audio><!-- 使用video标签来向网页中引入一个视频- 使用方式和audio基本上是一样的--><video controls><source src="./source/flower.webm"><source src="./source/flower.mp4"><embed src="./source/flower.mp4" type="video/mp4"></video>

9）注释

HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的开发中一定要养成良好的编写注释的习惯，注释要求简单明了注释还可以将一些不希望显示的内容隐藏注释不能嵌套标签一般成对出现，但是也存在一些自结束标签

10）标签的属性

属性，在标签中（开始标签或自结束标签）还可以设置属性属性是一个名值对（x=y）属性用来设置标签中的内容如何显示属性和标签名或其他属性应该使用空格隔开属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来

11）网页1

<!doctype html>
<html><head><!-- 可以通过meta标签来设置网页的字符集，避免乱码问题 --><meta charset="utf-8"><title>网页的基本结构</title></head><body><!-- 迭代网页的版本HTML4XHTML2.0HTML5...文档声明（doctype）- 文档声明用来告诉浏览器当前网页的版本- html5的文档声明<!doctype html><!Doctype HTML>进制：十进制（日常使用）- 特点：满10进1- 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20- 单位数字：10个 （0-9）二进制（计算机底层的进制）- 特点：满2进1- 计数：0 1 10 11 100 101 110 111- 单位数字：2个 （0-1）- 扩展：- 所有数据在计算机底层都会以二进制的形式保存- 可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0这一个小格子在内存中被称为1位（bit）8bit = 1byte(字节)1024byte = 1kb(千字节)1024kb = 1mb(兆字节)1024mb = 1gb(吉字节)1024gb = 1tb(特字节)1024tp = 1pb八进制(很少用)- 特点：满8进1- 计数： 0 1 2 3 4 5 6 7 10 11 12 ... 17 20- 单位数字：8个 （0-7）十六进制(一般显示一个二进制数字时，都会转换为十六进制)- 特点：满16进1- 计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b 1c 1d 1e 1f 20 ..- 单位数字：16个（0-f）字符编码- 所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。所以一段文字在存储到内存中时，都需要转换为二进制编码当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读- 编码- 将字符转换为二进制码的过程称为编码- 解码- 将二进制码转换为字符的过程称为解码- 字符集（charset）- 编码和解码所采用的规则称为字符集- 乱码问题：- 如果编码和解码所采用的字符集不同就会出现乱码问题- 常见的字符集：ASCIIISO88591GB2312GBKUTF-8，在开发时我们使用的字符集都是UTF-8--><body>
</html>

12）网页2

<!-- 文档声明，声明当前网页的版本 -->
<!doctype html><!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html><!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 --><head><!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 --><meta charset="utf-8"><!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 --><title>网页的标题</title></head><!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 --><body><!-- h1网页的一级标题 --><h1>网页的大标题</h1></body></html>

一、前端入门学习笔记-标签（1）相关推荐

前端入门学习笔记（1）--html部分
这是在网上发表的第一篇文章,从来不喜欢在网上发表言论.文字和资源,是个名副其实的"伸手党",在"伸手白拿"的多年间,也曾想过要贡献些什么,但总是害怕自己分享出来 ...
前端入门学习笔记—HTML
本文是我在入门时所作的笔记,希望能对初学者有些许帮助如有误,欢迎指出 HTML基础 1.web的组成结构(xhtml/xml) 表现(css) 行为(ecmascript) W3C制定结构与表现的标 ...
前端入门学习笔记（三十五）vue.js入门（三）条件 v-if 与循环 v-for，v-for 中 in 和 of 的区别
1.v-if v-if相当好理解,这里我就只贴实例代码了 <div id="app"><p v-if="true">现在你看到我了< ...
前端入门学习笔记六十九
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>输入框 ...
前端入门学习笔记六十五
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>CS ...
前端入门学习笔记十九
<!DOCTYPE html> <html><head><meta charset = "UTF-8"/><title> ...
前端入门学习笔记五十一
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
前端入门学习笔记九十三
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
前端入门学习笔记六十七
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS ...

一、前端入门学习笔记-标签（1）

一、前端入门学习笔记-标签（1）相关推荐

最新文章

热门文章