admin 管理员组

文章数量: 887016

HTML入门

  • 前言
  • 一、HTML是什么？
  • 二、学习HTML
    • （一）.Html文档基本结构
    • （二）基本元素
      • 1.标题
      • 2.文本格式
      • 3.超链接
      • 4.图片
      • 5.锚点
      • 6.表格
      • 7.表单
      • 8.区块元元素和内联元素
  • 总结

前言

Web前端开发是从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。
随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。
本次我们就简单总结一下HTML的学习。

一、HTML是什么？

HTML（Hyper Text Markup Language），即超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。HTML文件的扩展名为htm（因为之前的文件系统最多只支持三位扩展名）或html。

超文本（Hyper Text）是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联，这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是位于地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源连接起来，便于人们查找、检索信息。HTML 的“超文本”特性，主要指文本中包含了所谓“超级链接”点。

二、学习HTML

（一）.Html文档基本结构

打开VScode,新建html文档，输入感叹号（英文输入法），就可以快速生成了一个HTML的框架，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

基本结构

  • <!DOCTYPE html>是 Document Type Declaration 的简称，用来声明文档，也就是告知 web 浏览器当前页面使用了哪种 HTML 版本编写代码，此处使用的是 HTML 5 的版本。出于历史原因需要，现在可有可无。

  • <html> 表示页面编写的代码都是 HTML 代码。它是成对出现的标签，直到 </html> 结束。除了声明文档外的所有代码都必须写在 <html></html> 中间；这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。

  • <head> 表示页面的"头部"，页面的 title（标题）一般写在 <head></head> 中间；这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。

  • <meta charset="utf-8"> 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。

  • <title> 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。

  • <body> 表示页面的"身体"，页面中的绝大部分内容都可以写在 <body></body> 之间。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

（二）基本元素

1.标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

  <h1>This is heading 1</h1>
  <hr>
  <h2>This is heading 2</h2>
  <hr>
  <h3>This is heading 3</h3>
  <hr>
  <h4>This is heading 4</h4>
  <hr>
  <h5>This is heading 5</h5>
  <hr>
  <h6>This is heading 6</h6>
  <hr>

效果如下


其中 <hr>表示添加一条水平直线。

2.文本格式

常用的标签如下

html标签实现的功能
<mark></mark>用于文本高亮显示
<del></del>会显示一条删除线
<ins></ins>显示一条下划线
<small></small>缩小字体
<strong></strong>特别强调，一般为粗体
<b></b>粗体
<em></em>特别强调，一般为斜体
<i></i>斜体
<cite></cite>用于引证、举例，一般为斜体
  <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><ins>This line of text is meant to be treated as an addition to the document.</ins></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><b>This line rendered as italicized text.</b></p>
  <p><em>This line rendered as italicized text.</em></p>
  <p><i>This line rendered as italicized text.</i></p>
  <p><cite>This line rendered as italicized text.</cite></p>

效果如下

注意：Html5貌似已经不支持<big></big>标签了，可以使用font-size属性和font-weight属性实现字体加大加粗。

3.超链接

![请添加图片描述](https://img-blog.csdnimg/163accba0572491cbeefc58d146dd70c.gif)

  • href即为要跳转去的地址 URL（Uniform Resource Locator)

  • target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）

  • 超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

当target属性为_blank效果如下


点击超链接打开了一个新的界面

如果删除target属性，则效果如下

点击超链接后，直接在当前界面打开网页，覆盖了原有的网页

4.图片

<img src="https://mdbootstrap/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

我们在网页中一般使用绝对路径，通过URL（资源定位符访问）

  <img src="https://mdbootstrap/img/logo/mdb192x192.jpg" alt="MDB Logo" width="300" height="200">
  <img src="http://image.qianye88/pic/fbfcfae637bcf3bf2b6205130e34d38d" alt="MDB Logo" width="300" height="200">
  <img src="http://pic.kuaizhan/g3/6a/4c/91b3-5fbf-4b92-b6db-348a7e1825a975" alt="MDB Logo" width="300" height="200">
  <img src="https://img.zcool/community/01193959eeec64a801202b0c23804b.jpg@1280w_1l_2o_100sh.jpg" alt="MDB Logo" width="300" height="200">

插入图片后的效果如下

5.锚点

下面我们来介绍一下锚点。锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
其本质还是一种超链接，只不过是在页内的一种超链接，通过ID判断其在页面中的位置

 <p> 
<!-- 文档其余部分 -->
<h2 id="C4">第四章 行以致远</h2>
<div><img src="https://mdbootstrap/img/logo/mdb192x192.jpg" alt="MDB Logo" width="300" height="200"></div>
<div><img src="http://image.qianye88/pic/fbfcfae637bcf3bf2b6205130e34d38d" alt="MDB Logo" width="300" height="200"></div>
<div><img src="http://pic.kuaizhan/g3/6a/4c/91b3-5fbf-4b92-b6db-348a7e1825a975" alt="MDB Logo" width="300" height="200"></div>
<div><img src="https://img.zcool/community/01193959eeec64a801202b0c23804b.jpg@1280w_1l_2o_100sh.jpg" alt="MDB Logo" width="300" height="200"></div>
<a href="#C4">跳到第四章</a>

