HTML基础总结

最新推荐文章于 2024-06-07 18:11:32 发布

PanCc220

最新推荐文章于 2024-06-07 18:11:32 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/qq_61324100/article/details/124160017

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前言

1.什么是网页?

网页是图片、链接、文字、声音、视频等元素组成，其实就是一个html文件。
网页生成制作：前端人员书写html文件，然后打开网页，就能看到网页。

2.常用浏览器有哪些？

IE、firefox、chrome、safari、opera。
浏览器内核(渲染引擎):负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

3.什么是web标准

有了web标准，在不同浏览器下打开页面都能很好的看到一样的效果。
web标准主要包括结构，表现，行为三个方面。
结构:结构用于对网页元素进行整理和分类，主要是HTML。
表现:表现用于设置网页元素的版式、颜色、大小等外观，主要是CSS。
行为：行为是指网页模型的定义及交互编写，主要javascript。

HTML简介

1.什么是HTML

超文本标记语言，用来制作网页的一门语言。有标签的组成，图片标签，链接标签，视频标签等。

2.HTML的作用

HTML用于对网页元素进行整理和分类。

一.HTML的基本结构

HTML的基本结构的组成主要有<html>,<head>,<title>,<body>标签。
<html>表示根标签,<head>表示文档的头部,<title>是文档的标题,<body>是文档的主体。
<title>标签包含在<head>标签中,<body>标签主要是写网页的内容。
<!DOCTYPE html> 文档类型声明标签，告诉浏览器此页面采取html5版本来显示页面。
<html lang="en"> 告诉浏览器或者搜索引擎这是一个英文网站。

<meta charset="UTF-8"> 采取UTF-8字符集编码。

<!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></title>
</head>

<body></body>

</html>

二.HTML的常用标签

1.标题标签

标题标签一共有六级可以选择,<h1>~<h6>。
独占一行显示,且文字会加粗,字号也会变大。

由大到小逐级递减。

<body>
    标题标签
    <h1>标题一共六级选,</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减,</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后,</h5>
    <h6>具体效果刷新见。</h6>
                            ---PanCc
    
</body>

在这里插入图片描述

2.段落标签

段落标签是用<p>来表示。
文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间是保有空隙的。

独占一行显示

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

在这里插入图片描述

3.换行标签

换行标签是用<br>来表示。
<br>标签是单标签。
<br>标签只是简单的开始新的一行，和段落不一样，段落之间是有间距的。
```
<body>
  东临碣石,以观沧海。<br>水何澹澹,山岛竦峙。
</body>
```

在这里插入图片描述

4.文本格式化标签

在网页中，设置文字粗体，斜体，下划线等效果，这时候就用到文本格式化标签。

加粗<strong></strong>或者<b></b>
倾斜<em></em>或者<i></i>
删除线<del></del>或者<s></s>

下划线<ins></ins>或者<u></u>

    <strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>

在这里插入图片描述

5.盒子标签

盒子标签分别有<div>盒子和<span>盒子。
盒子标签中<div>和<span>是没有语意的，它们就是一个盒子，用来装内容的
盒子标签<div>独占一行，可以理解为是一个大盒子。

盒子标签<span>一行可以有多个，可以理解为是一个小盒子。

<body>
    <div>我是一个div标签，我独占一行</div>
    <div>我是一个div标签，我也独占一行</div>
    <div>我还是一个div标签，我还是只独占一行</div>
    
    <span>我是一个span标签</span>
    <span>我也是一个span标签</span>
    <span>我们span一行中可以有多个</span> 
</body>

在这里插入图片描述

6.图像标签

图像标签用<img src="" />来表示。
图像标签是一个单标签。
图像标签可以有src | alt | title | width | height | border等属性。
其中，src是必须要有的属性，用来指定图像文件的路径和文件名。
图像标签中,要么设置有宽度,要么设置高度就ok了，如果这两个属性同时设置,容易使图像失帧。

各属性的用法:

src: 图像的url (指定图像文件的路径和文件名)

alt: 文本 (替换文本–图像显示不出来时用文字替换)

title: 文本提示文本–鼠标经过图像提示的文字()

width: 像素 (设置图像的宽度)

height: 像素 (设置图像的高度)

border: 像素 (设置图像的边框粗细)
```
<img src="./images/nalatuo.jpg" alt="鸣人" title="鸣人VS佐助" height="200" border="15"/>
```
图像标签可以拥有多个属性，必须写在标签名的后面。

属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

属性采取键值对的格式，即key=“value” 属性=“属性值”。

7.超链接标签

超链接标签分别有外部链接,内部链接,空链接,下载链接,网页元素链接。
添加了超链接的标签,可以访问到指定的链接。
超链接标签是用<a>表示。
超链接中必须要有href属性,表示要跳转到的链接地址。
- <a>标签中除了src必写的属性外,还有target属性
- target: _self (默认值) | _blank,表示打开方式。
- _self是默认值,表示在当前窗口中打开。
- _blank表示新建窗口打开。
```
 <a href="http://www.baidu.com" target="_self">百度网址</a>
 <a href="http://www.bilibili.com" target="_blank">b站</a>
```

