HTML + CSS 宝典第二节 HTML 核心1

HTML 核心1

●第一个网页 HTML

Emmet插件：自动生成 HTML 代码片段， VS Code 编辑器已经内置此插件

●注释

注释为代码的阅读者提供帮助；注释不参与运行在 HTML 中，注释采用以下格式书写

  <!-- 注释内容 -->

●元素

其他叫法：标签，标记

整体： Element 元素

元素 = 其实标记（begin tag） + 元素内容（element content）+ 元素属性 + 结束标记（end tag）

属性：属性名称 + 属性值，属性可以没有，也可以有多个
<a href="https://www.baidu.com/" title="这是一个Title">www.baidu.com</a>
属性分类：

局部属性：某些元素特有的属性                       比如：

全局属性：一些元素都具有某一类型的属性   比如： title 属性

有些元素没有结束标记，这样的元素叫做： 空元素

空元素的两种写法：

<meta charset="UTF-8">

<meta charset="UTF-8"/>

元素的嵌套：

文档的声明：<!DOCTYPE html>   告诉浏览器使用 html 标准是 html5 ，不写文档声明，将导致浏览器进入怪异的渲染模式

根元素： <html>   一个面面只有一个，并且该元素是其他元素的父元素。 HTML5 版本中没有强制要求， lang 属性便是语言，全局属性，表明该元素内部使用的文字是哪一种自然语言书写而成的。中文建议书写：

<html lang="cmn-hans">

文档头： <head>    文档头，文档头内部的内容，不会显示到页面上

<meta> 文档的元数据：附加信息；charset 网页编码

<body> 文档体

语义话：

每一个 HTML 元素都会有具体的含义，与表现形式无关（css）

a 元素 ：超级链接

p 元素 ：段落

h1 元素：一级标题

所有元素与展示效果无关！，元素展示到页面中的效果应该由 css 决定

重点-------选用什么元素，应该取决于内容的含义，而不是现实效果-------

为什么这么强调语义话：

为了搜索引擎优化，为了让搜索引擎更好的理解网页
为了让浏览器理解网页

HTML 中支持哪些元素:

●文本元素：

h         标题 head ( h1~h6 ) 表示 一级标题到六级标题

p         段落 paragraphs

span   无语义仅用于样式设置，某些元素会独占一行（块级元素），某些元素则不会（行级元素），到了 html5 官方已经弃用。语义化

pre      预格式化元素，空白折叠（css）：在源代码中的连续空白字符（空格，回车，换行，制表）在页面显示时都会折叠为一个空格！ 在 pre 中的元素不会出现空白折叠！，在 pre 元素内部出现的内容，会按照源代码格式显示到页面上

实体字符

HTML 实体：

https://www.w3school.com.cn/tags/html_ref_entities.html

HTML实体也叫作实体字符 HTML Entity

实体字符一般用于： 在页面中显示一些特殊符号

& 单词

&#数字

小于符号：< 应为直接书写 < 容易产生意想不到的问题 < 在 HTML 中有特殊的意思；其实元素的一部分

大于符号：>

空格符号：  可以多个空格一起使用； non-breaking space

版权符号：©

a 元素：

超链接 : <a href="http://baidu.com">百度</a>

href 属性 : hyper reference 通常表示跳转地址

普通连接 ：会刷新页面
锚链接 ：锚连接跳转到页面指定位置 同页面不刷新页面 <a href="http://www.baidu.com/#元素id名称" >百度</a>
功能性连接：点击后，触发某个功能执行 JS 代码；'javascript:****' ：<a href="javascript:alert('吃屎')" >执行js代码</a> , 'mailto:****' ：<a href="mailto:5454545@qq.com" >发送邮件</a> , 'tel:17116817159' ：移动端用的比较多 <a href="tel:18768424958" >拨打电话</a>

target 属性：表示跳转窗口位置，是当前窗口还是新打开的窗口，取值：

_self <a href="http://www.baidu.com/" target="_self">百度</a> 当前窗口打开（默认）
_blank <a href="http://www.baidu.com/" target="_blank">百度</a> 空白页面，新的页面打开