实例效果如下

6.表格

有时，页面的内容需要用表格来进行呈现。我们使用

等标签即可

<table>
定义表格，生成的表格在一对<table></table>中；

<caption> 定义表格标题，当表格需要标题时，使用<caption>表格标题</caption>

<thead>

定义表格的页眉

<tbody>

定义表格的主体

<tbody>

定义表格的主体

<th>

定义表格的表头，一般是表头中的内容会被加黑；

<tr>

定义表格的行

<td>

定义表格单元格

<col>

定义用于表格列的属性

<colgroup>

定义表格列的组

 <!--无边框-->
<table>
  <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
  </tr>
  <tr>
      <td>1</td>
      <td>马里奥</td>
      <td>男</td>
  </tr>
  <tr>
      <td>2</td>
      <td>灰姑娘</td>
      <td>女</td>
  </tr>

</table>

<br>
<!--边框宽度为2-->
<table border="2">
  <tr>
      <th> 编号 </th>
      <th>姓名</th>
      <th>性别</th>
  </tr>
  <tr>
      <td>1</td>
      <td>马里奥</td>
      <td>男</td>
  </tr>
  <tr>
      <td>2</td>
      <td>灰姑娘</td>
      <td>女</td>
  </tr>

</table>
<br>

<!--边框宽度为10-->
<table border="10">
  <tr>
      <th> 编号 </th>
      <th>姓名</th>
      <th>性别</th>
  </tr>
  <tr>
      <td>1</td>
      <td>马里奥</td>
      <td>男</td>
  </tr>
  <tr>
      <td>2</td>
      <td>灰姑娘</td>
      <td>女</td>
  </tr>

</table>


关于HTML的表格样式还有很多、包括单元格边框、合并单元格、单元格对齐、背景色、单元格边距、边框等。
具体可参考
HTML表格（HTML 表格的使用，收藏这一篇就够了）
HTML中的表格和表单

7.表单

网页中，需要跟用户交互，收集用户资料，此时需要表单。

HTML中，一个完整的表单通常由表单控件（也称表单元素）（即表单中出现的如输入框按键之类的小方框）、提示信息和表单域（表单整体区域）3个部分构成。

基本元素

  • 文本框-语法
<input  type="text"(文本框)  name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />
  • 密码框语法
<input  type="password "(密码框)  name="pass"(密码框的名称)  size="20"(密码框的长度) />
  • 单选按钮语法
<input name="gen" type="radio"(单选按钮框) value="男"(值)  checked(单选按钮选中状态)  />男
<input name="gen" type="radio" value="女" />女
  • 列表框语法
<select(列表框) name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…</option >
<option(选项) value="选项的值">…</option >
</select>

这里只是一些简单的语法应用，具体可参考
HTML-表单（非常详细）

应用实例

<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>

显示效果

8.区块元元素和内联元素

区块元素的特点：

  • 每个元素独占一行，默认情况下宽度等于父元素的宽度
  • 不设置高度时，高度为0，有内容时高度由内容撑开，不解析换行符
  • 可以设置width、height、margin、padding属性
  • dispaly:block

内联元素的特点：

  • 相邻的元素会排列在同一行，排不下时会自动换行
  • 不支持宽高属性，宽高完全由内容撑开，会解析换行符
  • 使用部分样式会出错（上下margin和padding等）,只能设置margin-left、margin-right、padding-left、padding-right.(可以出现效果)
  • dispaly:inline

简单区别一下，如何设置为区块元素的话，无论是否该行还存在空间，都会另起新行显示；而内联元素的话则是如果有空间则在后面继续显示，当该行没有足够空间时，才会在下一区域显示。

实例

<img src="https://img.zcool/community/01193959eeec64a801202b0c23804b.jpg@1280w_1l_2o_100sh.jpg" alt="MDB Logo" width="400" height="400">
  <img src="http://wifi.changbaishan.gov/place/zbjq/201803/W020180323393781391748.jpg" alt="MDB Logo" width="400" height="400">


加入区块<div></div>后，效果如下

<div><img src="https://img.zcool/community/01193959eeec64a801202b0c23804b.jpg@1280w_1l_2o_100sh.jpg" alt="MDB Logo" width="400" height="400"></div>
  <div><img src="http://wifi.changbaishan.gov/place/zbjq/201803/W020180323393781391748.jpg" alt="MDB Logo" width="400" height="400"></div>


<img></img>默认是内联元素，所以当该区域后面如果存在空间，则继续在该空间后面显示；
当强制转换成<div></div>变为区块，则默认会再找一块空白区域显示。

总结

关于HTML的简单学习就到此为此，本篇文章只是简单的介绍了HTML的一些基本语法和操作，想要精通Web网页设计还有很远的路要走。

文章若有不当之处，敬请指教。

参考

web前端开发（一）—HTML基础

HTML介绍

HTML的基本结构

HTML表格（HTML 表格的使用，收藏这一篇就够了）

HTML中的表格和表单

HTML-表单（非常详细）

棋歌教学网

html中的区块元素和内联元素

本文标签： 入门 HTML

版权声明：本文标题：Html入门 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1729031076h1309144.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。