HTML学习总结

最新推荐文章于 2024-08-27 20:48:47 发布

かっこ良さそうにもない猪

最新推荐文章于 2024-08-27 20:48:47 发布

阅读量104

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/qq_45591921/article/details/114796828

版权

HTML学习总结

1. 什么是HTML

HTML是超文本标记语言(HyperText Markup Language)的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

2. HTML元素（标签）

a. 常见元素

HTML标记包含一些规定元素，如

<head>，<title>，<body>，<header>，<footer>，<article>，
<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，
<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，
<progress>，<video>

整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成。
在这里插入图片描述

标签	解释
`<!DOCTYPE html>`	声明文档类型(目前可有可无)
`<html>`	这个元素包裹整个完整的页面，是一个根元素
`<head>`	这个元素是一个容器，包含了所有你想包含在HTML页面但不想在HTML中显示的内容
`<meta charset="utf-8">`	这个元素设置文档使用utf-8字符集编码
`<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">`	指定的页面的图标出现在浏览器标签上
`<title>`	设置页面标题，出现在浏览器标签上
`<body>`	这个元素包含了页面看到的所有内容

b. 空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，我们称其为空元素，常见的空元素如下：

元素	解释
`<br>`	换行
`<hr>`	水平分割线
`<input>`	输入框

c. 元素的属性

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

代码效果

鼠标移上来试试！

3. HTML注释方法

示例：
code软件中可用快捷键Ctrl+/

4. 标题

HTML提供了6级标题，<h1> ~ <h6>
标题十分重要：

搜索引擎用标题来索引页面的内容
用户习惯于用标题进行浏览

效果展示

我是一级标题

我是二级标题

我是三级标题

我是四级标题

我是五级标题

我是六级标题

注意
不要因为希望醒目试图使用标题对正文文字进行加大或加粗，正文文字的醒目可以使用文本格式或CSS进行

5. 文本格式

常见代码展示

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

效果展示

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

6. 超链接 a

超链接语法

代码示例：

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

代码说明

href即为要跳去的地址URL（Uniform Resorce Locator)
target属性为 _blank表示在新的页面打开超链接（默认是在当前页面打开即 _self）
超文本标签包含的内容即为显示在页面点击的（当前文字为“百度一下”）

锚点

什么是锚点

锚点，称为书签，用于标记某个元素或位置，通过锚点，我们可以轻易的在长页面内实现跳转。

实现代码示例

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<h2 id="C4">第四章 论零号病人的重要性</h2>
<a href="#C4">跳到第四章</a>

注意事项

元素的ID值必须是唯一的
超链接中的地址需要有#符号

7. 图片

代码示例

<img src="https://i-blog.csdnimg.cn/blog_migrate/c207bbda52b345a4fc808a9f93ca8aa8.jpeg" alt="MDB Logo" width="200" height="200">

代码效果

代码说明

src属性为要显示图片文件的位置URL（图片文件的路径）
alt属性当获取图片出现问题时显示的文字（占位符）
可谓图片指定高宽度，但不推荐

图片转base64

对于小尺寸的图片可采用base64编码,提升用户的体验

将图片转为base64网页：https://c.runoob.com/front-end/59

压缩图片推荐网址

https://www.websiteplanet.com/zh-hans/webtools/imagecompressor/
https://tinify.cn/

8. 文件路径

例子	解释
`<img src="picture.jpg">`	该图片文件与当前文档在同一目录中
`<img src="./images/picture.jpg">`	该图片文件在当前目录下的images目录中
`<img src="../picture.jpg">`	该图片文件在上一级目录中

9. 表格

代码示例

有时，页面的内容需要用表格来实现，这时可以使用table标签：

 <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

代码说明

<tr>表示行
<td>表示行中的单元
<th>是表头的单元（会加粗显示）

10. 列表

无序列表

<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

说明：无序列表使用<ul></ul>标签,默认使用中心原点作为每项的标志，type="square"为设置为方形

有序列表

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

说明：有序列表使用<ol>标签，默认使用数字作为每项的标志，type="a"设置为阿拉伯字母

表单

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

11. HTML元素的显示

HTML 的元素可以以称为区块或内联的方式进行显示。

区块元素

区块元素在浏览器显示时会以新行来开始和结束。如：<h1>, <pre>, <ul>, <table>，<div>,<p>

示例

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

内联元素

内联元素相反，他们总是一个接一个进行显示，不会新起一行。如：<span>, <input>, <td>, <a>, <img>

示例

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://i-blog.csdnimg.cn/blog_migrate/c207bbda52b345a4fc808a9f93ca8aa8.jpeg">

12. 预设格式

如果想在网页上展示一些特别格式的文本，可以使用<pre>标签

示例

<!-- pre标签中的内容将保持格式不变 -->
<pre>
    《饮湖上初晴后雨》

水光潋滟晴方好，山色空蒙雨亦奇。

欲把西湖比西子，淡妆浓抹总相宜。
</pre>

13. 特殊字符

在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
ISO-8859-1字符实体手册
详见网页 https://www.runoob.com/tags/ref-entities.html

かっこ良さそうにもない猪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习总结

WEB大致构成HTML是网页的框架CSS是网页的装JavaScript用于网页互动HTML学习总结1. 什么是HTMLHTML是超文本标记语言(HyperText Markup Language)的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。2. HTML元素（标签）a. 常见元素HTML标记包含一些规定元素，如<head>，<title>，<body>
复制链接

扫一扫