路径的书写：

站内资源与站外资源

站内资源：当前网站的资源

站外资源：别的网站的资源

绝对路径与相对路径

站内资源：相对路径

站外资源：绝对路径

绝对路径书写格式：        协议名://主机名称:端口号/路径

协议名：http,    https,   file,   ftp

主机名：域名， IP

端口号: 有一些协议都是有默认端口号的；可以省略； http 80; https:443; ftp:22

相对路径书写格式：         以 ./   开头； ./ 表示当前资源所在的目录

./../      表示当前目录的父目录

相对路径中：                    ./    可以省略

图片元素：

<img src="" alt="">

是一个空元素，没有结束标记， image 的缩写
src 属性： source 指的是资源的地址
alt 属性：当图片资源失效读取失败时，将使用该属性的文字替代图片，

和 a 元素联用

    <a href="http://baidu.com" ><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574162384178&di=f8bae30a492b70c37b43357aa82d4e73&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D3116661572%2C4011086130%26fm%3D214%26gp%3D0.jpg" alt=""></a>

和 map 元素联用， map元素只能加一种子元素 area

    <img usemap="#solarmap" src="./timg.jpg" alt=""><map name="solarmap"><area shape="circle" coords="399,223,50" href="http://baidu.com" alt="" target="" title="打开百度"><area shape="rect" coords="400,100,100,100" href="http://sina.com" alt="" target="" title="打开新浪"></map>

和 figure 元素联用， 指代定义通常用于把图片，图片标题，描述包裹起来,用于浏览器，搜索引擎

子元素： figcaption ，用于图片的子元素的

    <figure><img usemap="#solarmap" src="./timg.jpg" alt=""><figcaption><h2>大师展</h2></figcaption><map name="solarmap"><area shape="circle" coords="399,223,50" href="http://baidu.com" alt="" target="" title="打开百度"><area shape="rect" coords="400,100,100,100" href="http://sina.com" alt="" target="" title="打开新浪"></map></figure>

多媒体元素：

某些元素属性 只有两种状态： 1：不写； 2：取值为属性名，这种属性叫做布尔属性，在最新的 html5 中可以不用书写属性的值

● video     视频       默认情况下是 隐藏播放控件的

controls 属性   用于显示或者影藏播放控件；取值只能 controls

autoplay 属性   表示自动播放

muted     属性静音播放，可以用于某些浏览器的 autoplay 不起作用的时候

loop        属性循环播放
<video controls muted autoplay loop src="./result.mp4"></video>
● audio 音频

属性通 video 相同
 <audio controls autoplay loop muted="" src="./沙漠骆驼_施展和罗中凯.mp3"></audio>
● 兼容性：

旧版本的浏览器不支持这两个元素

不同的浏览器支持的音视频格式有可能不一致

mp4, webm
    <video  controls loop autoplay  muted><source src="./result.mp4"><source src="./result.webm"><P>对不起你的 浏览器不支持播放视频</P></video>

列表元素：

● 有序列表 type='1', 列表下表用数字显示； type="i" 列表下表用罗马数字显示； type="a" 列表下表用 abc 显示；可以使用 css style="list-style-type: none;" 属性关掉； reversed 倒叙显示

ol : ordered list

li : list item
     <ol type="a" style="list-style-type: none;"><li>打开冰箱门</li><li>大象放进去</li><li>冰箱门关上</li></ol>
● 无需列表常用于制作菜单或者新闻列表

ul : unordered list

li : list item
     <ul><li>有房</li><li>有车</li><li>有存款</li></ul>
● 定义列表通常用于一些术语的定义

dl : definition list

dt: definition title

dd: definition description

容器元素：

该元素代表 一块区域，内部用于放置其他元素

● div   没有语义    缺点就是： 浏览器搜索引擎不能抓取到具体 div 的真正的语义；

HTML5 中添加了语义化容器元素:

●   header: 页头，文章头部

●   footer : 页脚，文章的尾部

●   article : 表示整片文章

●   section：表示文章的一个章节

●   aside ： 表示一些附加信息，不是很重要的消息