HTML的相关概述

最新推荐文章于 2024-09-23 17:12:42 发布

春雨燎原

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量322

点赞数

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

本文链接：https://blog.csdn.net/qq_66013742/article/details/132995769

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、HTML概述

1.什么是网页

网站中的页面，通过HTML格式的标签进行开发的，以htm或html结尾的格式文档

2.什么是HTML

HTML：超文本标记语言

超文本：图文并茂，且通过超链接进行跳转

标记语言：通过标签进行开发的语言

3.作用与规范

作用：主要用于展示页面信息

规范：

通过起始标签与结束标签组成，中间可以加基本值；例如：基本值

在起始标签中可以加入属性，例如：基本值

建议标签中都写小写

4.语法结果

<!DOCTYPE html> <!-- 文档声明：声明了该文档为html的文档   ctrl+shift+/ 注释 -->
<html>  <!-- 根标签：在最外层，有且只有一个 -->
    <head> <!-- 头部标签：显示编码及标题等信息 -->
        <meta charset="utf-8" />
        <title>第一个完美网页</title>
    </head>
    <!-- 颜色效果：1，可以加颜色关键字  例如：red红色  yellow黄色
        2.可以加三原色  所有颜色由三原色组成   #rgb  r-红  g-绿  b-蓝色  范围：0~f
        3.细化的三原色：  #rrggbb   每个颜色范围：00~ff
-->
    <!-- alt+/:万能键        background="img/005.png" 背景图 -->
    <body bgcolor="#ff0000" text="#ff0" > <!--网页的正文，所有标签内容都在此处-->
        魏，你好吗
    </body>
</html>

二、基本标签

1.排版与格式标签

<body>  <!-- ctrl+s 保存  -->
    你好，每一位<br /> <!-- 回车换行  --> 
    大家都好吗
    <!-- 段落：p  align:对齐方式 -->
    <p>暑期“游经济”展现新活力</p>
    <p align="center">我国成为世界第一大船东国</p>
    <p align="right">兜住兜牢民生底线</p>

    <!-- hr:水平线  size:粗细   width:宽度  align:对齐方式   -->
    <hr size="30px" width="600px" align="right" color="red"/>

    <!-- 块标签：span，div：容器，可包裹很多其他标签 -->
    <!-- 块级标签：带换行的标签   :  div  h1~h6  ol,ul
行级标签： 不换行的标签   :  span srong,b..
-->
    <div>容器层</div>
    <span style="color: red;">标记标签</span>不换行

    <!-- 字体标签 -->
    <font size="30px" color="blue" face="微软雅黑">我的字体</font> 行级标签
    <br />

    <b>加粗</b>
    <strong>强调加粗</strong>
    <em>强调的斜体</em>
    <i>斜体</i>
    <big>大号字体</big>
    <small>小号字体</small>
    <sub>下标</sub>
    <sup>上标</sup>
    <del>删除线</del>
</body>

2.标题与列表

<!-- 标题标签：h1~h6 -->
<h1>1号字体</h1>
<h2>2号字体</h2>
<h3>3号字体</h3>
<h4>4号字体</h4>
<h5>5号字体</h5>
<h6>6号字体</h6>

<!-- 列表标签： ol：有序列表
ul:无序列表   type属性  circle圆心  disc实心-默认  square:方型 -->
<ul type="circle">
    <li>为推动世界和平与发展贡献智慧和力量</li>
    <li>暴雨洪水中 他们8小时接力救援</li>
    <li>“研学游”，如何实现“研学优”</li>
</ul>
<!-- ol有序列表  type:有序类型   start：起始个数  初始从1开始 -->
<ol type="i" start="3">
    <li>女子插队争执儿子捂嘴劝离</li>
    <li>广铁回应职工占高铁商务座</li>
    <li>医院党委书记被查痛哭忏悔</li>
</ol>

<!-- 案例：列表标签嵌套： -->
<ul type="circle">
    <li>咖啡</li>
    <li>茶
        <ol type="A">
            <li>红茶</li>
            <li>绿茶</li>
        </ol>
    </li>
    <li>牛奶</li>
</ul>

<!-- 图片标签：img 属性：宽，高，路径   了解：  边框  水平和垂直空格，对齐方式-->
图片参照对齐：<!-- hspace="20px" vspace="30px" -->
<img width="200px" height="300px" src="../img/011.png" alt="未显示图片"
     border="2px"  align="bottom" />

三、超链接

1.基本超链接

<!-- 超链接：显示下划线及蓝色，鼠标放上去，会变成手型；点击后可进行跳转到另一个页面
应用：1.基本应用，可跳转到外部链接；也可跳转到内部链接<br />
href属性：跳转属性  target属性:目标跳转位置
_self自身位置跳转-默认      _blank新窗口跳转
-->
<a href="http://www.baidu.com">跳转到百度</a><br />
<a href="02_标题与列表.html" target="_blank">跳转到到内部</a><br />

2.图片链接

<!-- 2.制作图片链接  超链接嵌套图片即可
href="#":#表示有超链接效果，但不能跳转  -->
<a href="#"><img src="../img/005.png" /></a><br />

3.锚链接

<!-- 3.锚链接： 分两个部分  一个设置锚点   另一个跳到锚点位置 
跳转使用#锚点
-->
<a href="#aa">跳到锚点位置</a><br />
<a href="02_标题与列表.html#bb">跳到另一个页面的锚点位置</a><br />
<img src="../img/005.png" /><br />
<img src="../img/005.png" /><br />
<img src="../img/005.png" /><br />
<img src="../img/005.png" /><br />
<img src="../img/005.png" /><br />
<img src="../img/005.png" /><br />
<img src="../img/005.png" /><br />
<img src="../img/005.png" /><br />
<!-- name用于设置锚点 -->
<a name="aa">锚点位置</a><br />
<img src="../img/005.png" /><br />
<img src="../img/005.png" /><br />
<img src="../img/005.png" /><br />

四、表格

表格示例：

<!-- 表格标签：table  
属性：border-边框  cellspace-单元格间距  cellpadding-单元格内边距
单元格间距：单元格与单元格之间的间距    内边距：单元格与内容之间的间距
子标签：tr-行    th-列头部    td-列
单元格的属性：跨行rowspan和跨列colspan
-->
<table border="2" cellspacing="10" cellpadding="5">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th colspan="2">操作</th>
    </tr>
    <tr>
        <td>张三丰</td>
        <td>男</td>
        <td>99</td>
        <td><a href="#">删除</a></td>
        <td><a href="#">修改</a></td>
    </tr>
    <tr>
        <td>灭绝</td>
        <td rowspan="2">女</td>
        <td>45</td>
        <td><a href="#">删除</a></td>
        <td><a href="#">修改</a></td>
    </tr>
    <tr>
        <td>赵敏</td>
        <td>20</td>
        <td><a href="#">删除</a></td>
        <td><a href="#">修改</a></td>
    </tr>
</table>