html

2024/2/22

html

介绍

HTML：Hyper Text Markup Language，超文本标记语言。（超文本就是文档某部分内容可以跳到另一个文档）

HTML 是 W3C 组织定义的语言标准：HTML 是用于描述页面结构的语言。

结构：有什么东西，该东西表示什么含义

语义化

1.每一个 HTML 元素都有具体的含义

a元素：超链接
p元素：段落
h1元素：一级标题

2.所有元素与展示效果无关,元素展示到页面中的效果，应该由 CSS 决定。

选择什么元素，取决于内容的含义（语义化），而不是显示出的效果

语义化的作用

为了搜索引擎优化（SEO）

搜索引擎：百度、搜搜、Bing、Google

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码,然后读取你页面的元素，来理解你要表达的东西，你表达的他越容易懂，他就会把你显示的越靠前

为了让浏览器理解网页

阅读模式、语音模式

元素包含关系

容器元素中可以包含任何元素
a 元素中几乎可以包含任何元素
某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
标题元素和段落元素不能相互嵌套，并且不能包含容器元素

不一定写错就不能运行，浏览器比较宽容，有可能能帮助你纠正

HTML 实体（转义符）

&单词;
&#数字;

小于符号
<

大于符号

>

空格符号



版权符号
©

&符号
&

htmlAPI

pre(空白折叠)

在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格

pre 元素可以把样式原封不动的显示在页面上（不忽略空格）

pre 元素功能的本质：它有一个默认的 css 属性 white-space:pre

图片局部链接

map 元素

map：地图

map 的子元素：area

figure 元素

指代、定义，通常用于把图片、图片标题、描述包裹起来

子元素：figcaption

<figure>
  <a
    target="_blank"
    href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin"
  >
    <img usemap="#solarMap" src="./img/solar.jpg" alt="这是一张太阳系的图片" />
  </a>
  <figcaption>
    <h2>太阳系</h2>
  </figcaption>
  <p>
    太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。包括八大行星（由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星）、以及至少173颗已知的卫星、5颗已经辨认出来的矮行星和数以亿计的太阳系小天体,和哈雷彗星。
  </p>
</figure>

<map name="solarMap">
  <area
    shape="circle"
    coords="360,204,48"
    href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin"
    target="_blank"
  />
  <area
    shape="rect"
    coords="323,282,395,320"
    href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin"
    target="_blank"
  />
  <area
    shape="poly"
    coords="601,371,645,312,678,338,645,392"
    href="https://baike.baidu.com/item/%E5%86%A5%E7%8E%8B%E6%98%9F/137498?fr=aladdin"
    target="_blank"
  />
</map>

button

加入一个type="button" 就是一个普通按钮，不加则会提交表单
<button class="right" type="button">发送验证码</button>

加入一个type="reset" 就是一个重置按钮

这一切都是在form元素的包裹下使用

label

可以将文字和单选按钮关联

关联方式一
<label>
    <input type="radio" name="sex" checked />
    <span>男</span>
  </label>

关联方式二
<label for="male">
  <span>男</span>
</label>
<input type="radio" name="sex" checked id="male"/>

contenteditable 属性

该属性是一个布尔属性，可以设置到任何元素上，它可以让该元素变为可编辑的状态

在实际开发中，通常用于制作富文本框

<div contenteditable class="content">
  <p>asdfasdfsaf</p>
</div>

LOADING

html

html

介绍

语义化

元素包含关系

HTML 实体（转义符）

htmlAPI

pre(空白折叠)

图片局部链接

meta

button

label

contenteditable 属性