HTML基础

最新推荐文章于 2024-12-16 16:52:23 发布

Dear_Gpk

最新推荐文章于 2024-12-16 16:52:23 发布

阅读量314

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML标签文章标签： HTML

本文链接：https://blog.youkuaiyun.com/Beauty_MD/article/details/89406103

HTML标签专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍HTML的基本语法、常用标签及属性，包括文档结构、文本格式化、列表、图像、链接、表格等内容，适合初学者快速入门。

HTML简单标签入门

HTML的开发工具

Dreamweaver开发工具
word
HBuilder
webstorm
vscode、sublime text 、atom

HTML基本语法认识

所有的基本网页格式都是以.html结尾的文件，这个文件默认是以浏览器打开的，创建这个文件，我们可以使用任何开发工具都行（记事本都可以）

HTML文档结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        网页内容
    </body>
</html>

head指页的头部
body指代网页显示内容区域
meta是设置网页的相关信息，其中charset代表的是当前这个网页的字符集，utf-8代表的是中文
title代表网页的标题
在HTML5网页里面，我们一定要添加头部声明<!DOCTYPE html>,告诉浏览器，我们使用的是HTML5的标准

认识网页基本标签

在HTML网页里面，所有的网页标签基本上都是成双成对的出现，如html,body,title等这些标签，但是也有一些不是成双出现的，如刚刚的<meta>

在网页当中，标签大致可分两类，一种是单标签，一种双标签

一个网页里面，所构成网页的最基本单位就是标签，标签有它固定的格式,每个标签都有它**固有的属性**，如下

所谓的属性就是用于描述的内容

双标签

<标签名 属性名="属性值">内容</标签名>

单标签

<标签名 属性名="属性值"/>

标题标签<hn></hn>

其中的n是从1~6这六种标题，它有一个属性align用于控制标题在网页当中的横向排版
```
<h1 align="right/center/left">这是h1标签</h1>
```

字体标签font

<font face="华文行楷" color="red" size="7">font标签</font>

段落标签p标签
- 段落与段落之间会有明显的空隙
- 段落具备换行的特点
big标签

它在段落标签里面，会增大当前的字体大小

一般情况下，big标签与p标签和h标签结合在一起使用，这会增大一号字体的样式
其它字体描述标签

字体符号	说明
b/strong	字体加粗
u/ins	下划线
i/em/cite	斜体字
del/strike/s	删除字
sup	上标
sub	下标

说明： 以上的几种字体样式，我们可以结合起来一起使用

特殊字体描述

标志符号说明
¥ 人民币
° 小圆圈，用于描述温度
© 版权标记
® 商标的标记
&nbspl 空格
&sup2 平方
&sup3 立方

标志符号	说明
`¥`	人民币
`°`	小圆圈，用于描述温度
`©`	版权标记
`®`	商标的标记
`&nbspl`	空格
`&sup2`	平方
`&sup3`	立方

过度条progress标签

<progress value="40" min="0" max="100"></progress>

颜色进度条标签meter

本地磁盘C：
<meter min="0" max="100" value="75" low="76" high="80" optimum="0"></meter>
本地磁盘D：
<meter min="0" max="100" value="90" low="60" high="80" optimum="0"></meter>

效果图如下

在这里插入图片描述

线条标签 hr
```
<hr color="red" width="50%"  align="right" size="5"/>
```
color：指线条颜色，width：线条宽度,align：线条的排列，size:线条粗细
列表标签

无序列表

无序列表我们使用ul标签来创建，里面的每一项，我们都使用li来进行（重点：ul下面只能有li标签）,所有的内容都应该包裹在li里面

无序列表默认会在每一项的前面添加一个小圆点的符号，我们可以改变这个小圆点的符号为其它的符号，通过type属性，我们就可以更改
```
<ul type="circle">
    <li>
        <p>这是一个文字</p>
    </li>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
```
**说明：**在上面的代码里面，我们就创建了无序列表，并且通过type属性把前面的实习小圆点换成了空心的圆

这一个地方的type我们可以接收三个类型的值

circle:空心的圆

disc:实心的圆

square:实心的方形
有序列表

有序列表，我们通过ol来进行创建，它默认情况之下使用数字来做序号，里面只能够使用li标签，同样，我们也可以通过type来设置它的序号类型，还可以通过start来改变它的起始序号
```
<ol type="1" start="10">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ol>
```

列表元素

有一种列表，它可以实现列表嵌套的效果，这个标签就是dl,里面的标题，我们使用dt来定义，元素项我们使用dd来定义

<dl>
    <dt>男生</dt>
    <dd>吴磊</dd>
    <dd>曾令西</dd>
    <dt>女生</dt>
    <dd>徐强强</dd>
    <dd>梅文化</dd>
</dl>

details标签与ul/ol的结合使用

