html5

最新推荐文章于 2023-03-16 17:01:16 发布

东皇太乙

最新推荐文章于 2023-03-16 17:01:16 发布

阅读量261

点赞数

分类专栏：后端学习文章标签： html

本文链接：https://blog.csdn.net/weixin_44293582/article/details/107818079

版权

后端学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章目录

html

html

快速入门

语法
1. html文档后缀名，.html 或者 .htm
2. 标签为
  1. 围堵标签（双标签）：有开始标签和结束标签。如<html> </html>
  2. 自闭合标签（单标签）：开始标签和结束标签在一起。如<br/>
3. 标签可以嵌套：
  - 需要正确嵌套，不能你中有我，我中有你
    错误：<a><b></b></a>
    正确：<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来
5. html的标签不区分大小写，但是建议使用小写

<html>
    <head>
        <tittle>HelloWorld</tittle>
    </head>
    <body>
       <font color='green'>HelloWorld!</font>
    </body>
</html>

标签学习

文件标签

**文件标签：**构成html最基本的标签

html：html文档的根标签。
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签。
body：体标签
<!DOCTYPE html>:html5中定义该文档是html文档

文本标签

注释：
<h1> to <h6>：标题标签
<p> ：段落标签
<br>:换行标签
<hr>：显示一条水平线
- 属性：
  - color：颜色
  - width：宽度
  - size：高度
  - align：对其方式
    - center：居中
    - left：左对齐
    - right：右对齐
<b>：字体加粗
<i>：字体斜体
<font>：字体标签
- 属性：
  - color：颜色
  - size：大小
  - face：字体
<center>：文本居中
属性定义：
- color：
  1. 英文单词：red，green，blue
  2. rgb（值1，值2，值3）：值的范围：0~255 如 rgb（0，0，255）
  3. #值1值2值3 ：值得范围：00~FF之间。如：#FF00FF
- width：
  1. 数值：width=‘20’，数值的单位，默认是px（像素）
  2. 数值%:占比相对于父元素的比例

<!-- 案例实操 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>公司简介</h1>
<hr color="gold">
<p><font>就这种地方的房价5w一平，配套极其拉胯，要啥没啥，孩子上学去哪上？仓前？五常？</font></p>
<p>买5w一平的房子，就去这种学校上学？去哪逛商场？西城广场？这地方的配套资源，<b><i>2w不能再多了，硬生生被阿里的大佬们炒到了5w。</i></b></p>
<p>反正杭州就一个字，卷，杭州互联网行业，就是河北高考衡中模式的职场版。</p>
<hr color="gold">
<center><font color="gray" size="2">作者&copy;：扩散性百万涩面包<br>
    链接：https://www.zhihu.com/question/411668408/answer/1380734439<br>
    来源：知乎<br>
    著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</font><br></center>
</body>
</html>

图片标签

<img/>:
- 属性：
  - src ：指定图片的路径
    一般使用相对路径
    - 以.开头的路径
      - ./：代表当前目录不写默认为当前目录
      - …/：代表上一级目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PhotoLabel</title>
</head>
<body>
<img src="LeetCode.assets/image-20200802195207340.png" align="left" alt="LeetCode" width="300" heigth="300"/>
</body>
</html>

列表标签

有序列表

ol ： orderlist 双标签
li ：用来标识列表项

无序列表

ul：unorderlist 双标签
li：用来表示列表项

<!-- 列表标签联系 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ListLabel</title>
</head>
<body>
<!--    有序列表    -->
    早上起床做的事情：
    <ol type="I">
        <li>睁开眼睛
        <li>洗漱
        <li>上厕所
        <li>喝水
    </ol>
<!--    无序列表    -->
    早上起床做的事情：
    <ul >
    <li>睁开眼睛
    <li>洗漱
    <li>上厕所
    <li>喝水
    </ul>
</body>
</html>

连接标签

<a></a>:定义一个超链接
- 属性：href，指定访问资源的URL（统一资源定位符），只有设置了href的值才能让该连接标签生效。
- 属性：target，指定打开资源的方式。target下有4个可选择项，分别是：_blank _parent _self _top 除了_blank之外其他都是在原页面打开新网页
  - _self：默认值，在当前页面打开
  - _blank：在空白页面打开，即新页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ConnectionLabel</title>
</head>
<body>
    <a href="https://fanyi.baidu.com/" target="_parent">百度翻译</a>
    <br>
    <a href="https://fanyi.baidu.com/" target="_blank">百度翻译</a>
    <br>
    <a href="https://fanyi.baidu.com/" target="_self">百度翻译</a>
    <br>
    <a href="https://fanyi.baidu.com/" target="_top">百度翻译</a>
</body>
</html>

div和span

div：每一对div占满一整行。块级标签
span：文本信息在一行展示，行内标签，内联标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BlockLabel</title>
</head>
<body>
    <span>HelloWorld</span>
    <span>HelloWorld!</span>
    <hr>
    <div>HelloWorld</div>
    <div>HelloWorld!</div>
</body>
</html>

语义化标签

html5中为了提高程序的可读性，提供了一些标签。
1. <header>
2. <footer>

表格标签

table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。
- bgcolor：背景色
- align：对齐方式
tr：定义行
- table row的缩写，表格中的一行
  - bgcolor：背景色
  - align：对其方式
td：定义单元格
- table data cell的缩写，单元格
  - colspan：合并列
  - rowspan：合并行
th：定义表头单元格
- table header cell的缩写，表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tfoot>：表示表格的脚部分

东皇太乙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5

文章目录html快速入门标签学习文件标签文本标签图片标签列表标签连接标签div和span语义化标签表格标签html快速入门语法html文档后缀名，.html 或者 .htm标签为围堵标签（双标签）：有开始标签和结束标签。如<html> </html>自闭合标签（单标签）：开始标签和结束标签在一起。如<br/>标签可以嵌套：需要正确嵌套，不能你中有我，我中有你错误：<a><b></b></a>
复制链接

扫一扫