二、HTML基本标签（上）

最新推荐文章于 2024-07-14 12:57:13 发布

HJHO

最新推荐文章于 2024-07-14 12:57:13 发布

阅读量105

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_49576031/article/details/120240935

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

👉 日励一句

生活中没有弱者，只有不愿努力的人。

看前须知

这部分内容对于已经新手和已经忘记的人有一定的帮助，如果坚持看下去说不定有一定的意想不到的收获。

1. HTML基本结构

<!DOCTYPE html>
<html>
    <head>
        <title>style标记</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>测试标记</h1>
    </body>
</html>

html标签分为两类标签，一部分写在<head></head>中（大多数用户看不到），一部分写在<body></body>中（用户看得到）。

2.<head>标签内的一些基本标记

<title></title> 设置当前网页的标题

图解👇

<meta /> 有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

**<meta>常用详解**
简例	作用
<meta charset="utf-8">	置当前网页的字符编码
<meta name="keywords" content="HTML,CSS">	设为搜索引擎定义关键词搜索引擎会通过关键字机行有序的搜索用户无法查看
<meta name="description" content="html网页">	为网页定义描述内容
<meta http-equiv="refresh" content="5">	设置当前网页自动刷新
<metahttpequiv="refresh" content="5,https://www.baidu.com/">	设置当前在间隔时间以后自动跳转到其他页面（时间为秒）重定向到其他页面
<meta name="author" content="张三">	设置当前网页的作者信息

<style></style>---设置当前网页的css的内部样式块

效果图👇

<link></link>导入外部样式文件【.css】到当前html文件中

<link>标签属性

rel="stylesheet"	定义了一个外部链接样式表（没有特殊的意思）w3c标准
href="路径"	对应的外部样式文件的地址【绝对地址】【相对地址】【网络地址】三种地址的详解在扩展中

<script></script>---设置当前网页中需要执行的javascript脚本语言

<script>标签属性

type="text/javascript"	定义了一个外部脚本（没有特殊的意思）w3c标准
src="路径"	对应的外部脚本文件的地址【绝对地址】【相对地址】【网络地址】地址=>js文件

3.<body>标签内的一些基本标记

<h1> ~ <h6> 设置网页内容的标题

<h1> ~ <h6>标签的前后会自动换行（块元素）(双标签)

<h1>最大标题，<h6>最小标题

<h1>标签</h6>图解👇

<hr> 设置一条水平的分割线

**<hr/>标签属性**
color	设置分割线的颜色
width	设置分割线的长短
size	设置分割线的粗细
align	设置分割线的水平对齐方式【left center right】

<p> 在html文件中设置一段文字【段落】的标记

<p>标签它前后会自动换行（块元素）(双标签)

<br>---设置内容回车换行

<p>标签它前后会自动换行(单标签)

在html文件中使用键盘上的回车键换行是没有效果，所以在html文件想要内容换行使用

HTML格式化标签

对特定的文本进行格式化

<b>文本</b>	定义粗体文本
<em>文本</em>	定义字体倾斜
<i>文本</i>	定义斜体字
<small>文本</small>	定义小号字
<strong>文本</strong>	定义加粗字体
<sup>2</sup>	定义上飞
<sub>1</sub>	定义下飞
<ins>文本</ins>	字体下面的下划线
<del>文本</del>	字体上面的删除线

图例👇

<img>---单标记,设置在html文件中显示图片

<img>标签属性

src=”url” 图片的路径
width/height 设置图片宽度/高度
alt 设置图片的文字提示【当图片无法显示是才会显示】

图解👇

<a> 超链接（链接）

<a><a/>标签的属性

href	设置链接地址
target	被打开的内容何处显示【_blank[新窗口] _self[覆盖当前窗口] ifram的name属性值】
id	设置超链接的编号【可以连接到当前网页中指定位置】

图解👇

单击a标签后跳转 ↓

列表

<table> ：        表示表格

<thead> ：表示表头

<tbody>：        表示表格的身体

