Collection
Collection
本课主要关于网页基础认识部分
页面为一个二维空间,所有元素的排列只有垂直和水平两种方式,各元素的方式如下:
块元素
垂直排列,主要用来当容器,最常见的元素就是DIV
<div></div>
行内元素
水平排列,主要为内容项,最常见的元素就是<span></span>
img{width:100%;heigth:100%}
当行内块元素的宽高>其容器宽高时,两个元素显现出的效果是各显示各的
可以通过display属性来实现各类元素的相互转换
flex布局,快被grid替换
<!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>
<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>
<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中
表单是用户和服务器交流窗口,也是有网络攻击的入口
表单也是一个复合元素,主要包括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,可以直接将两者绑定
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
