web前端攻城狮学习笔记——HTML基础

最新推荐文章于 2024-08-23 10:53:05 发布

Rebecca♂

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量422

点赞数

分类专栏：前端开发文章标签： html web

本文链接：https://blog.csdn.net/weixin_43899481/article/details/109457942

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客记录了作者学习《Web前端攻城狮》课程中的HTML基础内容，包括HTML的定义、文本类标签（如链接、引用、强调、代码）、多媒体类标签（图片、视频、音频）、组织页面内容的标签（如header、main、footer）、表格、表单、HTML语义化的重要性以及初步了解HTML的可扩展性。通过实例和解释，帮助读者理解并掌握HTML的基础知识。

摘要由CSDN通过智能技术生成

开始学习web前端开发基础了，我是跟着清华大学在学堂在线的《Web前端攻城狮》学习的，把一些笔记记在这里，方便后期查阅。

1 HTML基础
HTML是超文本语言。
一段HTML代码：

<!doctype html>
<html>
    <head>
        <meta charset= "UTF-8">//页面编码
        <title>⻚⾯标题 </title>
     </head>
    <body>
        <h1>⼀级标题 </h1>
        <p>段落内容 </p>
    </body>
</html>

DOM树中包含了HTML语言的基本组成部分
DOM树
2 文本类标签
2.1 链接
最基本的链接语句

<a href="http: //www.w3.org">W3C</a>

链接包括绝对路径和相对路径。
绝对路径

<a href="/product/b">产品 B </a>

会被解析为 /product/b

<a href="b">产品 B </a>

在一个页面中前面有个href，后面进行一个id设置，就可以在前面对后面进行链接，如下：

<a href="product">我们的产品</a>
<h2 id="product">我们的产品</a>

设置target链接目标，可以设置出当前或新窗口打开

<a href="http://www.w3.org" target="_self">当前窗口打开</a>
<a href="http://www.w3.org" target="_blank">新窗口打开</a>

2.2 引用
下面的blockquote、q和cite分别表示长引用、短引用和引用来源（书、影视、页面）

<blockquote cite="http://t.cn/RfKO0F">
<p>天才并不是⾃⽣⾃⻓在深林荒野⾥的怪物， 是由可以使天才⽣⻓的⺠众产⽣、⻓育出来的，所以没有 这种⺠众，就没有天才。 </p>
<blockquote>
<cite>鲁迅 《未有天才之前》 </cite>
<p><cite>维基百科 </cite>上说 JavaScript <q>最初命名为 Mocha </q> </p>

2.3 强调
em强调重读
strong强调重要性

<p>猫是可爱的动物 </p>
<p>猫<em>是 </em>可爱的动物 </p>
<p>猫是<em>可爱 </em>的动物 </p>
<p>
⽤法和⽤量：每⽇三次，每次1⽚，饭后服⽤。
<strong>警告：孕妇和⼉童请遵医嘱。 </strong>
</p>

2.4 代码
code 代码段
var 变量名
samp 输出⽰例
kbd 键盘操作

补充内容：
空白符：

<p>Hello         World</p>
<p>你好，

世界
</p>

最终得不到空白和空格，可以将p替换成 pre就可以达到效果

实体字符
空格
< <
> >
& &

共29个
a em strong small s cite q dfn abbr ruby rt rp data time code var samp kbd sub sup i b u mark bdi bdo span br wbr

3 多媒体类标签
3.1 图片

<img src="/path/to/img.jpg" alt="可爱的⼩猫" width="360" height="480" />

alt是一个可选项，可以设置高度和宽度。
图片格式：jpg、png、webp、gif

3.2 视频

<video src="/url.mp4" controls autoplay muted loop type="video/mp4" poster="./photo.jpg" width height preload/></video>

controls表示是不是浏览器默认的播放空间
autoplay表示是否自动播放（视频静音和用户之前主动点击过的两种情况可以自动播放）
muted静音
loop是否循环播放
type可以选择格式
poster视频没有播放的时候可以通过这个指定一个图片
高度宽度
preload预加载

给视频加字幕，字幕格式为vtt后缀

<video src= "/url.mp4" controls>
    <track kind= "subtitles" srclang= "zh" src= "/subtitle.vtt">
</video>

字幕格式
3.3 音频
音频和视频的一些代码是相同的。

<audio src= "/sound.mp3" controls> </audio>