<tr>：表格中的行

<td>：              行中的列

注意:表格中没有内容的时候表格不显示

<table>标签的属性

border                设置表格的边框
width / height     设置表格的宽度和高度
cellpadding        设置单元格中的内边距[单元格中的内容距离4边边框的距离]
cellspacing        增加单元格之间的距离。
colspan 设置表格跨列【左右合并单元格】
rowspan 设置表格跨行【上下合并单元格】

代码👇

<body>
  <h3 style="text-align: center;">个人简历</h3>
  <table border="1" cellspacing="0" style="height: 700px; margin: auto;"  cellpadding="10px">
    <tbody>
      <tr>
        <td>姓名</td><td>zhangsan</td><td>性别</td><td></td><td>出生年月</td><td>2020年5月7日</td>
        <td rowspan="4"><img width="150px" height="150px" src="./images/avatar04.png" alt="个人图像"></td>
      </tr>
      <tr><td>籍贯</td><td></td><td>民族</td><td></td><td>身体状况</td><td></td></tr>
      <tr><td>政治面貌</td><td></td><td>身高</td><td>164cm</td><td>外语程度</td><td> </td></tr>
      <tr><td>所在学院</td><td></td><td>学历</td><td></td><td>曾任职务</td><td> </td ></tr>
      <tr><td>毕业时间</td><td colspan="2"></td><td colspan="2">练习电话</td><td colspan="2"></td></tr>
      <tr><td rowspan="2">家庭住址</td><td rowspan="2" colspan="2"></td><td colspan="2">邮政编码</td><td colspan="2"></td></tr>
      <tr></td><td colspan="2">邮箱地址</td><td colspan="2"></td></tr>
      <tr><td>主修课程</td><td colspan="6"></td></tr>
      <tr><td>个人简历</td><td colspan="6"></td></tr>
      <tr style="height: 130px;"><td rowspan="3">个人特长</td><td rowspan="3" colspan="6" ></td></tr>
    </tbody>
  </table>
</body>

事例👇

HTML 列表 <ul><ol><dl>

1. ol---表示有序列表

li---表示有序列表中的每一个项目

ol上添加type属性设置修改有序列表前面的标号【a A i I 1】

ol上添加start属性设置修改有序列表前面的标号的开始值

2. ul---表示无序列表

li---表示无序列表中的每一个项目

ol上添加type属性设置修改有序列表前面的标号【disc/circle/square】

3.dl---表示自定列表

dt---表示自定列表主项目

dd---表示自定列表中主项目里的子项目

图解👇

扩展内容

H5的扩展Meta(可以先不看)

width : 可视区域的宽度，值可为数字或关键词device-width

height : 同width

intial-scale : 页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放，no 禁止缩放

路径的分类

绝对路径 : 从操作系统的指定盘中的目录开始查找图片资源所形成的路径。【不推荐】

<img src="F:\20210907\HTML基础\20210911HTML基础(2)\code\imgs\avatar3.png">

<img src="F:/20210907/HTML基础/20210911HTML基础(2)/code/imgs/avatar2.png"><br>绝

对路径的缺点:

1.如果图片保存目录太深，图片的操作路径就会很长

2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。

相对路径：从当前网页开始查找图片资源所形成的路径【推荐】

1.图片与当前网页在同一个目录下【src=”图片名称”】

2.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】

3.图片保存在当前网页所在目录的父文件夹中[../---上一层]

网络地址 src=”url”

<img src="https://img0.baidu.com/it/u=2809737200,31955359&f26&fmt=auto&gp=0.jpg" >

无奈源于不够强大

拾荒人⚪

HJHO

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二、HTML基本标签（上）

????日励一句生活中没有弱者，只有不愿努力的人。看前须知这部分内容对于已经新手和已经忘记的人有一定的帮助，如果坚持看下去说不定有一定的意想不到的收获。1. HTML基本结构<!DOCTYPEhtml><html><head><title>style标记</title><metacharset="utf-8"></head>...
复制链接

扫一扫