本课主要关于网页基础认识部分
第一部分:页面元素
页面为一个二维空间,所有元素的排列只有垂直和水平两种方式,各元素的方式如下:
块元素
垂直排列,主要用来当容器,最常见的元素就是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一些使用快捷键
- 多重操作:
- Alt +单击：插入光标;
- Ctrl + Shift + L：选择当前选择的所有出现
- 常用操作
- Shift + Alt + F：格式化文档,主要通过Prettier - Code formatter插件实现
- Ctrl + /：注释
- Alt+ ↑ / ↓ 光标放置行内容向上/向下滚动
- Shift+Alt + ↓ / ↑ 光标放置行复制一行新的,同时将光标移动到上面/下面的行上