首页 > 博客列表 > 第二课:html基础认识

博主信息

博文 12

粉丝 0

访问量 10609

专题推荐

更多>

第一部分:页面元素

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

块元素
垂直排列,主要用来当容器,最常见的元素就是DIV
```
<div></div>
```
行内元素
水平排列,主要为内容项,最常见的元素就是<span></span>
行内块元素
主要是外部资源,如<img> <input></input><select></select>,有自己的宽高,同时也受当前容器限制;同时也可以当容器.通常在使用中,会设置宽高为容器的100%
```
img{width:100%;heigth:100%}
```
当行内块元素的宽高>其容器宽高时,两个元素显现出的效果是各显示各的
可以通过display属性来实现各类元素的相互转换
flex布局,快被grid替换

第二部分: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>Document</title>
</head>
<body>
</body>
</html>

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

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

页面元素的标签和属性

<div id="X" class="dad "></div>
<img src="dddd">
<link href="">
<script src=""></script>
<button data-username="dksd" data-index="1">用户资料</button>

外部标签一般为单标签
属性通常与描述的元素相对应
三大通用属性,包括id,class,style
自定义属性,data-为前缀,dataset来对象来读取

第三部分:页面布局元素

<body>
 <div id="header"> 页眉 </div>
 <div id="main"> 主体 </div>
 <div id="footer"> 主体 </div>
</body>

优化:把id换成class

<body>
 <div clsss="header"> 页眉 </div>
 <div clsss="main"> 主体 </div>
 <div clsss="footer"> 主体 </div>
</body>

语义化

<body>
 <header> 页眉 </header> 
 <main> 主体 </main>
 <footer> 主体 </footer>
</body>

有限回退

<body>
<div class="article-header">文章头部</div>
<div class="article-main">文章主体</div>
</body>

最终推荐

<body>
<div class="article header">文章头部</div>
<div class="article main">文章主体</div>
</body>

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

两大重点元素

1.表格元素

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

<body>
<table border="5">
<caption>表格标题</caption>
 <thead>
   <tr>
      //th有居中加粗的作用
      <th>dfadsaf</th>
      <th>dfadsaf</th>
   </tr>
 </thead>
 <tbody>
   <tr>
      <td>dfadsaf</td>
      <td>dfadsaf</td>
   </tr>
 </tbody>
  <tfoot>
   <tr>
      <td colspan="2">统计</td>
   </tr>
 </tfoot>
</table>
</body>

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

2.表单元素

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

<form action="">
<fieldset>
 <legend>表单项目名称</legend>
  <label for="user">用户名:</label><input id="user" type="text" name="提交到服务器上变量的名称" value="变量的默认值" />
  <label for="psw">密码:</label><input id="psw" type="password" name="password" value="变量的默认值" />
</fieldset>
<button>提交</button>
</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 + ↓ / ↑ 光标放置行复制一行新的,同时将光标移动到上面/下面的行上

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

第二课:html基础认识

2023-03-10 22:29:56