HTML基础使用

最新推荐文章于 2022-04-28 16:14:54 发布

Yuri-Taylor

最新推荐文章于 2022-04-28 16:14:54 发布

阅读量475

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/Cherry_jim/article/details/114370603

版权

前端基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML基础使用

一入后端深似海，后端还未学成又来霍霍前端啦～下面是简单的HTML入门级用法。

一、HTML语法规范

1.基本语法概述

1.HTML标签是由<>包围的关键词，例如。
2.HTML标签通常是成对出现的，例如，我们称为双标签，标签中的第一个标签是开始标签，第二个是结束标签。
3.有些特殊的标签必须是单个标签，例如
，我们称之为单标签。

2.标签关系

双标签关系可以分为包含关系和并列关系。
包含关系类似父子关系，例如：

<head>
	<title></title>
</head>

并列关系类似兄弟关系，例如：

<head></head>
<body></body?

二、HTML基本结构标签

1.基本结构标签

每一个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写的。

标签名	定义	说明
< html >< /html >	HTML标签	页面中最大的标签，称为根标签
< head >< /head >	文档的头部	在head标签中必须设置的标签是title
< title >< /title >	文档的标题	让页面拥有一个属于自己的网页标签
< body >< /body >	文档的主体	元素包含文档的所有内容

注意：HTML文档的后缀名必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。

2.文档类型声明标签

< !DOCTYPE >文档类型声明，作用就是告诉浏览器使用哪种HTML版本显示网页。
< !DOCTYPE html >意思是当前页面采取的是HTML5版本来显示网页。
注意：
< !DOCTYPE >声明未愈文档中的最前面的位置，处于标签之前；
< !DOCTYPE >不是一个HTML标签，它就是文档类型声明标签。

3.lang 语言种类

lang用来定义当前文档显示的语言。
1.en定义语言为英语
2.zh-CN定义语言为中文
其实，对于文档显示来说，定义为en的文档也能显示中文，定义为zh-CN的文档也可以显示英文

4.字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字。
在< head >标签内，可以通过< meta >标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8" />

上面的语法是必须要写的代码，否则可能引起乱码的情况。

三、HTML常用标签

1.标题标签

为了使网页更具有语义化，我们会经常使用标题标签，HTML提供了6个等级的网页标题：
< h1 >< /h1 >…< h6 >< /h6 >
特点：
1.标题标签会使文字变粗，字号依次变大，h1最大。
2.一个标签独占一行

2.段落和换行标签

在网页中，要使文字清晰、有条理的显示出来，就需要将文字分段显示。在HTML中，< p >标签用于定义段落。
特点：
1.文本在一个段落中，会根据浏览器窗口的大小自动换行
2.段落和段落之间留有空隙
< br / >标签可实行强制换行。
特点：
1.< br / >是个单标签
2.< br / >只是简单的开启新的一行，和段落不一样，段落之间会插入一些垂直的间距。

3.文本格式化标签

在网页中，有时候需要为文字设置粗体、斜体或下划线效果，就需要用到文本格式化标签了。

语义	标签	说明
加粗	< strong >< /strong>或< b >< /b >	更推荐使用< strong >，标签加粗，语义更强烈
倾斜	< em >< /em >或< i >< /i >	更推荐使用< em >，标签加粗，语义更强烈
删除线	< del >< /del >或< s >< /s >	更推荐使用< del >，标签加粗，语义更强烈
下划线	< ins >< /ins >或< u >< /u >	更推荐使用< ins >，标签加粗，语义更强烈

4.< div >和< span >标签

< div >和< span >是没有语义的，它们就是一个盒子，用来装内容。
特点：
1.< div >标签用来布局，但是一行只能放一个< div >，大盒子。
2.< span >标签用来布局，一行可以有多个< span >，小盒子。

5.图像标签和路径

在HTML中，< img >标签用于定义HTML页面中的图像。
例如：

<img src="图像.jpg" />

其中src是< img >标签的必须属性，它用于指定图像文件的路径和文件名。
图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时出现的文字
title	文本	提示文本，鼠标放到图像上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

注意：
1.图像标签可以拥有多个属性，必须写在标签名的后边。
2.属性之间部分前后顺序，标签名与属性、属性与属性之间均以空格分开。
3.属性采取键值对的格式，即属性=“属性值”。
当图片非常多时，我们需要建立一个文件夹来存放这些图像文件，这时候查找图像，就需要采用“路径”的方式来指定图像文件的位置。
路径分为：
1.相对路径：以引用文件所在位置为参考建立出来的目录路径。即图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如< img src=“baidu.jpg” />
下一级路径	/	图像文件位于HTML文件下一级，如< img src=“picture/baidu.jpg” />
上一级路径	… /	图像文件位于HTML文件上一级，如< img src="…/baidu.jpg" />