4 组织页面内容
header：标题
main：主题内容
aside：侧边栏（附加信息）
footer：区块底部（参考链接）

4.1 h1-h6：一级标题到六级标题

4.2 article和section也可以作为页面的内容
article是独立存在的，比如一篇新闻、一篇帖子。
section是在文章中的章节，只有内容上是独立的才可以作为一个section

4.3 列表：ol标签（有序列表），ul标签（无序列表），dl标签（定义列表）
可以自动标号type可以设置是123或者abc

<ol start="l" type="">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

<ul>
<li>🍇</li>
<li>🍉</li>
<li>🍎</li>
</ul>

列表可以嵌套

<ul>
  <li>1个⻄⽠ </li>
  <li>2瓶矿泉⽔ </li>
  <li>1盒酸奶 </li>
  <li>
    垃圾袋
    <ul>
      <li>⼤号垃圾袋 </li>
      <li>⼩号垃圾袋 </li>
    </ul>
  </li>
</ul>

<h2>霸王别姬 </h2>
<dl>
  <dt>导演： </dt>
  <dd>陈凯歌 </dd>
  <dt>主演： </dt>
  <dd>张国荣 </dd>
  <dd>张丰毅 </dd>
  <dd>巩俐 </dd>
  <dt>上映⽇期： </dt>
  <dd>1993-01-01 </dd>
</dl>

4.4 导航
在标题下面列一个导航进行链接

<header>
  <h1><img src="/logo.png" alt="Logo"> </h1>
  <nav>
  <ul>
    <li><a href="/">⾸⻚ </a> </li>
    <li><a href="/products">产品中⼼ </a> </li>
    <li><a href="/help">帮助 </a> </li>
  </ul>
  </nav>
</header>

5 HTML表格
简单的表格结构

<table>
  <thead>
    <tr>
      <th>客户id </th>
      <th>客户名称 </th>
      <th>所属城市 </th>
      <th>账户余额 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123 </td>
      <td>客户A </td>
      <td>北京 </td>
      <td>3424.32 </td>
    </tr>
   <tr>
      <td>124 </td>
      <td>客户B </td>
      <td>上海 </td>
      <td>2544.00 </td>
    </tr>
    <tr>
      <td>125 </td>
      <td>客户C </td>
      <td>深圳 </td>
      <td>433.09 </td>
    </tr>
  </tbody>
</table>

复杂的表格结构
复杂表格结构

跨行和跨列

<tr>
  <td rowspan="3">编程语⾔ </td>
  <td>JavaScript </td>
  <td>8 </td>
</tr>

后面第二行就只需要两个td
跨列就是在其中加colspan即可

caption和tfoot

caption表头，表示表格的标题

<caption>购物⼩票 </caption>

tfoot表尾，一般表示表格的汇总

<tfoot>
  <tr>
    <td colspan="3">汇总</td>
    <td>59.20</td>
  </tr>
</tfoot>

6 表单（input功能）
6.1 单行文本框
p标签，label表示表单的文字，类型有文本、密码、数字、文件和日期，

<form>
  <p>
    <label>⽤户名： </label>
    <input type="text" placeholder="3-32个字符">#placeholder是用户没有输入时候的文字（一种文字的提示）
  </p>
  <p>
    <label>密码： </label>
    <input type="password">#密码（会以*来表示输入的文字）
  </p>
  <p>
    <label>年龄： </label>
    <input type="number" value="20">#数字（有一个上下箭头来调整数字，value属性为初始值设置）
  </p>
  <p>
    <label>头像： </label>
    <input type="file">#文件（可以上传文件）
  </p>
  <p>
    <label>⽣⽇： </label>
    <input type="date">#日期（日历选择的控件）
  </p>
</form>

6.2 多行文本框
设置高度和长度（一般推荐CSS来设置）

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

6.3 单选框

<form>
  <p>请选择您最喜欢的⽔果 </p>
  <input type="radio" name="fruit"><label>⾹蕉 </label>
  <input type="radio" name="fruit"><label>猕猴桃 </label>
  <input type="radio" name="fruit"><label>葡萄 </label>
  <p>请选择您的⾐服尺码 </p>
  <label><input type="radio" name="size">XS </label>
  <label><input type="radio" name="size">S </label>
  <label><input type="radio" name="size">M </label>
  <label><input type="radio" name="size">L </label>
  <input type="radio" name="size" id="xl"><label for="xl">XL </label>
