HTML基础_span标签内添加a标签-CSDN博客

本文链接：https://blog.csdn.net/crystalheting/article/details/103540585

HTML基础讲解

1、HTML文件基本结构

<!doctype html>  ---->  文档声明（告诉浏览器我的文件类型和版本）
<html>  ---->  网页所有内容
    <head>  ---->  定义一些文档属性（在网页中不显示）
         <meta charset="UTF-8">
         <title>浏览器窗口名称</title>
    </head>
    <body>  ---->  网页中显示的内容
    </body>
</html>
注释方法：<!--注释内容-->
不会显示在网页中，给程序员自己看的

2、HTML元素

HTML文档是由HTML元素定义的。元素指的是从开始标签到结束标签的全部代码，开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
例如：

开始标签           元素内容                   结束标签 
  <p>          this is my web page             </p>
  而形如<br />换行标签这样的标签叫空标签，也就是空元素，因为它里面没有元素内容。空元素在开始标签中以"/"进行关闭,不加"/"也能正常使用。
  <br />标签与其他自带换行功能标签的区别在于行间距不同，换行标签行间距相对小。

大多数HTML元素可拥有属性，也可以嵌套使用。
如：

<p><a href="https://www.baidu.com/">百度一下，你就知道</a></p>

3、HTML基础标签

<head>、<body>

4、HTML标题

标题标签：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
自带样式：上下有间距；独占一行；字体加粗；字体大小从h1到h6逐渐变小

示例：

<!DOCTYPE html>
<html lang="en"><!--语言为英文网站-->
<head>
    <meta charset="UTF-8"><!--字符编码格式为utf-8-->
    <title>HTML基础</title>
</head>
<body>
HTML基础<!--正常-->
<h1>HTML基础</h1><!--h1-->
<h2>HTML基础</h2><!--h2-->
<h3>HTML基础</h3><!--h3-->
<h4>HTML基础</h4><!--h4-->
<h5>HTML基础</h5><!--h5-->
<h6>HTML基础</h6><!--h6-->
</body>
</html>

在这里插入图片描述

5、HTML段落

段落标签：<p>标签   
在网页中显示文本文字；
自带样式：上下有间距；独占一行；

6、HTML属性

标签可以拥有属性为元素提供更多的信息。
属性以键值对的形式存在。
常用标签属性：

 <h1>:align对齐方式
 <body>:bgcolor背景颜色
 <a>:target规定在何处打开链接

通用属性：
class：规定元素的类名
id：规定元素唯一ID
style：规定元素的样式
title：规定元素的额外信息

7、HTML链接

HTML单独有一博客，在这只简单提及

超链接标签：<a>      
点击网页中显示内容可以跳转到指定的网页或者位置
自带样式：下划线；点击前蓝色；点击时红色；点击后紫色；
写法：<标签 属性名称=“属性的值”>网页显示内容</标签>
如：<a href="http://www.baidu.com">百度一下</a>
其中：
href属性：跳转地址属性；
取值：
1、网络地址：协议+域名      跳转到网页
2、 # ： 返回当前页面最顶部
锚点功能：需要在想跳转到的位置上写一个标签，并且给这个标签设置一个id属性值，然后利用a标签的href属性值设置为#id值；
3、本地地址：最高盘符+目录结构+/文件名称；

6、常用标签

双标签：

标签名称	写法
下划线	u
加粗	b
大号文本	big
小号文本	small
强调文本	em
删除线	s
上标	sup
下标	sub
加重	strong
插入字	ins
斜体	i

单标签：

换行标签    <br>或<br/>
水平线标签  <hr>或<hr/>
属性：width：长短，取值数字或百分比；
     align：水平位置，取值left/center/right；
     size：粗细，取值数字；
     color：颜色，取值英文单词；

示例：

<!DOCTYPE html>
<html lang="en"><!--语言为英文网站-->
<head>
    <meta charset="UTF-8"><!--字符编码格式为utf-8-->
    <title>HTML基础</title>
