快速入门HTML（半小时包会）_meta错误写法-CSDN博客

本文链接：https://blog.csdn.net/remakeprogramer/article/details/120862905

HTML

一、背景：

1、什么是HTML

HTML也就是Hyper Text Markup Language的缩写，超文本标记语言的意思，所谓超文本，就是除了文本之外，还可以进行其他的标记，比如各种媒体元素等。

2、HTML的发展

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jTEHw9ZR-1634700899485)(C:\Users\利姆鲁\AppData\Roaming\Typora\typora-user-images\image-20211020103148775.png)]$
目前使用的就是HTML5

3、W3C标准

W3C：全称World Wide Web Consortium，成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
网址为：http://www.w3.org/，http://www.chinaw3c.org/

W3C标准包括：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

4、HTML的优势

世界知名浏览器厂商都对HTML5的支持
可跨平台

二、HTML的标签说明及其使用

1、网页头部（head）的标签

DOCTYPE：用来告诉浏览器端，我们使用的是什么规范

meta：描述性标签，一般用来描述网站的一些信息，可以用来对搜索优化，比如让搜索引擎固定多少天访问一次（当网页的缓存被清掉的时候，再次访问延续缓存）

title：网页标题

示例代码如下：

<!--DOCTYPE：用来告诉浏览器端，我们使用的是什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head表示网页头部-->
<head>
<!--    meta是描述性标签，一般用来描述网站的一些信息，可以用来对搜索优化，比如让搜索引擎固定多少天访问一次（当网页的缓存被清掉的时候，再次访问延续缓存）-->
    <meta charset="UTF-8">
<!--    title：网页标题-->
    <title>Title</title>
</head>
<!--网页的主体，我们看到的网页就是在这里编写的-->
<body>

    <p>hello</p>

</body>
</html>

2、网页主体（body）的基本标签

标题标签：h

水平线标签：hr

段落标签：p

换行标签：br

粗体标签：strong

斜体标签：em

特殊符号：由&开头且以;结尾，如&nbsp；是空格

说明：标签会被分为块级标签和行内标签，块级标签会单独占一行（也就是会自动换行），而行内标签如果放在一起，则会在同一行进行展示，如需换行需要手动换行

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--六个标题标签（块级元素）-->
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>

<!--水平线-->
<hr/>

<!--段落标签（块级元素）-->
<p>我</p>
<p>是</p>
<p>段</p>
<p>落</p>

<!--水平线-->
<hr/>

<!--<br/> 换行标签-->
我<br/>
是<br/>
段<br/>
落<br/>

<!--粗体（行内元素）-->
<strong>我是粗体</strong><br/>

<!--斜体（行内元素）-->
<em>我是斜体</em><br/>

<!--特殊符号（行内元素） 由&开头且以；结尾-->
<!--空格-->
&nbsp;
<!--大于号-->
&gt;
<!--小于号-->
&lt;
<!--版权符号-->
&copy;

</body>
</html>

3、媒体元素的使用（图片、视频、音频）

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--图片-->
<!--
src：图像地址（可使用绝对地址或相对地址，更推荐使用相对地址）
alt：图像失效时的替代文字
title：鼠标悬停提示文字
width：图像宽度
height：图像高度
-->
<img src="../resources/img/photo.png" alt="躺平" title="悬停时显示的文字" width="300" height="300">

<!--视频-->
<!--
src：资源路径
controls：控制条
autoplay ：自动播放
-->
<video src="../resources/img/1.mp4" controls autoplay></video>

<!--音频-->
<!--
src：资源路径
controls：控制条
autoplay ：自动播放
-->
<audio src="../resources/img/1.mp3" controls autoplay></audio>

</body>
</html>

4、超链接标签（a）的使用

超链接分为：

1.页面链接：打开指定页面的链接

2.锚链接：可以跳转到本页面的特定位置的链接，需要设定跳转的位置

3.功能性链接：可以直接完成某些功能的链接，如直接发送邮箱的邮箱链接

可以以文本作为链接载体也可以以图片作为链接载体

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
超链接分为：1.页面链接 2.锚链接 3.功能性链接
可以以文本作为链接载体也可以以图片作为链接载体
-->

<!--a标签
   href:必填，表示要跳转到那个页面
   target:表示窗口再哪里打开
       _blank:再新标签中打开
       _self:在自己的网页中打开
-->

<!--设置锚链接跳转点-->
<a name="top">网页顶部</a>

<!--1.页面链接-->
    <!--文本链接-->
    <a href="https://baidu.com" target="_blank">点我跳转</a>
    <!--图片链接-->
    <a href="https://baidu.com" target="_blank">
        <img src="../resources/img/photo.png" alt="躺平" title="悬停时显示的文字" width="300" height="300">
    </a>

<!--2.锚链接-->
    <a href="#top">回到顶部</a>


<!--3.功能性链接，如邮箱链接-->
    <a href="mailto:8629303@qq.com">点击联系我</a>
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
        <img border="0" src="http://wpa.qq.com/pa?p=2::53"
             alt="点击联系我" title="点击联系我"/>
    </a>

</body>
</html>

5、列表

列表分为：1.有序列表ol、2.无序列表ul、3.自定义列表dl

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
列表分为：1.有序列表 2.无序列表 3.自定义列表
-->

<ol>
  <li>java</li>
  <li>c</li>
  <li>python</li>
</ol>

<ul>
  <li>java</li>
  <li>c</li>
  <li>python</li>
</ul>

