HTML基础篇-笔记 (p1-p50集)

Felix_cx

已于 2022-09-22 10:30:34 修改

阅读量332

点赞数 1

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

于 2022-09-08 17:57:59 首次发布

本文链接：https://blog.csdn.net/m0_58615635/article/details/126738479

版权

这篇博客详细介绍了HTML的基础知识，包括常用标签如hr、特殊符号、div和span，以及列表、图片标签、超链接、表格和表单的使用。此外，还探讨了CSS样式表，如元素选择器、id选择器、选择器权重和各种属性，如背景属性和列表属性，以及视差效果的实现。

摘要由CSDN通过智能技术生成

常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见标签</title>
</head>
<body>
    <!-- 文本标题:总共六级 h -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    <!-- 各级标签都是各占一行，一级标题全篇只有一个，有粗有细 -->

    <!-- 段落标签 p -->
    <p>段落文本内容</p>
    <!-- 段落与段落之间有间隔 -->

    <!-- 换行标签 br -->
    换行 <br> 内容

    <!-- 水平线 hr -->
    <hr>

    <!-- 加粗标签 strong -->
    <strong>加粗</strong>

    <!-- 倾斜标签 em -->
    <em>倾斜1</em>
    <i>倾斜2</i>

    <!-- 删除线标签 s 或 del-->
    <s>￥200</s>
    <del>$200</del>

    <!-- 扩展 -->
    <u>下划线</u> <sub>下标</sub> <sup>上标</sup>
</body>
</html>

hr 格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hr格式</title>
</head>
<body>
    <hr color="blue" width="300px" align="center" noshade>
    <center>color 颜色</center>
    <center>width 宽度</center>
    <center>align 对齐方式</center>
    <center>noshade 取消阴影</center>
	
	<hr>
    <hr noshade> 
    <!-- 只针对默认下的分割线 noshade取消阴影 -->
</body>
</html>

特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特殊符号</title>
</head>
<body>
    我是左尖角号 &lt; <br>
    我是右尖角号 &gt; <br>
    
    我是空格     &nbsp; <!--该空格占据宽度受 字体 影响明显而强烈--> 我是空格中间
                &emsp;  我是空格结尾 <br> <!--占据的宽度正好是1个中文宽度，且基本上不受字体影响-->

    我是版权    &copy; <br>

    我是商标    &trade; <br>
                &reg; <br>
</body>
</html>

div和span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div和span标签</title>
</head>
<body>
    <div>我是div标签, 没有具体含义, 用来划分页面的区域, 独占一行</div>

    <!-- div 的快捷键
         1. div*3 一次性生成三个 div
         2. div{内容}*3 一次性生成三个带有内容的 div
      -->

    <span style="color: red;">我是span标签, 没有实际意义, 但是可以对特定内容添加特殊修饰</span>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表之将进酒</title>
</head>
<body>
    <!-- 无序列表 -->
    <!-- 默认的是实心圆 -->
    <!-- type = 'disc' 或 'circle' 或 'square' 或 'none'(取消显示,用的最多) -->
    <ul type="square">
        <li>君不见, 黄河之水天上来, 奔流到海不复回</li>
        <li>君不见, 高堂明镜悲白发</li>
        <li>朝如青丝暮成雪</li>
    </ul>

    <!-- 有序列表 -->
    <!-- 数字列表、字母顺序、罗马数字 -->
    <!-- ol type = '1' 或 'a-A' 或 'i-I' -->
    <!--    start: 取值只能是一个数字 (从哪个列表编号开始) -->
    <!-- 字母总共26个字母, 27个是从aa开始, 之后ab,ac,ad -->
    <ol type="a" start="27">
        <li>人生得意须尽欢, 莫使金樽空对月</li>
        <li>天生我材必有用, 千金散尽还复来</li>
        <li>烹羊宰牛且为乐, 会须一饮三百倍</li>
    </ol>

    <!-- 自定义列表 -->
    <!-- 下面是推荐的一套一套的写法 -->
    <!-- 快捷方式创建: dl>dt+dd -->
    <dl>
        <dt>岑夫子, 丹丘生, 将进酒, 杯莫停</dt>
        <dd>与君歌一曲, 请君为我倾耳听</dd>
    </dl>
</body>
</html>