HTML基础入门

一、基础概念：

1.什么是HTML？

HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。

所谓超文本，有两层含义：

  • 它可以加入图片、声音、动画、多媒体等内容（超越了文本的限制）。
  • 它还可以从一个文件跳到另外一个文件，与世界各地的主机文件连接（超级链接文本）。

二、HTML的语法规范：

1.基础语法概述：

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

2.标签关系：

双标签关系可以分为：包含关系和并列关系。

三、标签：

1.基础标签：

①文档类型声明标签：

作用是告诉浏览器使用哪种HTML版本来显示网页。

1
<!DOCTYPR html>

上代码表达的意思是：当前页面采用HTML5版本来显示网页。
注意：

 1.<!DOCTYPE>声明位于文档的最前面的位置，处于< html >标签之前。
 2.<!DOCTYPE>不是一个HTML标签，它是文档类型声明标签。

②lang 语言种类：

用来定义当前文档显示的语言。

 1. en定义语言为英语。
 2. zh-CN定义语言为中文。

其实对于文档显示来说，无论定义为英文文档或是中文文档，它们都是可以同时显示中文和英文的。

③字符集：

字符集是多个字符的集合，以便计算机能够识别和存储各种文字。

1
<meta charset="UTF-8" />
可以通过<meta>标签的charset属性来规定HTML文档应该使用那种字符编码。

一般情况下，使用的都是UTF-8编码。此外，还有GBK、GB2313等。

2.常用标签：

①标题标签：

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

单词head的缩写，意为头部、标题。
标签解读：作为标题使用，并且从h1~h6重要性递减，字体变小，颜色变浅，同时一个标题独占一行。

②段落和换行标签：

段落标签：

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

标签解读：可以把HTML文档分割成若干段落；文本在一个段落中会根据浏览器窗口大小自动换行，段落和段落之间留有空隙。

换行标签：

1
<br />

标签解读：强制换行；就是在段落之中另起新的一行显示。

③文本格式化标签：

1
<strong></strong>或者<b></b>
标签解读：加粗标签，推荐使用前者，语义更强烈。

1
<em></em>或者<i></i>
标签解读：倾斜标签，推荐使用前者，语义更强烈。

1
<del></del>或者<s></s>
标签解读：删除线标签，推荐使用前者，语义更强烈。

1
<ins></ins>或者<u></u>
标签解读：下划线标签，推荐使用前者，语义更强烈。

④< div >和< span >标签：

这两个标签是没有语义的，它们就是一个盒子，是用来装内容的。

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

标签解读：

  • < div >标签用来布局，但是一行只能放一个< div >。==大盒子==
  • < span >标签用来布局，一行可以多个< span >。==小盒子==

⑤图像标签和路径：

1
<img src="图像URL" />

标签解读：==src==是< img > 标签的必须属性，用于指定图像文件的路径和文件名。

相关属性：

alt属性：

1
<img src="图像URL" alt="文本内容" />
添加alt属性后，当图片无法显示时，则会显示出alt属性内的文本内容。

title属性：

1
<img src="图像URL" alt="文本内容" title="提示文本" />
添加title属性后，将鼠标放置在图片上时，会提示title属性的文本内容。

width属性：

1
<img src="图像URL" alt="文本内容" title="提示文本" width="500" />
添加width属性后，可以给图像设定宽度大小，同时会对高度等比例缩放
可以根据自己的需要设定具体的数值。

height属性：

1
<img src="图像URL" alt="文本内容" title="提示文本" height="500" />
添加height属性后，可以给图像设定高度大小，同时会对宽度等比例缩放
可以根据自己的需要设定具体的数值。

border属性：

1
<img src="图像URL" alt="文本内容" title="提示文本" height="500" border="15" />
添加border属性之后，可以对图像添加一个边框，
border属性内的数值就是边框的粗细大小。

