HTML基本知识

最新推荐文章于 2024-11-14 00:00:11 发布

努力奔跑的蜗牛

最新推荐文章于 2024-11-14 00:00:11 发布

阅读量159

点赞数 2

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

本文链接：https://blog.csdn.net/qq_42079388/article/details/103408038

版权

html 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

HTML基本知识

HTML初始

HTML初始

HTML 是 HyperText Markup language 的简称，中文名是 “超文本标记语言” ，官方解释：网页设计语言，由HTML语言编写的文件是以.html和.htm结尾的（后缀）,运行在浏览器上。

基本组成结构

<!--网页根-->
<html>
   <!---网页头部-->
   <head>
   	<meta charset="UTF-8">
   	<!--网页标题-->
   	<title></title>
   </head>
   <!--正文部分-->
   <body>
   </body>
</html>

文本标记

<b></b>：加粗
<i></i>：倾斜
<u></u>：下划线
<s></s>：删除线
<sup></sup>：上标
<sub></sub>：下标
<br />：换行

加粗
倾斜
下划线
~~删除线~~
文本^上标
文本_下标
换行大家都懂

标题元素

h1~h6 从大到小
特征：
自带换行和加粗
可以调整水平位置

段落和分割线

<p> </p>    自带换行
<br />      换行
<hr />      分割线

字体和超链接

<font> </font>    大小 size（范围1~7） 颜色 color  字体 face 
<a href="跳转的页面的链接" >外显内容</a>
target   跳转方式

转义字符

含义：由<>包裹的文本会当做标签去解析

&nbsp;       一个字符宽度的空格
&ensp;       空格，占据的宽度正好是1/2个中文宽度
&lt;         <
&gt;         >
&copy;       ©
&yen;        ¥

行内元素和块级元素

块级元素

独占一行，元素前后都会换行，都有align属性
示例：p、h1~h6、hr、div

行内标签

不会换行，可以和其他的标签或文本在一行内显示、
示例：b、i、s、sup、sub、span

注意事项（编程规则）
p标签不能嵌套块级元素 W3C 的规范一个段落里不能放另外一个文章

超链接标签

URL:统一资源定位符

三种表现

绝对路径
解释：从文件的最高级目录下开始的完整路径
1.1 访问互联网的资源
1.2 访问本机资源
相对路径
解释：文件所在的位置开始查找，资源文件所在的位置经过的路径
2.1 当前文件的资源在同目录中，直接可以用名称引入
2.2 资源文件在当前目录的子目录中，先进入，在引用
2.3 资源文件在当前目录的父目录中，先返回，再引用
根相对目录
在服务器上面使用，只有服务器端才能看见
表现 / 作为开始

锚点

作用：在网页中的任意位置添加记号，可有任意位置跳转到定位记号
用法：

<!--a标签的一个属性 name
其他标签里面用 id 属性-->
<a href="#db" name="top">点我跳转到底部</a><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<a href="#top" name="db">点我跳转到頂部</a><br />

跑马灯标签

作用：在网页上流动显示（滚动播放）
用法：

<marquee>我卢本伟没有开挂</marquee>

属性：
behavior ：样式
scrollamount : 速度

图片标签

作用：在页面添加一张图片
用法：

<img src="图片位置" width="宽度" height="高度" align="相对于左右文字的位置">

表格标签

表格的作用
按照一定的格摆放数据
表格是由一些被单元格的矩形组成的
按照从左到右，从上到下的顺序排列到一起
创建表格
2.1 定义表格 table
2.2 创建行 tr
2.3 创建单元格 td
表格属性

border :边框
cellspacing：单元格外边距（单元格边框与内容的距离）
cellpadding：单元格外边距（单元格之间的距离）
width：宽度
height：高度
alignt：对齐方式
bgcolor：背景颜色
border color：边框颜色
background：背景图片

1
tr属性（行）
tr没有宽高属性
align：水平对齐方式 (内容)
ralign：垂直对齐方式

td属性
width：每个单元格的宽度
height：每个单元格的高度
align：水平对齐
valign：垂直对其
不规则表格的创建
行合并：colspan
列合并：rowspan