1.外部链接

向外部访问的链接就是外部链接，如腾讯，百度等等。

<a href="http://www.qq.com">腾讯网址</a>

2.内部链接

在网站内部页面之间的相互链接叫内部链接,如我们自己内部新建的.html文件

<a href="08_图像标签.html" target="_self">我的页面</a>

3.空链接

空链接是指该链接暂时是空的链接，也就是无法跳转访问到另一个地址,用#表示。

空链接的应用场景主要是我们尚未开发完成某页面，页面地址去向未知。

<a href="#">我的页面</a>

4.下载链接

下载链接中，href里边的地址是一个文件(.exe)或者压缩包(.zip)，会直接下载文件。

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

5.网页元素链接

网页元素链接是指图片、表格，音频、视频这些元素可以添加超链接。

<!-- 在图片上添加上百度的链接 -->
<a href="http://www.baidu.com"><img src="images/nalatuo.jpg"/></a>

6.锚点链接

锚点链接是指在当前页面中，自由的跳转到某个位置。

锚点链接的应用场景主要是当前页面内容太多,我们需要快速的跳转到某个位置而使用。

使用方式:在href属性中，设置属性值为 #属性名的形式，如:

<a href="#one">影视作品</a>

找到目录位置标签，里面添加一个id属性=刚才设置的值 如:

<h4 id="one"></h4>

这样就可以在当前页面中跳转到想要到达的位置啦。

三.HTML中的注释和特殊字符

在HTML中,使用来作为注释,注释的内容不会出现在页面中。

<h1>人物</h1>  <!--这是一个标题标签-->

在HTML中,常见的特殊字符有 、<、>、&amp;等。

&nbsp用来表示一个空格符。

<!-- 表示我    爱    你-->
我&nbsp;&nbsp;&nbsp;&nbsp;爱&nbsp;&nbsp;&nbsp;&nbsp;你

&lt用来表示一个 < 符号。
&gt用来表示一个 > 符号。
```

&lt;p&gt;
```
&amp 用来表示一个 & 符号。
```

&amp;
```

四.HTML中的表格标签

表格最主要的作用并不是布局,而是用来展示数据。
表格的基本标签有<table>、<tr>、<td>。
<table>表示表格,<tr>表示行,<td>表示单元格。
单元格中可以加任何元素内容:文字，图片等。
表格中只有行的概念。

1.表格中的基本语法

<tbale>
	<tr>
		<td></td>
	</tr>
</table>

<table>表示表格,包含<tr>和<td>标签。
<tr>表示行,包含着<td>标签

2.使用表格标签

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500">
        <!-- 第一行 -->
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>赵丽颖</td>
            <td>女</td>
            <td>34</td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>周杰伦</td>
            <td>男</td>
            <td>40</td>
        </tr>

在这里插入图片描述

这是一个三行三列的表格。
表格标签这部分属性我们实际开发不常用，后面通过CSS来设置。

3.表格属性

<table>中含有的属性有align、border、cellpadding，cellspacing，width等。
align: left | center | right (文本向左 | 居中 | 向右对齐)
boder: 像素 (边框默认为空)
cellpadding: 像素 (内距-内容和单元格之间的距离,默认是1像素)
cellspacing: 像素 (外距-单元格个单元格之间的距离,默认是1像素)
width: 像素 (表格的宽度)
height: 像素 (表格的高度)

表格标签这部分属性我们实际开发不常用，后面都是通过CSS来设置

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500"> 
</table>

4.表格结构标签

在使用表格时，表格有可能会很长,为了更好的表示表格的语义，可以将表格分割成表头部分和表格主体两大部分。
表格的头部区域<thead>
表格的主体区域<tbody>

头部区域<thead>必须包含<tr>

<tbale>
    <!--thead  表格的头部区域-->
	<thead>
		<tr>
			<th></th>
		</tr>
	</thead>
    <!--tbody 表格的主体区域-->
	<tbody>
		<tr>
			<td></td>
		</tr>
	</tbody>
</table>

5.合并单元格

合并单元格中有跨行合并rowspan和跨列合并colspan。
rowspan: "合并行数"

colspan: "合并列数"

合并单元格三部曲:

1.先确定是跨行合并还是跨列合并。

2.确定目标单元格,写上合并方式。

3.删除多余单元格

<table border="1" height="300" width="500" cellspacing="0">
        <tr>
            <td colspan="3"></td>   
            <td></td>                                  
        </tr>

        <tr>
            <td></td>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    <table/>

在这里插入图片描述

6.列表标签

列表是用来布局的,使用列表标签后会使页面更加整齐，整洁，有序。
使用列表作为布局更加方便自由。
列表标签中分别有无序列表，有序列表和自定义列表。

1.无序列表

无序列表用<ul><li>来表示:

