Web前端学习笔记（1）——HTML

html

前言

学习视频链接：web前端开发-HTML+CSS 零基础权威编程入学宝典 2021最新web前端工程师开发框架全套视频教程【渡一教育】程序员新手必看完整版

文章目录

• html

• • 前言

  • 注释

  • 空元素

  • 语义化

  • Emmet

  • • 乱数假文 lorem

    • 标签内的内容

    • [id="cha"]属性

  • 内容类别

  • HTML实体

  • 文本元素

  • • span
    • pre

  • a

  • 全局属性

  • • id
    • title

  • 路径写法

  • • 站外资源和站内资源
    • 绝对路径和相对路径

  • img图片元素

  • • 和a元素联用
    • img无法加载网络图片资源
    • 和map元素联用
    • area属性
    • 与figure元素联用

  • 多媒体元素

  • • video 视频
    • audio 音频
    • 兼容性

  • 列表元素

  • • 有序列表 ordered list
    • 无序列表 unordered list
    • 定义列表

  • 容器元素

  • • div元素
    • 语义化容器元素

  • 元素包含关系

  • 元素包含关系

注释

    <!-- 注释内容 -->
    
    <!--
    块注释
    -->

空元素

没有结束标记的元素
1.<meta charset="UTF-8">
2.<meta charset="UTF-8" />

charset:指定网页内容编码

语义化

html不决定网页显示的内容样式，样式只由css决定

Emmet

web开发神器

乱数假文 lorem

乱数假文自动填充：lorem,后面可以接数字设置乱序文本字数：lorem100表示生成100词的乱序文本

>标签内的内容

[id=“cha”]属性

内容类别

html5以前版本：
块级元素：独占一行 h p
行内元素：span
html5已经弃用
在css代码中,块级元素

    {display:block;}

行级元素

    {diaplay:inline;}

HTML实体

html entity
类似于反义符号\，用于在页面中显示特殊符号
https://www.runoob.com/tags/ref-entities.html
https://dev.w3.org/html5/html-author/charref

• &单词；
  – 小于符号：<
  – 大于符号：>
  – 斜杠/：/
  – 空格： 
  – 版权©：©
  – &符号： &

• &#数字；

文本元素

html5元素周期表

MDN WEB DOCS

span

无语义元素,仅仅用于设置样式

    <p>三原色包括：红，绿，蓝</p>
    <p>三原色包括：<span style="color:"red">红</span>，<span style="color:"green">绿</span>,<span style="color:"blue">蓝</span></p>

pre

预格式化文本元素，可以忽略代码中的空白折叠
通常在于在网页中显示代码
功能本质是有默认的css：

    {white-space:pre;}

    <p>白   日   依   山   尽</p>
    <pre><p>白   日   依   山   尽</p><pre>

a

超链接

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

属性：

href

1. 跳转 `href="---url地址---"`
2. 锚点 `href="#id"`
3. 回到顶部 `<a href="#">回到顶部</a>`
4. 功能连接，点击后触发功能 
   * 执行js代码，`href="javascript:"`
   * 发送邮件，`href="mailto:邮箱地址"`
   * 拨号，手机端/pc端安装有拨号软件，`href="tel:0771-3838338"`

target

1. 表示跳转窗口位置，默认新页面在当前页面打开：`target="_self"`
2. 在新窗口页面打开：`target="_blank"`
3. `target="_parent"`
4. `target="_top"`

全局属性

id

全局属性，唯一

    <h1 id="a1">AAAAAA</h1>

title

表示鼠标放到改内容上提示的内容

    <a href="http://huaban.com" title="这是花瓣网">花瓣网</a>

路径写法

站外资源和站内资源

站内资源：当前网站目录下的资源:可以使用相对路径
站外资源：非当前网站的资源:必须使用绝对路径url

绝对路径和相对路径

• 绝对路径url

    协议名://主机名:端口号/路径
    schema://host:port/path
    ·协议：http,https,file
    ·主机名：域名，IP地址
    ·端口号：http默认端口号80，https协议默认端口号443

详细解释参考视频

• 相对路径
  ./表示当前页面所在目录，可省略
  …/表示上一目录

