HTML入门学习笔记（案例+详解）

"wink

已于 2022-05-06 11:50:38 修改

阅读量3.5k

点赞数 11

分类专栏： Web：前端技术探索与实践文章标签： html5 前端前端框架

于 2022-03-28 00:16:33 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_61370021/article/details/123767114

版权

Web：前端技术探索与实践专栏收录该内容

11 篇文章

订阅专栏

本文档介绍了HTML的基本概念，包括标签使用、文档结构及基础标签的应用，如标题、段落、图像和超链接等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

一、HTML 简介

1、HTML是什么？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2、什么是HTML标签？

HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的，例如<body>和</body>
有些特殊的标签必须是单个标签，例如<br>
标签对中的第一个标签是开始标签，第二个标签是结束标签

<html>
	<head>
		<title>前端开发</title>
	</head>
	<body>
		<h1>HTML</h1>
		<p> HTML超文本标记语言，是用来描述网页的一种标准语言。</p>
	</body>
</html>

二、HTML 文档结构

1、HTML基本结构

标签名	定义	说明
`<!DOCTYPE HTML>`	文档声明	声明这是一个HTML文档
`<html></html>`	HTML标签	告诉网页浏览器，整个网页是从这里开始的，然后到结束
`<head></head>`	文档的头部	在head标签中必须包含title标签
`<title></title>`	文档的标题	显示在搜索引擎结果中的页面标题
`<body></body>`	文档的主体	元素包含文档的所有内容

HTML 文档是用来描述网页的，包含 HTML 标签和纯文本。
HTML文档的后缀名必须是.html或.htm
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

2、文档类型声明标签

<!DOCTYPE> 是文档类型声明标签
<!DOCTYPE> 声明位于文档中的最前面的位置
<!DOCTYPE> 作用：告诉浏览器使用哪种HTML版本来显示网页

3、lang语言属性

<html lang="en">

en 定义语言为英语
zh-CN定义语言为中文
lang语言属性作用：定义当前文档显示的语言

4、字符集与编码

	<meta charset="UTF-8">

<meta>标签：元数据
charset 属性：用来规定 HTML 文档应该使用哪种字符编码
常用的编码有GB2312、GBK 和 UTF-8，UTF-8基本包含了全世界所有国家需要用到的字符

三、HTML 基础标签

1、标题标签

<body>
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
</body>

标题标签 可使内容加粗
标签序号越小字号越大
每个标题独占一行

2、段落标签

<p></p>

<body>
	<p>段落标签</p>
    <p>段落1</p>
    <p>段落2</p>
</body>

可以对HTML文档内容分为多个段落。

3、空格标签

 

&nbsp;

在html代码中每输入一个 ，就表示一个空格

4、注释标签

    <!-- 注释语句 -->

注释的快捷键是： ctrl + / 或者 ctrl +shift + /
注释是给人看的，目的是为了更好的解释这部分代码是干啥的，程序是不执行这个代码的

5、换行标签

<br>

    <br>

单词缩写： break 打断 ,换行
在HTML中，如果希望某段文本强制换行显示，就需要使用换行标签<br>

6、盒子标签

<div> </div> 和<span></span>

<div> 这是头部 </div>    <span>今日价格</span>

<div> </div> 和<span></span> 是没有语义的 是我们网页布局主要的2个盒子
<div> </div> 一行只能放一个
<span></span> 一行上可以放多个

7、水平线标签

<hr/>

<hr/>是单标签

单词缩写： horizontal 横线
<hr/>就是创建横跨网页水平线的标签
水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。

8、预格式化文本标签

<pre></pre>

<pre>

  此例演示如何使用 pre 标签

  对空行和 空格

  进行控制

</pre>

<pre></pre>标签可定义预格式化的文本
预格式化文本就是按照我们预先写好的文字格式来显示页面，保留空格和换行

9、文本格式化标签

标签	显示效果
`<strong></strong>`和`<b></b>`	加粗
`<i></i>`和`<em></em>`	斜体
`<s></s>`和`<del></del>`	加删除线
`<u></u>`和`<ins></ins>`	加下划线

<b></b>只是加粗。 <strong><strong> 除了可以加粗还有强调的意思,语义更强烈。

10、图像标签

<img/>
语法如下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名

属性	属性值	说明
`src`	URL	图像的路径
`alt`	文本	图像不能显示时的替换文本
`title`	文本	鼠标悬停时显示的内容
`width`	像素	设置图像的宽度
`height`	像素	设置图像的高度
`border`	数字	设置图像边框的宽度
注意：

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
任何标签的属性都有默认值，省略该属性则取默认值。
采取键值对的格式 key=“value” 的格式

下面为参考代码：

<body>
<!-- 正常的图片 -->
< img src="D:\JPG\1.jpy">
<!-- 设置图片的宽度 -->
< img srcm"D:\JPG\1.jpg" width="200">
<!-- 设置了高度的标签 -->
< img src="D:\JPG\1.jpg" height="200">
<!--同时设置了高度和宽度的标签-->
< img src="D:\JPG\1.jpg" width="100" height="200">
<!-- 设置了标题的标签 -->
< img src="D:\JPG\1.jpg" title="白雪公主">
<!-- 用alt属性来显示图片未加载出来 -->
< img src="D:\JPG\1.Jpg" alt="这是一张图片">
</body>