2.绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

<img src="C:\windows\picture\baidu.jpg">

6.超链接标签

在HTML中，< a >标签用于定义超链接，作用是从一个页面链接到另一个页面。

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

属性	作用
href	用于指定链接目标的ul地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，在当前窗口打开，_blank为在新窗口打开

链接又分为：
1.外部链接：

<a href="http://www.baidu.com">百度</a>

2.内部链接：网站内部页面之间的链接

<a href="demo.html">首页</a>

3.空链接：没有确定链接目标时使用

<a href="#">空链接</a>

4.下载链接：点击链接会直接下载文件

<a href="soft.zip">下载文件</a>

5.网页元素链接：文本、图像、表格、音频、视频等都可以添加链接。
6.锚点链接：点击链接，可以快读定位到页面中的某个位置。
在链接文本的href属性中，设置属性为#名称的形式:

<a href="#two">第二集</a>

找到目标位置标签，里面田间一个id属性=刚设置的名称：

<h3 id="two">第二集介绍</h3>

四、HTML中的注释和特殊字符

1.注释

需要在HTML文件中添加一些便于阅读和理解但又不显示在页面中的注释文字，就需要使用注释标签。HTML中的注释以“< !–”开头，以“-- >”结束。

2.特殊字符

在HTML页面中，一些特殊的符号很难活着不方便直接使用，因此我们使用下面的字符来替代：

特殊字符	描述	字符的代码
	空格符	& nbsp;
<	小于号	& lt;
>	大于号	& gt;
&	和号	& amp;
¥	人名币	& yen;
<	空格符	& nbsp;
<	空格符	& nbsp;
<	空格符	& nbsp;
<	空格符	& nbsp;
<	空格符	& nbsp;
<	空格符	& nbsp;
<	空格符	& nbsp;

五、表格标签

1.表格的主要作用

表格主要用于显示、展示数据，可以让数据具有更高的可读性。

2.表格的基本语法

<table>
	<tr>
		<td>单元格内的文字</td>
	</tr>
</table>

注意：
（1）< table >< /table >是定义表格的标签；
（2）< tr >< /tr >是定义表格中的行，必须嵌套在< table >< /table >中；
（3）< td >< /td >是定义表格中的单元格，必须嵌套在< tr >< /tr >中；

3.表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。用< th >< /th >来表示表头部分。

<table>
	<tr>
		<th>姓名</th>
		<th>班级</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

姓名	班级	年龄

4.表格属性

属性名	属性值	描述
align	left\center\right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格单元是否拥有边框，默认为“”表示没有
cellpadding	像素值	规定单元边缘与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

5.表格结构标签

为了更好的表示表格的语义，可以将表格分为表格头部和表格主体两部分。用< thead >表示表格的头部区域，用< tbody >表示表格的主体区域。

<table>
	<thead>
		<tr>
			<th>姓名</th>
			<th>班级</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

姓名	班级	年龄

注意：（1）< thead >< /thead >用于定义表格的头部，里面必须拥有< tr >标签，一般位于第一行；（2）< tbody >< /tbody >用于定义表格的主体，主要用于放数据本体；（3）这两个标签都要包含在< table >< /table >标签中。 ##### 6.合并单元格（1）合并单元格的方式跨行合并：rowspan="合并单元格的个数" 跨列合并：colspan="合并单元格的个数" 跨行：最上侧单元格为目标单元格，写合并代码跨列：最左侧单元格为目标单元格，写合并代码

<table border="1" cellspacing="0">
	<tr>
    	<td></td>
        <td colspan="2"></td>
	</tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
     </tr>
     <tr>
         <td></td>
         <td></td>
     </tr>
</table>

六、列表标签

表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是整齐，有序。根据不同的使用场景，列表可分为三大类：无序列表，有序列表和自定义列表。

1.无序列表

用< ul >标签表示HTML中的无序列表，一般会以项目符号呈现列表项，而列表项使用< li >标签定义。

<ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>
            <p>123</p>
        </li>
    </ul>

页面显示如下：

榴莲
臭豆腐
鲱鱼罐头
123

注意：
（1）无序列表的各个列表项之间没有顺序级别之分，是并列的；
（2）< ul >< /ul >中只能嵌套< li >< /li >，直接在< ul >< /ul >标签中输入其他标签或文字的做法是不被允许的；
（3）< li >与< /li >之间相当于一个容器，可以容纳所有元素；
（4）无序列表会带有自己的样式属性，但是在实际应用中，我们用CSS来设置。

