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

    **

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

    1.A标签

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

    • 1

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

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

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

    • 1
    • 2
    • 3

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    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>1li>
    <li>2li>
    <li>3li>
ul>
<ol>
    <li>4li>
    <li>5li>
    <li>6li>
ol>
<dl>
    <dt>文件dt>
    <dd>文本文件dd>
dl>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    4.h标签与p标签

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    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>

    • 1
    • 2
    • 3
    • 4

    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) 

    新闻
    第十四届中国国际航空航天博览会在珠海拉开帷幕。
    

    • 1
    • 2

    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）
    在这里插入图片描述
    在这里插入图片描述

    
    
    新闻
    
    
    h2标签
    
    
    h3标签
    
    
    第十四届中国国际航空航天博览会在珠海拉开帷幕。一批代表世界先进水平的“高、精、尖”展品集体亮相，展示我国航空航天和国防科技领域的尖端技术和创新突破，展品......
    
    
    展览的飞机
    
    
    有打飞机，小飞机，和直升飞机
    

    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    8.块级元素和行内元素

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

    
   
    这里是h1
    
   
    这里是p标签
    
 


    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    
   
    这里是h1
    
   
    这里是p标签
    
 


    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    9.边框和padding

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

     
    
 好好学习，天天向上
 
    

    • 1
    • 2
    • 3

    之所以称为外边框是因为边框是在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浮动到右边

    
  
    
  好好学习，天天向上
     好好学习，天天向上
     好好学习，天天向上
    
  
    
    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
  • 相关阅读:
    vue3实现导出Excel（2）
    DDD的哲学意味（上）
    Nginx（反向代理，负载均衡，动静分离）
    高等数学（第七版）同济大学 习题5-1 个人解答
    android_root后的玩机:magisk模块&root隐藏
    MySql——sql优化
    SQL练习
    Perl中的文件系统守卫：实现自定义访问控制
    java 不同方式的加锁
    2022-06-30 工作记录--JS-ios的Date对象不支持 yyyy-MM-dd 的格式
  • 原文地址：https://blog.csdn.net/sleep_i_like/article/details/127793145