第二课:html基础认识

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

本课主要关于网页基础认识部分

第一部分:页面元素

页面为一个二维空间,所有元素的排列只有垂直和水平两种方式,各元素的方式如下:

  • 块元素
    垂直排列,主要用来当容器,最常见的元素就是DIV

    1. <div></div>

  • 行内元素
    水平排列,主要为内容项,最常见的元素就是<span></span>

  • 行内块元素
    主要是外部资源,如<img> <input></input><select></select>,有自己的宽高,同时也受当前容器限制;同时也可以当容器.通常在使用中,会设置宽高为容器的100%
    1. img{width:100%;heigth:100%}

    当行内块元素的宽高>其容器宽高时,两个元素显现出的效果是各显示各的
    可以通过display属性来实现各类元素的相互转换
    flex布局,快被grid替换

第二部分:html结构
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
  7.     //这行代码很重点,实现手机端页面
  8.     <title>Document</title>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

一个html文件包括文档类型和根元素两项,其中根元素里包括了头元素<head>和根元素<body>两个元素

<head>里的<meta>单标签
用户看到的是<body>里的元素

页面元素的标签和属性
  1. <div id="X" class="dad "></div>
  3. <img src="dddd">
  4. <link href="">
  5. <script src=""></script>
  6. <button data-username="dksd" data-index="1">用户资料</button>
  • 外部标签一般为单标签
  • 属性通常与描述的元素相对应
  • 三大通用属性,包括id,class,style
  • 自定义属性,data-为前缀,dataset来对象来读取
第三部分:页面布局元素
  1. <body>
  2.  <div id="header"> 页眉 </div>
  3.  <div id="main"> 主体 </div>
  4.  <div id="footer"> 主体 </div>
  5. </body>

优化:把id换成class

  1. <body>
  2.  <div clsss="header"> 页眉 </div>
  3.  <div clsss="main"> 主体 </div>
  4.  <div clsss="footer"> 主体 </div>
  5. </body>

语义化

  1. <body>
  2.  <header> 页眉 </header> 
  3.  <main> 主体 </main>
  4.  <footer> 主体 </footer>
  5. </body>

有限回退

  1. <body>
  2. <div class="article-header">文章头部</div>
  3. <div class="article-main">文章主体</div>
  4. </body>

最终推荐

  1. <body>
  2. <div class="article header">文章头部</div>
  3. <div class="article main">文章主体</div>
  4. </body>

其它一些元素:<article></article><aside></aside><nav></nav>

两大重点元素1.表格元素

<table>是一个table类型,是一个复合标签

  1. <body>
  2. <table border="5">
  3. <caption>表格标题</caption>
  4.  <thead>
  5.    <tr>
  6.       //th有居中加粗的作用
  7.       <th>dfadsaf</th>
  8.       <th>dfadsaf</th>
  9.    </tr>
  10.  </thead>
  11.  <tbody>
  12.    <tr>
  13.       <td>dfadsaf</td>
  14.       <td>dfadsaf</td>
  15.    </tr>
  16.  </tbody>
  17.   <tfoot>
  18.    <tr>
  19.       <td colspan="2">统计</td>
  20.    </tr>
  21.  </tfoot>
  22. </table>
  23. </body>

列的合并为rowspan,行合并为colspan,关键点要看到合并点在哪,同时注意下合并后的对向下或向右的单元格影响,实际操作中把这些受影响的单元格注释掉
合并属性只能写在td中

2.表单元素

表单是用户和服务器交流窗口,也是有网络攻击的入口
表单也是一个复合元素,主要包括form,fieldset,label,input,select,textarex,button

  1. <form action="">
  2. <fieldset>
  3.  <legend>表单项目名称</legend>
  4.   <label for="user">用户名:</label><input id="user" type="text" name="提交到服务器上变量的名称" value="变量的默认值" />
  5.   <label for="psw">密码:</label><input id="psw" type="password" name="password" value="变量的默认值" />
  6. </fieldset>
  7. <button>提交</button>
  8. </form>

input 为明文传送
label for和值为input里的id,可以直接将两者绑定

VScode一些使用快捷键
  • 多重操作:
    1. Alt +单击：插入光标;
    2. Ctrl + Shift + L：选择当前选择的所有出现
  • 常用操作
    1. Shift + Alt + F：格式化文档,主要通过Prettier - Code formatter插件实现
    2. Ctrl + /：注释
    3. Alt+ ↑ / ↓ 光标放置行内容向上/向下滚动
    4. Shift+Alt + ↓ / ↑ 光标放置行复制一行新的,同时将光标移动到上面/下面的行上
【本文来源：韩国服务器 http://www.558idc.com/kt.html欢迎留下您的宝贵建议】
更多阅读