img图片元素

src属性：source,资源路径，可采用绝对路径/相对路径
alt属性：当图片资源失效时，将使用该属性的文字替代图片

    <img src="" alt="">

和a元素联用

    <a href="">
    <img src="" alt="">
    </a>

img无法加载网络图片资源

在html5或jsp的head中加入
<meta name="referrer" content="never">

和map元素联用

map:地图元素

    <a href="">
    <img usemap="#hanaMap" src="" alt="">
    </a>
    <map name="hanaMap">
    <area shape="" coords="" href="" alt="" target="">
    </map>

area属性

• shape:这个area的形状：多边形poly 矩形rect 圆形circle

• coords：形状的关键点坐标
  rect:左上顶点坐标和右下顶点坐标
  circle：圆心坐标和半径
  poly：依次描述各顶点坐标

• href：点击形状跳转地址

• alt：当图片失效，这个区域显示的文字内容

• target：跳转时页面打开方式

衡量坐标时，为避免误差，需使用专业衡量工具如：photoshop、pxcook、cutpro

与figure元素联用

figure:指代、定义，通产用于把图片、图片标题、图片描述包裹起来，使得浏览器、计算机能确认
子属性:figcaption,标识图片标题使得soe能识别

多媒体元素

video 视频

默认不显示视频播放控件

• 布尔属性：在html5中可以不写,若要使用该属性直接写
  • controls:显示控件，取值为contrls
  • autoplay:自动播放
  • muted:静音播放
  • loop:循环播放

    <video src="" controls autoplay muted loop></video>

audio 音频

与video一致

兼容性

1. 旧版本浏览器不支持video audio元素

2. 不同浏览器支持的格式不一致
   mp4 webm

3. 为了获得更好的兼容性，一个视频会做多个格式，在写html时应该把属性src作为子元素source的属性写出来

    <video controls autoplay muted loop>
    <source src="./1.webm">
    <source src="./1.mp4">
    <p>对不起，你的浏览器版本过低，不支持播放当前视频，请下载最新浏览器。</p>
    </video>
    <p>
    一般会在上面的p元素里面加入一个点击下载最新版本浏览器的链接，或者在p元素里嵌入代码支持flash播放
    </p>

列表元素

有序列表 ordered list

    <ol>
    <li></li>
    <li></li>
    </ol>

属性：type="" ，取值有：1(默认数字序号)，i（小写罗马数字），I（大写罗马数字）, a（小写字母），A（大写字母）,代表生成的列表前的序号用什么表示。除非是法律条文等序号很重要的地方，否则一般使用CSSlist-style-type控制。

    <ol type="I">
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
    </ol>

属性：reversed 序号倒序显示，表示语义上的li列表里的内容是倒序的

    <ol rerversed>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
    </ol>

无序列表 unordered list

    <ul>
    <li></li>
    </ul>

列表前面的序号符号同样可以通过css list-style-type更改
无序列表常用于制作菜单或新闻列表。

定义列表

常用于术语定义
dl:definition list
dt:definition title
dd:definition description

容器元素

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

div元素

没有语义，浏览器不好识别区域代表含义

语义化容器元素

html5新出

• header: 通常用于表示页头，也可以用于表示文章头部
• footer: 通常用于表示页脚，也可以用于表示文章尾部
• article：通常用于表示整篇文章
• section: 表示文章章节
• aside: 通常用于表示附加信息（侧边栏）

元素包含关系

以前：块级元素独占一行，块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
现在：元素的包含关系由元素的内容类别决定
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories

• 容器元素中可以包含任何元素
• a元素中几乎可以包含任何元素
• 某些元素只能包含指定元素（ul>li,ol>li,dl>dt+dd）
• 标题元素和段落元素不能相互嵌套，不能包含容器元素

表示附加信息（侧边栏）

元素包含关系

以前：块级元素独占一行，块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
现在：元素的包含关系由元素的内容类别决定
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories

• 容器元素中可以包含任何元素
• a元素中几乎可以包含任何元素
• 某些元素只能包含指定元素（ul>li,ol>li,dl>dt+dd）
• 标题元素和段落元素不能相互嵌套，不能包含容器元素