我喜欢吃的美食:
    <ul>
        <li>螺蛳粉</li>
        <li>臭豆腐</li>
        <li>小龙虾</li>
        <li>烤鱼</li>
        <li>鸭脚煲</li>
    </ul>

在这里插入图片描述

<ul>里边只可以有<li>，不允许有其他标签。<li>中可以有其他标签。
无顺序级别之分，是并列的。
<li>与</li>之间相当于一个容器，可以容纳所有元素

2.有序列表

有序列表使用<ol><li>来表示：

<h4>世界领土排行榜:</h4>
<ol>                           
        <li>俄罗斯</li>
        <li>加拿大</li>
        <li>中国</li>
        <li>美国</li>
        <li>巴西</li>
</ol>

在这里插入图片描述

<ol>里边只可以有<li>，不允许有其他标签。<li>中可以有其他标签。
有序列表时有顺序之分的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。

3.自定义列表

自定义列表使用<dl><dt><dd>来表示:

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

在这里插入图片描述

<dl>里边只能有<dt>和<dd>，<dt>和<dd>是并列关系。
<dd>是围绕着<dt>，对其加以解释说明。
<dt>和<dd>个数是没有限制的

7.表单标签

使用表单的目的就是为了收集用户的信息,例如注册页面。

表单的组成:表单域，表单元素，提示信息。

1.表单域

表单域就是表单的区域,用<form>标签来表示:

<form action="index.com" method="get" name="name1">
</form>

在写表单元素之前，要把他们写入表单域中。
表单域中的属性: action,method,name等。
action: url地址 (要访问的链接地址)
method: get | post (请求方式)
name: name (name属性值)

2.表单元素

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

表单元素有输入表单元素<input>,下拉表单元素<select>,文本域元素<textarea>。

1.input表单元素：

<input type="">

input表单元素是单标签。
type属性是必须要有的属性。
type属性值有text、password 、radio 、checkbox、 button 、 file 、 hidden、 image、 reset 、submit等。
text (定义单行的输入字段，用户可在其中输入文本–默认20字符)
password (定义密码字段)
radio (定义单选按钮)
checkbox (定义复选框)
button (定义可点击按钮)
file (定义输入字段和"浏览"按钮，供文件上传)
hidden (定义隐藏的输入字段)
image (定义图像形式的提交按钮)
reset (定义重置按钮–清除表单中的所有数据)
submit (定义提交按钮–提交按钮会把表单数据发送到服务器)

input表单元素中,除了type属性外，还有name,value,checked,maxlength属性。

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

在这里插入图片描述

name属性是每个表单元素独一无二的名字单选和复选按钮他们应该有相同的name属性值。
name和value属性是每个表单元素都有的属性值，主要给后台人员使用的。
input除了有type属性之外，还应该要有name和value。
checked属性主要针对单选按钮和复选按钮，主要作用是打开页面，就要可以默认选中某个表单元素。
maxlength是用户可以在表单元素输入最大字符数,一般较少使用

<label>标签的基本使用:

<label for="name">用户名:</label><input type="text" id="name">

在这里插入图片描述

<label>和<input>一起使用：当我们点击了<label>里面的文字，鼠标就会定到对应的表单元素里边。
<label>标签中for属性的属性值对应着<input>标签id属性的属性值,表示id进行绑定。
增加用户的体验

2.select表单元素:

当有很多的选项的时候，使用下拉标签可以节省页面很多的空间。

<form>
        籍贯:
        <select>
            <option>江苏</option>
            <option selected="selected">广西壮族自治区</option>
            <option>云南</option>
            <option>湖南</option>
            <option>湖北</option>
            <option>内蒙古</option>
            <option>黑龙江</option>
            <option>新疆维吾尔族自治区</option>
            <option>广东</option>
            <option>山西</option>
        </select>
    </form>

在这里插入图片描述

要默认选项的话使用在<option>中使用selected=" "。
<select>中至少包含一对<option>

3.textarea表单元素:

文本域可以输入很多文本的区域,例如留言板,评论等。

<form>
        网站介绍<textarea cols="20" rows="5">在此输入您的网站简介</textarea>
</form>

在这里插入图片描述

PanCc220

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML基础总结

文章目录

前言

1.什么是网页?

2.常用浏览器有哪些？

3.什么是web标准

HTML简介

一.HTML的基本结构

二.HTML的常用标签

1.标题标签

2.段落标签

3.换行标签

4.文本格式化标签

5.盒子标签

6.图像标签

7.超链接标签

1.外部链接

2.内部链接

3.空链接

4.下载链接

5.网页元素链接

6.锚点链接

三.HTML中的注释和特殊字符

四.HTML中的表格标签

1.表格中的基本语法

2.使用表格标签

3.表格属性

4.表格结构标签

5.合并单元格

6.列表标签

1.无序列表

2.有序列表

3.自定义列表

7.表单标签

1.表单域

2.表单元素

1.input表单元素：

2.select表单元素:

3.textarea表单元素: