HTML 基础 | 青训营

落尘69
139 阅读3分钟

什么是 HTML

HTML 即 HyperText Markup Language

  • HyperText (超文本) : 因为除了文字之外可以包含图片、标题、链接、表格
  • Markup Language (标记语言) : 形如 <h1> HTML<h1>，内容被一个开始标签与结束标签包裹起来

HTML 的基本语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>一级标签</h1>
  <p>段落内容</p>
</body>
</html>

  • <!DOCTYPE html> 标记了我们当前的文档类型，浏览器基于这个选择对于我们界面的渲染模式，如果不写的话浏览器可能老旧的模式渲染，导致不可预测的界面渲染

  • <html> 是文档的根标签，其他所有的标签必须写在根标签中

  • <head> 存放页面的源数据，不直接呈现给用户

  • <meta> charset="UTF-8" 指明了页面的编码是 utf8

  • <title> 页面标题

  • <body> 存放页面内容，呈现给用户

呈现页面的简单原理

浏览器会将 html 文件解析成一个 DOM 树，以上面的 html 代码为例

image.png

基本规范

  • 标签和属性不区分大小写，建议小写，便于区分 React 和 Vue 的组件命名
  • 空标签可以不闭合，如 input、meta
  • 属性值建议以双引号包裹
  • 部分属性值可省略，默认为true，如 required、readonly

标签

  • 双标签：由开始标签和结束标签组成

<p> 常规双标签 </p>

  • 单标签：在标签中定义属性，下例中 src 为属性名，photo.jpg 为属性值

<img src="photo.jpg" />

标题

<h1> ~ <h6>，差别主要展现在字体的大小上

<h1></h1>
<h2></h2>
<h3></h3>

列表

<ol> : 有序标签，默认 1，2，3

<ul> : 无序列表，默认 小圆点

<dl> : 描述列表，包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

<ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="sayHi">Say hi</li>
</ul>

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

链接

<a href="" target="" >

href : 即点击后跳转的地址>

target? : 如属性值 _blank 则指点击后通过新建标签页来跳转

<a href="https://juejin.cn/"> 稀土掘金 </a>
<a href="https://juejin.cn/" target="_blank"> 稀土掘金 </a>

图片

<img src="" alt="" >

src : 图片来源

alt : 在图片因某种原因加载失败时显示 alt 中的信息

音频

<audio src="" controls >

<video src="" controls >

src : 音频来源

controls : 控制是否显示浏览器默认控件`

输入框

<input> 默认为一个空的输入框，可以定义多个属性来实现需要的功能

  • type

    • "text" (默认) ：文本框

    • "password" ：密码框

    • "range" : 滑块，可以定义属性 value 来指定初始值，min 和 max 来限制最大最小值，可拖动

    • "number" ：数字框，可以定义属性 min 和 max 来限制最大最小值

    • "date" ：日期框

    • "checkbox" : 选择框

    • "radio" : 圆形选择框，通过定义相同的 name 可以实现选择互斥的功能

         <input type="text">
     <input type="password">
     <input type="range" value="50">
     <input type="number" min="1" max="10">
     <input type="date">
     
     <input type="checkbox" />
     <input type="radio" name="1" />
     <input type="radio" name="1" />

  • placeholder : 会在输入框中默认显示提示词
<input type="text" placeholder="请输入">

文本区

<textarea> 可以通过 rows 和 cols 属性，用于控制文本区的尺寸

<textarea cols="30" rows="10"></textarea>

选项菜单

<select> 每个菜单选项由一个 <option> 元素定义

<select>
  <option> a </option>
  <option> b </option>
  <option> c </option>
</select>

语义化

  • HTML 中的元素、属性以及属性值都应该符合某些特定的含义

使用

  • 比如我们会使用 、 来表面这是网页的页眉和页脚
  • 即根据各元素的作用来命名元素

好处

  • 便于开发者修改和维护页面
  • 便于浏览器展示页面，也利于爬虫爬取数据
  • 便于搜索引擎提取关键词和排序，如某些关键字在标题里出现的次数更多，则认为该关键字的权重更高
  • 便于更好地为用户提供浏览器服务，比如 lang 可以申明该网页内容使用的语言，便于翻译软件确定页面语言
avatar
文章
阅读
粉丝