<details>
    <summary>男生</summary>
    <ul>
        <li>吴灿</li>
        <li>曾令翱</li>
    </ul>
</details>

<details>
    <summary>女生</summary>
    <ol>
        <li>肖卓</li>
        <li>邓羌语</li>
    </ol>
</details>

效果如图

在这里插入图片描述

我们可以通过这一个`details`与ol/ul标签进行结合，做到一个点击以后会显示详细信息的一种效果

图像标签img

如果要在网页当中插入一个图像，那么，我们需要使用img标签
```
<img src="img/05.jpg" width="200px" height="150px" border="5" title="这是一个图片" alt="这是一张彩色的图片" vspace="100px" hspace="50px" />
```
- src用于填这与显示的图片
- width/height用于设置图片在宽度与高度
- border用于设置图片的边框
- title用于设置鼠标放上去以后提示
- alt用于当图片显示不成功的时候，用指定的文字去替代
- vspace代表上下的边距，hspace左右的边距
链接标签

在网页里面，如果我们点击一段文字或图片以后，要打开一个网页，这个时候，我们就需要使用链接标签a标签
```
<a href="http://www.baidu.com" target="_self">百度一下</a>
<a href="http://www.baidu.com" target="_blank">
    <img src="img/06.jpg"/>
</a>
```
- href属性用于链接我们的网页
- target属性用于指定网页的打开样式，它常用的值中_blank代表新窗口打开,_self代表当前窗体打开，framename与iframe结合某一个框架的名子,_parent指的是父级页面去打开，_top指在最顶级的页面去打开

map标签的使用

<img src="img/06.jpg" usemap="map1"/>
<!--现在，我们就把这个map当成是img图像 -->
<!--任何网页元素里面，ID都不可能重复 -->
<map name="map1" id="map1">
    <!--区域 
circle:圆形
poly:多边开
rect:矩形 rectangle
-->
    <!-- 
coords里面的0,0代表的是起始的横坐标与纵坐标
coords里面的127,92代表的是结束的横坐标与纵坐标
现在点击这一块区域以后，我们希望打开一个页面
-->
    <!--<area shape="rect" coords="0,0,127,92" href="http://www.baidu.com" target="_blank"/>-->
    <area shape="rect" coords="630,0,730,100" href="http://www.youku.com" target="_blank" />
    <area shape="circle" coords="365,168,50" href="http://www.qq.com" target="_blank"/>
    <area shape="poly" coords="0,0,0,50,60,60,20,70" href="http://www.baidu.com" target="_blank" />
</map>

用于创建一个地图，这个地图有区域（圆形，矩形，多边形），通过这些区域，我们可以给定一些链接，

这些连接的属性与我们的a标签的属性很相似

iframe标签它是一个比较特殊的标签，它可以在当前的网页里面去嵌入另一个页面
```
<iframe frameborder="0" src="http://www.baidu.com" width="100%" height="500px"></iframe>
```
- src属性用于连接的网页在址
- width/height设置宽度与高度
- frameborder设置是否有边框

table表格标签

<table align="center" border="1" width="500px" cellspacing="0" cellpadding="0">
    <!-- 标题 -->
    <caption>
        <h2 >H1802班级信息表</h2>
    </caption>
    <!-- 
    	col:column 列
    -->
    <colgroup>
        <col bgcolor="red" width="100"/> <!--第一列 -->
        <col bgcolor="blue" width="100"/> <!--第二列 -->
        <col bgcolor="green" width="300"/> <!--第三列 -->
    </colgroup>	
    <!--创建行  tr:table row -->
    <tr>
        <!--单元格td   -->
        <th >姓名</th>
        <th >性别</th>
        <th >爱好</th>
    </tr>
    <tr>
        <td>冯正马</td>
        <td rowspan="2">男</td>
        <td>看书、睡觉</td>
    </tr>
    <tr>
        <td>刘安静</td>

        <td>打游戏</td>
    </tr>
    <tr>
        <td>徐娇情</td>
        <td colspan="2">女、购物</td>
    </tr>
</table>

border设置表格的边框
cellspacing设置单元格之间的间距
cellpadding单元格里面的内容与边框的距离
algin设置单元格里面的左右排列
rowspan设置行的合并
colspan设置列的合并
valign设置单元格里面的上下排列，top/center(middle)/bottom

HTML的全局属性

hidden隐藏

这个全局属性主要就是用来隐藏我们的HTML元素
draggable控制元素拖动的属性

在HTML网页里面，我们的元素默认只有img标签与a标签是可以拖动的，其它的不可以拖动，但是当我们添加了draggable="true" 这个属性以后，我们就可以拖动了
contenteditable内容可编辑属性

一个元素如果添加了这一个属性以后，就可以直接在浏览器上面编辑这一个元素的内容了

引出我们input或其它标签，这些标签我们叫表单标签