2.有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。HTML中用< ol >标签定义有序列表，列表排序用数字来显示，列表项使用< li >标签定义。

<ol>
	<li>《三国演义》 10000</li>
    <li>《西游记》 1000</li>
    <li>《水浒传》 100</li>
</ol>

显示如下：

《三国演义》 10000
《西游记》 1000
《水浒传》 100

注意：
（1）< ol >< /ol >中只能嵌套< li >< /li >，直接在< ol >< /ol >标签中输入其他标签或文字的做法是不被允许的；
（2）< li >与< /li >之间相当于一个容器，可以容纳所有元素；

3.自定义列表

自定义列表的使用场景：自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
在HTML中，< dl >标签用于定义描述列表，该标签会与< dt >和< dd >一起使用。

 <dl>
	<dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
    
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl>

显示如下：

关注我们

新浪微博

官方微信

联系我们

关注我们

新浪微博

官方微信

联系我们

注意：
（1）< dl >< /dl >里面只能包含< dt >和< dd >；
（2）< dt >和< dd >没有个数限制，经常是一个< dt >对于多个< dd >。

七、表单标签

表单主要是为了收集用户的信息。我们需要和用户进行交互，收集用户资料时就要用到表单。
在HTML中，一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3个部分构成。

1.表单域

表单域是一个包含表单元素的区域。在HTML中，< form >标签用于定义表单域，< form >会把它范围内的表单元素信息提交给服务器。

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

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面的多个表单
cellspacing	像素值	规定单元格之间的空白，默认2像素

2.表单控件

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
（1）input输入表单元素
< input >标签用于收集用户信息。< input >标签包含一个type属性值，输入字段拥有很多种形式，可以是文本框，按钮等。

<input type="属性值" />

注意：< input >是单标签，type属性值用来指定不同的控件类型。

属性	描述
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩盖
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清空表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文字，默认宽度为20个字符

<form action="xxx.php" method="get">
	<!-- text 文本框 用户可以里面输入任何文字 -->
	用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"><br> 
    <!-- password 密码框 用户看不见输入的密码 -->
    密码: <input type="password" name="pwd" >  <br> 
    <!-- radio 单选按钮  可以实现多选一 -->
    <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
    <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
    性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"><br> 
    <!-- checkbox 复选框可以实现多选 -->
    爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"><br> 
    <!-- 点击了提交按钮,可以把表单域form里面的表单元素里面的值提交给后台服务器 -->
    <input type="submit" value="免费注册">
    <!-- 重置按钮可以还原表单元素初始的默认状态 -->
    <input type="reset" value="重新填写">
    <!-- 普通按钮 button  后期结合js 搭配使用-->
    <input type="button" value="获取短信验证码"> <br>
    <!-- 文件域 使用场景 上传文件使用的 -->
    上传头像:  <input type="file" >
</form>

显示如下：
在这里插入图片描述
注意：
name和value是每个表单元素都有的属性值，主要给后台人员使用；
name表单元素的名字，要求单选按钮和复选框要有相同的name值；
checked属性主要针对单选按钮和复选框，主要作用是一打开页面就默认选中某个表单元素。
A.label标签
< label >标签为input元素定义标注。< label >标签用于绑定一个表单元素，当点击< label >标签内的文本时，浏览器会自动将焦点转到对应的表单元素上，用来增加用户体验。

<label for="sex"男</label>
<input type="radio" name="sex" id="sex" />
<!--label中的for对应input中的id-->

（2）select下拉表单元素
在页面中，如果有多个选项要让用户选择，并且需要节省页面空间时，可以使用< select >标签控件定义下拉列表。

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
</select>

注意：
< select >中至少包含一对< option >；
在< option >中定义selected="selelcted"时，当前项为默认选中项。
（3）textarea文本域元素
当用户输入内容比较多时，文本框就显得有点小了，此时我们用< textarea >标签，定义多行文本框。

<textarea row="3" col="20">
请输入内容
</textarea>

Yuri-Taylor

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML基础使用

HTML基础使用一入后端深似海，后端还未学成又来霍霍前端啦～下面是简单的HTML入门级用法。一、HTML语法规范1.基本语法概述1.HTML标签是由<>包围的关键词，例如。2.HTML标签通常是成对出现的，例如，我们称为双标签，标签中的第一个标签是开始标签，第二个是结束标签。3.有些特殊的标签必须是单个标签，例如，我们称之为单标签。2.标签关系双标签关系可以分为包含关系和并列关系。包含关系类似父子关系，例如：<head> <title></ti
复制链接

扫一扫