</form>

当把input放到label中的时候，点击字也可以选中。同时可以在label中加一个for属性进行设置

6.4 多选框

<form>
  <p>请选择您最喜欢的⽔果? </p>
  <label><input type="checkbox" checked>⾹蕉 </label>
  <label><input type="checkbox">猕猴桃 </label>
  <label><input type="checkbox">葡萄 </label>
</form>

其中checked表示默认选择框。

6.5 其他类型
其他类型主要是使用户更加方便，比如弹出的键盘是文字还是数字，以及选择还是输入等。
其他input类型
6.6 下拉选择框
其中selected为选择的默认值

<select name="fruit">
  <option value="1">苹果 </option>
  <option value="2">⾹蕉 </option>
  <option value="3" selected>芒果 </option>
  <option value="4">菠萝 </option>
  <option value="5">榴莲 </option>
  <option value="6">⽊⽠ </option>
</select>

6.7 按钮（之后主要在JavaScript中详细介绍）

<form>
  <p>
    <label>⽤户名： </label>
    <input name="username">
  </p>
  <p>
    <label>密码： </label>
    <input name="password">
  </p>
    <button type="submit">提交按钮 </button>
    <button type="button">普通按钮 </button>
</form>

7 HTML语义化（开发者需要懂）

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
有序列表⽤ ol；⽆序列表⽤ ul
lang 属性表⽰内容所使⽤的语⾔

谁在使用：
开发者 - 修改、维护页⾯
浏览器 - 展⽰页⾯
搜索引擎 - 提取关键词、排序
屏幕阅读器 - 给盲⼈读页⾯内容

好处：代码可读性、可维护性、搜索引擎优化、提升⽆障碍性

做法：
了解每个标签和属性的含义；思考什么标签最适合描述这个内容；不使⽤可视化⼯具⽣成代码

8 案例
在后期添加博客

9 HTML的可扩展性
id属性：列表中可以添加data-id属性

meta标签

<meta charset="UTF-8">#编码
<meta httpequiv="Content-Security-Policy" content="scriptsrc 'self'"># 指定HTTP Header
<meta name="keywords" content="关键词"># SEO 搜索引擎优化
<meta name="description" content="⻚⾯介绍">
<meta name="viewport" content="initialscale=1"># 移动设备Viewport
<meta name="formatdetection" content="telphone=no"># 关闭iOS电话号码⾃动识别
<meta name="renderer" content="webkit"># 360浏览器指定内核

link

<link rel="stylesheet" href="/example.css"># 引⼊CSS样式
<link rel="icon" href="/favicon.ico"># 指定 Favicon
<link rel="alternate" href="/rss.xml" type="application/rssxml"># 提供 RSS
<link rel="prefetch" href="/image.png"> #预先加载资源

microdata
以下代码机器很难识别

<div>
  <h1>梦的化⽯ </h1>
  <img src="/s29888548.jpg" alt="封⾯">
  <dl>
    <dt>作者: </dt>
    <dd>
      <span>[⽇] </span>
      <span>今敏 </span>
    </dd>
    <dt>ISBN </dt>
    <dd>9787559625984 </dd>
  </dl>
  <p>本书是今敏漫画故事短篇全集，收录  </p>
</div>

加上细微的数据，可以更好地识别，如google百科中的内容就是这样排布的

<div>
  <h1>梦的化⽯ </h1>
  <img src="/s29888548.jpg" alt="封⾯">
  <dl>
    <dt>作者: </dt>
    <dd>
      <span>[⽇] </span>
      <span>今敏 </span>
    </dd>
    <dt>ISBN </dt>
    <dd>9787559625984 </dd>
  </dl>
  <p>本书是今敏漫画故事短篇全集，收录  </p>
</div>
<div itemscope itemtype="http: schema.org/Book">
  <h1 itemprop="name">梦的化⽯ </h1>
  <img src="/s29888548.jpg" alt="封⾯" itemprop="image">
  <dl>
    <dt>作者: </dt>
    <dd itemprop="author" itemscope itemtype="http: schema.org/Person">
      <span itemprop="nationality">[⽇] </span>
      <span itemprop="name">今敏 </span>
    </dd>
    <dt>ISBN </dt>
    <dd itemprop="isbn">9787559625984 </dd>
  </dl>
  <p itemprop="description">本书是今敏漫画故事短篇全集，收录  </p>
</div>