HTML基础起步

最新推荐文章于 2024-08-08 22:07:51 发布

不起眼的皮皮虾

最新推荐文章于 2024-08-08 22:07:51 发布

阅读量115

点赞数

分类专栏： HTML基础文章标签： html

本文链接：https://blog.csdn.net/qq_36801250/article/details/103701281

版权

HTML基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>
```

字体标签font

<font face="华文行楷" color="red" size="7">我爱北京天安门</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>

效果图如下

效果图1

线条标签 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>
```
- 列表元素

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

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

<details>
    <summary>女生</summary>
    <ol>
        <li>吴小娇</li>
        <li>梅娇情</li>
    </ol>
</details>

效果如图

效果图2

效果图3

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

不起眼的皮皮虾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础起步

HTML基础HTML的开发工具Dreamweaver开发工具wordHBuilderwebstormvscode、sublime text 、atomHTML基本语法认识所有的基本网页格式都是以.html结尾的文件，这个文件默认是以浏览器打开的，创建这个文件，我们可以使用任何开发工具都行（记事本都可以）HTML文档结构<!DOCTYPE html><...
复制链接

扫一扫

专栏目录