注意：

  1. 图像标签可以拥有多个属性，必须写在标签名的后面。
  2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  3. 属性采取键值对的格式，即是一个属性对应一个属性值。
路径：

1.相对路径：所谓相对路径，就是图片相对于HTML页面的位置。

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

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

例如："D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif".

⑥超链接标签：

1
<a></a>

标签解读：在HTML标签中，该标签用于定义超链接，作用是从一个页面链接到另一个页面。

链接的语法格式：
1
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

两个属性：

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

  1. 外部链接：例如< a href=”百度">http://www.baidu.com">百度< /a >。

  2. 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如< a href=”index.html”>首页< /a >。

  3. 空链接：如果当时没有确定的链接目标时，< a href=”#”>首页< /a >。

  4. 下载链接：如果href里面的地址是一个文件或者压缩包，会下载这个文件。例如：< a href=”img.zip”> 下载文件< /a>。

  5. 网页元素链接：在网页中的各种元素，如文本、图像、表格、音频、视频等都可以添加超链接。只需将文本、图片等元素写在==文本或图像==的位置即可。

  6. 锚点链接：当我们点击链接，可以快速定位到页面中的某个位置。

    1.在链接文本的href属性中，设置属性值为#名字的形式，如< a href="#two">第二集< /a >
2.找到目标位置标签，里面添加一个id属性 = 刚才的名字，如< h3 id="two">第二集介绍< /h3 >

⑦注释标签和特殊字符：

注释：

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

<!-- 注释语句 -->				快捷键：ctrl + /

特殊字符：

在HTML中，一些特殊的字符很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

描述 字符的代码
空格符 &nbsp ;
小于号 &lt ;
大于号 &gt ;
和号 &amp ;
人民币 &yen ;
版权 &copy ;
注册商标 &reg ;
摄氏度 &deg ;
正负号 &plusmn ;
乘号 &times ;
除号 &divide ;
平方2（上标2） &sup2 ;
平方3（上标3） &sup3 ; 
注意：上表中为了能使代码显现。都在" ; "前，加了一个空格，实际使用中要去掉。

⑧表格标签：

表格的作用：主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性好。

基本语法：

1
2
3
4
5
6
7
<table>
	<tr>
		<td>单元格内的文字</td>
		...
	</tr>
	...
</table>
1.<table> </table>是用于定义表格的标签。
2.<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。
3.<td> </td>用于定义表格中的单元格，必须嵌套在<tr> </tr>标签中。
4.字母td指表格数据(table data)，即数据单元格的内容。

⑨表头单元格标签：

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

基本语法：

1
2
3
4
5
6
7
<table>
	<tr>
		<th>单元格内的文字</th>
		...
	</tr>
	...
</table>
<th>标签表示HTML表格的表头部分。（table head）的缩写。
表格的属性：（不常用，一般在CSS中设置）
注意：下面的属性要写在<table>里面。
属性名 属性值 描述
align left、center、right 规定表格相对周围元素的对齐方式。
border 1或”” 规定表格单元是否拥有边框，默认为””，表示没有边框。
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素。
cellspacing 像素值 规定单元格之间的空白，默认2像素。
width 像素值或百分比 规定表格的宽度。

⑩表格结构标签：

当表格很长时，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

在表格标签中，使用：<thead>标签表示表格的头部区域、<tbody>标签表示表格的主体区域。
1.<thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般位于第一行。
2.<tbody></tbody>:用于定义表格的主体，主要用于放数据本体。

⑪合并单元格：

特殊情况下，可以把多个单元格合并为一个单元格。

合并单元格方式：
  • 跨行合并：rowspan=”合并单元格的个数”
  • 跨列合并：colspan=”合并单元格的个数”
目标单元格：
  • 跨行：最上侧单元格为目标单元格，写合并代码
  • 跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三部曲：
  • 先确定是跨行还是跨列合并。
  • 找到目标单元格。写上合并方式=合并单元格的数量。比如：< td colspan=”2” >< /td>。
  • 删除多余的单元格。

