适合新手小白的前端基础。会用最简单的话配最简单的代码告诉您各种标签、属性的用法，定期更新，直至完结

sleep_i_like

已于 2022-11-17 11:19:30 修改

阅读量468

点赞数 1

分类专栏：前端知识分享文章标签：前端 css html5

于 2022-11-10 17:47:17 首次发布

本文链接：https://blog.csdn.net/sleep_i_like/article/details/127793145

版权

前端知识分享专栏收录该内容

1 篇文章 0 订阅

订阅专栏

刚开始学习前端的人适合看一下本内容，帮助你快速有一个整体的认识，但是“道可道，非常道”。最重要的还是您亲手去敲，去体会

1.A标签

<a href="http://www.baidu.com" target="_self">BAIDU</a>

主要是target=“”;
__blank:在新网页打开
_self：在本页面打开
_top和_parent则主要用在iframe时候

也可以点击图片实现跳转：

<a href="http://www.baidu.com">
    <img src="./img/yzmmlogo.jpg" alt="">
</a>

img中的 alt属性是元素的必选属性，它给出了图像的备选文本，供图像无法显示时采用。
当用户因为某种原因（比如：打开速度慢、src属性存在错误或者用户使用了屏幕阅读器）不能查看图像时，alt属性提供了替代信息。

2.表格

在表格中一行称为一条记录，一列称为一个字段。

<table border="1">
    <thead><!-- 表头 -->
    <tr>
            <!-- 单元格 -->
            <td colspan="2">
                姓名
            </td>
            <td>
                学号
            </td>
            <td>
                班级
            </td>
        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <!-- 行 -->


        <tr>
            <td>
                小泽
            </td>
            <td>
                666
            </td>
            <td>
                a班
            </td>
        </tr>
        <tr>
            <td>
                小庆
            </td>
            <td>
                888
            </td>
            <td>
                b班
            </td>
        </tr>
    </tbody>
</table>

td的colspan属性表示单元格所占的列数
td的rowspan属性表示单元格所占的行数

3.列表ol和ul标签

ul：是无序列表
ol：是有序列表
li：是列表项（li标签要不然在ul中，要不然就在ol中，）
dl：内部含有一个标题
dt：标题
dd：dd是对dt（标题）的一个描述
可以在css中：list-style-type: 后面更改样式

<body>
<ul style="list-style-type:cjk-heavenly-stem">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ol>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ol>
<dl>
    <dt>文件</dt>
    <dd>文本文件</dd>
</dl>
</body>

4.h标签与p标签

h1:标题
p：段落标签
i：设置字体为斜体
strong：设置字体加粗

<body>
<h1>新闻</h1>
<p><i>第十四届中国国际航空航天博览会在珠海拉开帷幕。</i>一批代表世界先进水平的<strong>“高、精、尖”</strong>展品集体亮相，展示我国航空航天和国防科技领域的尖端技术和创新突破，展品实现“陆海空天电网”六位一体系统化、全维度覆盖。</p>
<h4>展览的飞机</h4>
<p>有打飞机，小飞机，和直升飞机</p>
</body>

5.style属性

span:是一种中性标签;没有任何语义，完全是为了让你将一句话包起来
px：单位为像素
pt：单位为磅
中间如果有多个需要设置的style，可以用’;'隔开

<h1>新闻</h1>
<p><i>第十四届中国国际航空航天博览会在珠海拉开帷幕。</i>一批代表世界先进水平的<strong>“高、精、尖”</strong>展品集体亮相，<span style="font-size:28px">展示我国航空航天和国防科技领域的<span style="font-size:28pt ;color:blue">尖端技术</span>和创新突破</span>，展品......</p>
<h4>展览的飞机</h4>
<p>有打飞机，小飞机，和直升飞机</p>

6.颜色

直接用16进制前面需要加#
rgb三原色表示法：color:rgb(0, 255, 0) 使用三原色表示法有一个好处就是可以直观的增加透明度

color:rgb(0, 255, 0 ，0.5)  最标准的写法应该是rgba：（a alpha）color:rgb(0, 255, 0 ，0.5) 
<h1 style="color:rgba(0, 255, 0,0.1)">新闻</h1><p><i style="color:#00ff00">第十四届中国国际航空航天博览会在珠海拉开帷幕。</i></p>

7.字体和字号

font-family：用来设置字体font-family:Georgia, ‘Times New Roman’, Times, serif"：第一个Georgia存在就用第一种字体；不存在就用’Times New Roman’，都不存在就用默认字体（'Times New Roman’之所以用单引号包起来，主要是因为字体名称中间有空格）
div是块标签的意思。如果在div中怎加了style那么它的作用域就是整个div，但是如果div内的元素有属于自己的style；则其自身的style优先级更高。
em：如果网页的字号是10px，那么1em就是10px；2em就是20px（你比如你设置字体是10px，那么h1标签的单位也就会设置为相应的em）
在这里插入图片描述

<div style="font-size:80px">
    <h1 style="color:rgba(0, 255, 0,0.5)">新闻</h1>
    <h2>h2标签</h2>
    <h3>h3标签</h3>
    <p  style="font-family:Georgia, 'Times New Roman', Times, '黑体','仿宋',serif ;font-size :30px;"><i style="color:#00ff00">第十四届中国国际航空航天博览会在珠海拉开帷幕。</i>一批代表世界先进水平的<strong>“高、精、尖”</strong>展品集体亮相，<span style="font-size:28px">展示我国航空航天和国防科技领域的<span style="font-size:28pt ;color:blue">尖端技术</span>和创新突破</span>，展品......</p>
    <h4>展览的飞机</h4>
    <p>有打飞机，小飞机，和直升飞机</p>
</div>

8.块级元素和行内元素

块级元素可以简单的理解为就是“独占一行”，可以方便我们方便的划分页面结构，h标签和div都可以理解为块级元素
display：inline：将块级元素设置为行内元素（display默认都是block）

<body>
   <h1>这里是h1</h1>
   <p >这里是p标签</p>
 
</body>

在这里插入图片描述

<body>
   <h1 style="display: inline;">这里是h1</h1>
   <p style="display: inline;">这里是p标签</p>
 
</body>

在这里插入图片描述

9.边框和padding

border:1px solid red：设置外边框大小为1px的红色实线

 <div style="width: 100px;height:100px;border:1px solid red">
 好好学习，天天向上
 </div>

之所以称为外边框是因为边框是在div外面渲染，上面的div大小虽然是100px100px;但是实际情况确实102px102px；因为上下左右各增加1px的外边框（border）
border-left：只设置左边的边框
padding :1em 设置内部空隙为1个字号（之前有介绍过em大小是更具字号来决定的，网页默认的字号就是16px）
在这里插入图片描述
border-radius:10px ：设置圆角像素越大越圆
box-sizing: border-box ：如果加上这句话，就相当于在给定的高度和宽度增加样式。（默认是content-box）
overflow:auto ：如果内容超出边框就增加一个滚动条，避免他超出边框
overflow:hidden ：如果内容超出边框就直接去掉
float:right ：整个div浮动到右边

<body>
  <div style="width: 100px;height:100px;
  border-radius:1000px;
  border:1px solid red;
  border-left:5px solid blue;
  border-top:5px solid yellow;
  padding :1em;
  box-sizing: border-box;
  overflow:auto;
  float:right;
  "
  
  >
  好好学习，天天向上<br> 好好学习，天天向上<br> 好好学习，天天向上<br>
  </div>
    
</body>