11、超链接标签

<body>
    <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
</body>

属性	作用
`href`	指定链接目标的`url地址`
`target`	指定连接页面的打开方式，`_self`为默认值，`_blank`为在新窗口中打开
注意：

href=“#”，表示该链接暂时为一个空链接

12、列表标签

标签名	定义	说明
`<ol></ol>`	有序列表	包含`<li></li>`，有顺序，使用情况较少
`<ul></ul>`	无序列表	包含`<li></li>`，无顺序，最常用的列表
`<dl></dl>`	自定义列表	包含`<dt>`和`<dd>`,`<dt>`和`<dd>`里面可以放任何标签

<body>
    <ul>
        <li>无序标签</li>
        <li>无序标签</li>
    </ul>
    <ol>
        <li>有序标签</li>
        <li>有序标签</li>
    </ol>
    <dl>
        <dt>自定义标签</dt>
        <dd>自定义标签</dd>
    </dl>
</body>

13、表格标签

<body>
    <table>
        <tr>  <th>姓名</th>     <th>性别</th>   <th>年龄</th>        </tr>
        <tr>  <td>小明</td>     <td>男</td>     <td>22</td>          </tr>  
        <tr>  <td>小红</td>     <td>女</td>     <td>21</td>          </tr>                
    </table>
</body>

<table></table>用于定义一个表格标签。
<th></th> 用于定义表格中的表头，必须嵌套在<tr></tr>标签中。
<tr></tr> 用于定义表格中的行，必须嵌套在<table></table>标签中。
<td></td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

14、表单标签

一个完整的表单通常由表单域，表单控件和提示信息三部分组成
1、表单域
<form></form>标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。
注意:

每个表单都应该有自己表单域。我们现在做页面，不写看不到效果，但是如果后面学 ajax 后台交互的时候，必须需要 form表单域。

2、表单控件

① input 控件：

<input type="属性值" value="你好">

<input/>标签为单标签 input是输入的意思
type属性设置不同的属性值用来指定不同的控件类型
常用属性

② textarea 控件

<textarea col="列" row="行">
  文本内容
</textarea>

通过textarea控件可以轻松创建多行文本输入框.
cols=“列数” rows=“行数”

③ <label>标签
1、第一种用法就是用label直接包括input表单。

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

适合单个表单选择

2、第二种用法 for 属性规定 label 与哪个表单元素绑定。

for的属性值应和id的属性值相同

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

<label></label>用于绑定一个表单元素
当我们鼠标点击<label></label>里面的文字时，光标会定位到指定的表单里面，用来增加用户体验

四、HTML 基础（理解）

15、文本框和文本域的区别

表单	名称	区别	默认值显示	应用场景
`input type="text"`	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
`textarea`	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

以下为案例：

一、文本框与密码框

<body>
    <form>
        账号：<input type="text">
        密码：<input type="password">
    </form>
</body>

type 属性设置为text是文本框
type 属性设置为 password 是密码框

二、select下拉表单

<form>
    <select>
        <option selected="selected">地区</option>
        <option>北京</option>
        <option>上海</option>
    </select>
</form>

<select>中至少包含一对<option>
在<option>中定义 selected=“selected” 时，当前项即为默认选中项
但是我们实际开发会用的比较少

三、文件域和按钮

<body>
    <form>
        <input type="button" value="浏览文件"> <br>
        上传文件：<input type="file">
    </form>
</body>

type 属性设置为file：是一个文件域，可以上传文件
type 属性设置为button：是一个按钮

四、单选框和复选框

<body>
    <form>
        性别：男<input type="radio" name="sex"> 女 <input type="radio" name="sex">
        选课：政治<input type="checkbox" name="subject"> 历史<input type="checkbox"> 地理<input type="checkbox" name="subject">
    </form>
</body>

type 属性设置为 radio 是单选框
type 属性设置为 checkbox 是复选框
name是表单元素的名字，单选框和复选框应有相同的name值

16、常见属性解析

1、type 属性

这个属性通过改变值，可以决定了你属于那种input表单。
比如 type = 'text' 就表示文本框可以做用户名，昵称等。
比如 type = 'password' 就是表示密码框用户输入的内容是不可见的。

用户名: <input type="text" /> 
密  码：<input type="password" />

2.、value属性

用户名:<input type="text"  name="username" value="请输入用户名">

value 表示默认的文本值。
有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。
3、 name属性

用户名:<input type="text"  name=“username” />

name主要作用就是用于区别不同的表单

4、checked属性

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

表示默认选中状态。较常见于 单选按钮和复选按钮。

5、input属性小结
在这里插入图片描述

17、特殊字符

一些特殊的符号，我们再html 里面很难或者不方便直接使用，我们此时可以使用下面的替代代码。
字符的代码是以运算符&开头,以分号运算符;结尾。
他们不是标签，而是符号

18、锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：

1. 使用相应的id名标注跳转目标的位置。 (找目标)
  <h3 id="two">第2集</h3> 

2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （拉关系）  我也有一个姓何的朋友。
  <a href="#two">

快速记忆法：
好比找个人办事，首先找到他，然后拉关系，最后看效果