⑫列表标签：

表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加的自由和方便。

无序列表：（重点）

语法格式：

1
2
3
4
5
6
<ul>
	<li>列表项1</li>
	<li>列表项1</li>
	<li>列表项1</li>
	...
</ul>
<ul>标签表示HTML页面中的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

注意：

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

有序列表即为排列有顺序的列表，其各个列表项会按照一定的顺序排列定义。

基础语法：

1
2
3
4
5
6
7

<ol>
	<li>列表项1</li>
	<li>列表项1</li>
	<li>列表项1</li>
	...
</ol>
<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

注意：

1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>和</li>之间相当于一个容器，可以容纳所有元素。
3.有序列表会带有自己的样式，但在实际使用时，我们会使用CSS来设置。
自定义列表：（重点）

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

基础语法：

1
2
3
4
5
6
7

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
</dl>
<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

注意：

1.<dl></dl>里面只能包含<dt>和<dd>。
2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

⑬表单标签：

使用目的：==收集用户信息==
组成：由==表单域、表单控件（也叫表单元素）和提示信息==3个部分构成。

表单域：

==表单域==是一个包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。

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

常用属性：

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

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

< input>表单元素：
<input>标签用于收集用户信息。

1
<input type="属性值" />

在该标签中，包含一个==type==属性，根据不同的type属性值，输入字段拥有很多种方式（可以是文本字段、复选框、按钮、掩码后的文本控件等）。

注意：

<input />标签为单标签。
type属性设置不同的属性值来指定不同的控件类型。

==type属性值如下：==

属性值 描述
button 定义可点击按钮（多数形况下，通过JS启动脚本）。
checkbox 定义复选框。
file 定义输入字段和“浏览”按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。（多选一）
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符， 
除type属性之外，<input>标签还有其他很多属性，其常用属性如下：
属性 属性值 描述
name 由用户定义 定义input的元素名称。
value 由用户定义 规定input元素的值。
checked checked 规定此input元素首次加载时应当被选中。
maxlength 正整数 规定输入字段中的字符的最大长度。

注意：

  1. 如果想要实现性别的单选按钮，在选择了type的属性为==radio==之后，还需要给< input> 标签添加一个name属性，同时这几个性别单选按钮的name属性值要相同，才能实现单选的效果。（同理，==复选框要实现相同的效果也要采用这样的方法==。）
  2. 在增加了value值之后，相应的表单就会具有相应的值，但是只有text文本框才可以显示出来值。
1
<imput type="text" value="请输入用户名" name="username" />
  1. checked属性主要针对单选按钮和复选框，主要作用是一打开页面，就要可以默认选中某个表单元素。格式为==checked=”checked”==。
  2. maxlength是用户可以在表单元素中输入的最大字符数，一般较少使用。

< label>标签：

<label>标签是input元素定义标注（标签）。
<label>标签常用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上。

基础语法：

1
2
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
核心：<label>标签的for属性应当与相关元素的id属性相同。
select下拉表元素：

使用场景：

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

基础语法：

1
2
3
4
5
6
<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>

注意：

1.<select>中至少包含一对<option>。
2.在<option>中定义属性：selected = "selected"时，当前项即为默认选中项。
textarea文本域元素：

使用场景：

当用户输入内容较多时，我们就不能使用文本输入框表单了，此时我们要使用<textarea>标签。
在表单元素中，<textarea>是用于定义多行文本输入的控件。（常见于留言板，评论等）

基本语法：

1
<textarea rows="3" clos="20">文本内容</textarea>

注意：

1.通过<textarea>标签可以轻松的创建多行文本输入框。
2.clos="每行中的字符数"，rows="显示的行数"（我们在实际开发中都是使用CSS来改变大小，不使用这个）。
#HTML
HTML基础入门
http://example.com/2023/09/13/html基础/
作者
BaiZer
发布于
2023年9月13日
许可协议