• 尚硅谷html5+css3（1）

    1.基本标签：

    最大的标题字号

    二号标题字号

    换行

    2.根标签

    包括和

    1. <html>
    2.     <head>
    3.         <title>
    4.             title
    5.         title>
    6.         <body>
    7.             body
    8.         body>
    9.     head>
    10. html>

    3.自结束标签与注释（注释不可嵌套）

    1. <html>
    2.     <head>
    3.         <title>
    4.             网页
    5.         title>
    6.         <body> 
    7.            自结束标签：
    8.            <img>
    9.            <img/>
    10.            <input>
    11.            <input/>
    12.            
    13.         body>
    14.     head>
    15. html>

    4.标签的属性：

    1. <html>
    2. <head>
    3.     <title>
    4.         标签的属性
    5.     title>
    6. head>
    7. <body>
    8.     
    9.     <h1> 第 <font color="red" size="4">1font> 个网页
    10.     h1>
    11. body>
    12. html>

    5.文档属性:告诉网页是html5的

    2. html>
    3. <html>
    4.  
    5. <head>
    6.     <title>
    7.         网页的基本结构
    8.     title>
    9.  
    10. head>
    11. <body>
    12. body>
    13. html>

    6.字符集：使用万国码：UTF-8

    1. html>
    2. <html>
    3. <head>
    4.     
    5.     <meta charset="utf-8">
    6.     <title>
    7.         网页的基本结构
    8.     title>
    9. head>
    10. html>

    7.语义化标签（1）

    ①标题标签：h1~h6共6级标签

    从h1到h6重要性递减

    h1在网页中的重要性仅次于title标签，一般情况下一个页面只有一个h1

    一般用h1~h3

    ②块元素：在页面中独占一行的元素称为块元素（例如h1）

    ③p标签：表示页面中的一个段落

    ③hgroup：为标题分组，可以将一组相关的标题同时放入hgroup

    ④em：语音语调（使字体倾斜）

    ⑤strong：加粗字体

    ⑥blockquote：引用，缩进+独占一行

    ⑦q：短引用，为文字加双引号

    ⑧br：换行

    8.结构化语义标签（2）(前8个了解即可，主要使用div)

    ①header:网页头部

    ②main:网页主体（一个页面只有一个main）

    ③footer:网页底部

    ④nav:网页导航

    ⑤aside:和主体相关的其他内容

    ⑥article:表示一个独立的文章

    ⑦section:表示一个独立区块，上面的标签都不能表示时使用section

    ⑧span:行内元素，没有语义，一般用于在网页中选中文字

    ⑨div:没有语义，只用来表示一个区块，主要使用div来布局元素

    9.块和行内

    块元素(block element):在网页中一般通过块元素对页面进行布局

    行内元素(inline element):包裹文字

    一般在块元素中嵌套行内元素（例:

    iii

    ）

    p元素中不能放任何块元素

    浏览器在解析网页时，会对网页中不符合规范的内容进行修正

    10.列表list

    在html中创建列表：（可以嵌套）

    1.无序列表：ul标签：li表示列表项

    1.    <ul>
    2.         <li>列表1li>
    3.         <li>列表2li>
    4.         <li>列表3li>
    5.     ul>

    2.有序列表：ol标签：li表示列表项

    1.     <ol>
    2.         <li>列表1li>
    3.         <li>列表2li>
    4.         <li>列表3li>
    5.     ol>

     

    3.定义列表：dl标签：dt表示定义的内容，dd对内容进行解释说明（交互菜单）

    1.     <dl>
    2.         <dt>dtdt>
    3.         <dd>dd1dd>
    4.         <dd>dd2dd>
    5.     dl>

     

    11.超链接

    使用a标签定义超链接。超链接也是一个行内元素，在其中可以嵌套除a以外的任何元素

    属性:href:指定跳转的目标路径

    <a href="https://www.baidu.com/">baidua>

    12.相对路径

    .或..开头：./   ../     ./可以省略不写

    ./当前文件所在目录

    ../上一级文件目录

    13.超链接

    (1)新建页面

    target属性，用来指定超链接打开的位置

    _self默认值，在当前页面打开超链接

    _blank在一个新的页面打开超链接

    <a href="https://www.baidu.com/" target="_blank">baidua>

    (2)回到顶部

    将超链接的href属性设置为#，这样点击超链接后页面不会跳转，而是转到当前页面的顶部

        <a href="#">回到顶部a>

    (3)跳转到任意地方:

    使用id，给每个标签设置id属性（唯一标识）

    href设为"#"+"id"

    1.     <a href="#bottom">去底部a>
    2.     <a id="bottom" href="#">--底部--a>
     <a href="javascript:;">什么也不会发生a>

    14.图片标签

    （1）img标签引入图片，它是一个自结束标签

    属性：src 外部图片路径

    img这种元素属于替换元素（被图片替换）

    （2）alt，图片的描述，默认情况下不显示，在浏览器无法加载图片时显示

    搜索引擎会根据alt中的内容识别图片（如果不写alt则不能被搜索引擎搜到）

    （3）width图片宽度 height图片高度（单位：像素）

    若两者只改一个，则会等比例缩放

    若都改，则会改变图片长宽

    （PC端一般不改图片大小，移动端经常对图片进行缩放）

      <img width="500 src="./img/1.gif" alt="图片1">

    15.图片格式

    jpeg(jpg) 支持的颜色比较丰富，不支持透明效果，不支持动图（一般用来显示照片）

    gif 支持的颜色比较少，支持简单透明，支持动图（颜色单一的图片，动图）

    png 支持的颜色丰富，支持复杂透明，不支持动图（专为网页而生）

    webp 谷歌专门用来表示网页中图片的一种格式，具备其他的有点，而且文件小（最完美的，但兼容性不好（ie浏览器不能用））

    base64 将图片用base64进行编码，这样可以将图片转换为字符，通过字符的形式引入图片

    一般用于一些需要和网页一起加载的图片采用base64(同步加载)（使用场景不多）

    16.内联框架

    iframe  用于向其他页面引入一个其他页面  

    用于向当前页面引入一个其他页面

    2.     <iframe src="https://www.bilibili.com/" width="800" height="600" frameborder="0">iframe>

    17.音视频播放

    （1）音频

    2.     <audio src="./source/1.mp3" controls autoplay loop>audio>
    1.     
    2.     <audio>
    3.         对不起，您的浏览器不支持播放音频，请升级浏览器！
    4.         <source src="./source/1.mp3">
    5.         <source src="./source/2.mp3">
    6.         <source src="./source/3.mp3">
    7.     audio>
    2.     "./source/1.mp3" type="audio/mp3" width="200" height="100">

    （2）视频

    1.     
    2.     <video>
    3.         <source src="./source/1.webm">
    4.         <source src="./source/1.mp3">
    5.         <source src="./source/3.mp3">
    6.         <embed src="./source/3.mp3">
    7.     video>

  • 相关阅读:
    B. 看比赛 The 10th Jimei University Programming Contest
    SQL 获取每个部门中当前员工薪水最高的相关信息
    金仓数据库KingbaseES查询计划剖析
    【面试题】事件绑定和冒泡
    python中jmespath库用法详解
    解析五育融合之下的steam教育模式
    idea中创建jsp项目详细步骤
    制作网线——双绞线
    音视频入门基础：H.264专题（8）——H.264官方文档的描述符
    ASSIST-GAI全色域指数计算工具
  • 原文地址：https://blog.csdn.net/l141930402/article/details/137406089