</head>
<body>
HTML基础<!--正常-->
<hr width="100px" size="2px" align="left" color="red"><!--水平线标签-->
<u>HTML基础</u><!--下划线--><br/><br/><!--换行标签-->
<b>HTML基础</b><!--加粗--><br/><br/>
<big>HTML基础</big><!--大号文本--><br/><br/>
<small>HTML基础</small><!--h小号文本--><br/><br/>
<em>HTML基础</em><!--强调文本--><br/><br/>
<sub>HTML</sub>基础<!--下标--><br/><br/>
<sup>HTML</sup>基础<!--上标--><br/><br/>
<strong>HTML基础</strong><!--加重--><br/><br/>
<ins>HTML基础</ins><!--插入字--><br/><br/>
<i>HTML基础</i><!--斜体-->
</body>
</html>

在这里插入图片描述

7、HTML图像

图片标签：单标签      <img>或者<img />

1、alt属性：
该属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。
2、width 属性，height 属性：
图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比。若width属性和height属性只设置了一个，另一个没有设置。这时，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。
3、src属性：
该属性用来说明插入图片的路径。

绝对路径：最高盘符+目录结构+/文件名称
相对路径：要插入网页的图片相对于HTML文件的路径
- 同级目录下：文件名称
- 子级目录下：文件夹名称/文件名称
- 父级目录下：…/文件名称
  示例：

<img src="D:/HTML.png"width="30%"height="30%">

在这里插入图片描述

8、HTML音频

语法：
① 链接单个音频文件:

  <audio controls>
 <source src=“赵雷 - 鼓楼.mp3" type="audio/mpeg">
  </audio>

② 链接多个音频文件 source：

<audio controls>
      <source src="天下无双.mp3" type="audio/mpeg">
      <source src="第五元素.mp3" type="audio/mpeg">
</audio>

audio属性：
autoplay:false 是否自动播放
controls:flase 是否显示播放控件
loop:flase 是否循环播放
muted:false 是否静音

8、HTML列表

列表标签：无序列表和有序列表
列表项：<li></li>
1、无序列表 <ul></ul>   unorder list
type属性：列表标识的类型
取值：disc 实心圆点（默认）
     circle 空心圆
     square 实心矩形
2、有序列表 <ol></ol>    order list
type属性：列表标识的类型
取值：1        数字（默认）
      a 或 A   字母
      i 或 I   罗马数字
start属性：起始位置
取值：数字  表示从第几个位置开始

9、HTML表格

表格：table标签
table表格>tr行>td单元格
table标签属性：border边框；cellspacing 单元格之间的距离；cellpadding 单元格和内容之间距离；
td单元格标签属性：colspan 跨列合并；rowspan 跨行合并；
align 内容水平位置：可取值left/center/right
合并单元格三个步骤：
1.在最前面的单元格标签中写属性；
2.跨行rowspan跨列colspan属性；属性值为合并单元格的个数；
3.将被合并的单元格删除；

10、HTML分区

分区标签：div标签和span标签
div：块级分区标签；span：行内分区标签；
块级元素：div ol ul li p h1~h6；独占一行；
行内元素：span u i s b sub sup a;不独占一行；

11、HTML表单

表单：<form></form>收集用户信息提交给服务器
表单控件：在表单中提供不同的功能；
1.input标签：单标签,<input>或者<input />
   type属性：取值 text 文本框；password 密码框；
                    submit 提交按钮；button 普通按钮；reset 重置按钮；
                    radio 单选框；checkbox 复选框；
2.select和option标签：下拉选项框
3.textarea标签：双标签，文本域
   cols属性：显示多少列，如果超出会自动换行；
   rows属性：显示多少行，如果超出会出现滚动条；
4.数据提交给服务器
   1.在form表单标签中action和method属性
      action属性：取值发送服务器的链接
      method属性：发送的方式，取值get和post
   2.在表单控件中name属性和value属性
      name属性：表单控件名称，发送数据的名称；
      value属性：表单控件的值，发送数据的值；

12、HTML特殊字符

1.当我们想在网页中显示尖括号时，浏览器认为尖括号是标签，它不显示，就需要使用特殊字符：
&lt;    左尖括号 < 
&gt;    右尖括号 > 
2.浏览器解析执行时会将多个空格符只显示一个空格，如果我们需要显示多个空格符，使用特殊字符：
&nbsp;   空格
&copy;   版权符号
&reg;    商标符号

相关链接：
HTML颜色
 HTML字体
 HTML特殊字符编码