<dl>
  <dt>语言</dt>
  <dd>c</dd>
  <dd>c++</dd>
  <dd>python</dd>
  <dd>php</dd>
</dl>

</body>
</html>

6、表格

表格table包含行tr和列td，且可以通过colspan属性跨列和rowspan属性跨行

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1px">
  <tr>
    <!--colspan 跨列-->
    <td colspan="4">1-1</td>
  </tr>
  <tr>
    <!--rowspan 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
  </tr>
</table>

</body>
</html>

7、一般页面的基本结构（学到web开发的时候（如使用JSP）就知道为什么是那样的结构了）

header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web网页中的一块独立区域
article	独立的文章内容
aside	相关内容或应用
nav	导航类辅助内容

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>
  <h2>页面头部</h2>
</header>

<section>
  <h2>页面主体</h2>
</section>

<footer>
  <h2>页面底部</h2>
</footer>
</body>
</html>

8、iframe内联框架

iframe的作用就是在一个页面里嵌套其他的页面

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--iframe内联框架
    src：地址
    width和height：宽度和高度
-->
<iframe src="https://baidu.com" frameborder="0" width="300px" height="300px">
</iframe>

<iframe src="" name="hello" frameborder="0"></iframe>
<a href="1.head中的标签.html" target="hello">点击跳转</a>


<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10"
        scrolling="no" border="0"
        frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>


</body>
</html>

9、表单（HTML的重点）

表单（form）的应用场景非常广泛，比如我们最常见的账号密码的登录就需要用到表单，为什么输入账号密码就能进行登录，这就涉及到了数据提交后对数据的处理了，涉及到后端的知识，有兴趣的话可以翻一下我写的JaveWeb基础博客。
表单form一般都会结合输入input来使用，input标签非常灵活，使用type属性可以控制input标签的实际作用，用法会在代码中给出，各属性作用如下
1. text：文本框
2. radio：单选框
3. checkbox：多选框
4. 按钮系列：
  1. button：普通按钮
  2. image：图片按钮
  3. submit：提交表单按钮
  4. reset：重置表单按钮
5. textarea：文本域
6. file：文件上传按钮
7. 验证系列：
  1. email：验证是不是邮箱格式
  2. url：验证是不是url格式
  3. number：验证是不是数字格式
8. range：滑块
9. search：搜索框
下拉框select也常用于和表单form结合使用，
input标签的关键字使用：
1. 隐藏域：hidden（web中常用的技巧，可以隐藏提交）
2. 只读：readonly
3. 禁用：disabled
html层面可以做一些简单的提示和验证判断
1. placeholder：提示信息
2. required：非空判断
3. pattern：正则表达式

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>注册</h1>

<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
    get方式提交：外面可以在url中看到外面提交的信息，不安全，高效
    post方式提交，比较安全，可以传输大文件
-->
<form action="1.head中的标签.html" method="get">
  <!--文本输入框
  value="好帅"  默认初始值
  maxlength="8"   最长能写几个字符
  size="30"   文本框的长度
  -->
  <p>名称：<input type="text" name="username" ></p>
  <!--密码框-->
  <p>密码：<input type="password" name="pwd"></p>

  <!--单选框标签
  type="radio"：单选框的值
  value：单选框的值
  name：表示组
  checked：默认选项
  -->
  <input type="radio" value="boy" name="sex" checked/>男
  <input type="radio" value="girl" name="sex" />女

  <!--多选框
  type="checkbox"
  hecked：默认选项
  -->
  <p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby" checked>敲代码
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="game" name="hobby">游戏
  </p>

  <!--按钮
  input type="button"    普通按钮
  input type="image"     图片按钮
  input type="submit"     提交按钮
  input type="reset"      重置按钮
  -->
  <p>
    <input type="button" name="btn1" value="点击变长">
    <input type="image" src="../resources/img/1.jpg">
  </p>

  <!--下拉框，列表框
  selected：默认选择
  -->
  <p>国家：
    <select name="列表名称">
      <option value="china">中国</option>
      <option value="us">美国</option>
      <option value="eth" selected>瑞士</option>
      <option value="yd">印度</option>
    </select>
  </p>

  <!--文本域-->
  <p>反馈：
    <textarea name="textarea" id="" cols="30" rows="10"></textarea>
  </p>

  <!--文件域
  -->
  <p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
  </p>

  <!--邮件验证-->
  <p>邮件：
    <input type="email" name="email">
  </p>
  <!--URL-->
  <p>URL：
    <input type="url" name="url">
  </p>
  <!--数字-->
  <p>数字：
    <input type="number" name="num" max="100" min="0" size="10">
  </p>

  <!--滑块-->
  <p>音量：
    <input type="range" name="voice" min="0" max="100" step="2">
  </p>

  <!--搜索框-->
  <p>搜索：
    <input type="search" name="search">
  </p>

  <p>
    <input type="submit">
    <input type="reset">
  </p>
</form>

<!--
关键字使用：
隐藏域：hidden
只读：readonly
禁用：disabled
-->

<!--增强鼠标可用性，点击label，光标自动到text上-->
<p>
  <label for="mark">你点我试试</label>
  <input type="text" id="mark">
</p>

<!--
html层面的初级验证作用
placeholder：提示信息
required：非空判断
pattern：正则表达式
-->
<p>名称：<input type="text" name="username" placeholder="请输入用户名"></p>
<p>名称：<input type="text" name="username" required></p>
<!--常用的正则：https://www.jb51.net/tools/regexsc.htm-->
<p>自定义邮箱：
  <input type="text"
         name="diy"
         pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>

</body>
</html>