Collection
Collection
格式头
<!DOCTYPE html> 声明文档类型为 html
<html> 当前html文档的语言为english英文
<head> 文档头部: 1.主要是文档描述信息,如关键字,编码等; 2.供浏览器或搜索引擎读取
<meta charset="UTF-8"> 设置当前文档的编码集:utf-8支持几乎所有编码,包括中文
<meta name="keywords" content="关键字"> 设置页面关键字
<meta name="description" content="页面描述"> 设置页面描述
<link rel="stylesheet" type="text/css" href="style.css"> 引入外部的CSS样式表文件
<script type="text/javascript" src="jquery.js"></script> 引入外部的javascript脚本文件
<title>1.HTML文档的结构</title> 设置页面标题,显示在浏览器标签页
</head><body>内容区：这里设置页面的主体,就是用户实际看到的页面内容</body></html>
文本标签 <p> </p>
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。
可以通过 <div> 的 class 或 id 应用额外的样式。</div>
<span> 内联元素,同样也没有任何样式,通常用作标签内容的容器. </span>
<h1~6>标题标签</h1~6> 标题标签默认为加粗显示,编号越大,字体就越小,编号与大小成反比
title即是标题又是标签的一个属性,当鼠标移动标题上面的时间,稍等一会会显示这个提示信息
<strong>可以使文本加粗显示,功能类似的还有<b></b>标签</strong>
<em>可以使文件斜体显示,有语气强调的作用,类似还有<i>标签</em>
<pre>就是原样输出,后面有案例</pre>
<br> 换行符标签是空标签 在 XHTML 中，把结束标签放在开始标签中，也就是 <br/> 请使用 <br> 来输入空行，而不是分割段落。
<hr> 换行符标签在 HTML 页面中创建一条水平线。水平分隔线可以在视觉上将文档分隔成各个部分。
链接标签 <a href=" "></a>
<a href=" " target="_blank">链接文本</a> 链接标签是<a>,它的最重要的属性就href,就是要跳转的地址
<a>标签的功能还可以在本站内进行跳转,我们可通过添加锚点来实现
在所有浏览器中，链接的默认外观是：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
target属性 _blank：在新窗口打开 _self:当前窗口,默认值,不写的话,就是它
_parent:当前窗口的父窗口 _top: 最顶级的窗口
图像标签 <img src=" "> <img:url(" ")>
<img src="../images/9.jpg" width="300" alt="混血车模"> alt属性,指示当前图片的文字描述 当图片加载失败打不开或者用户禁止图像显示时 就显示这个提示文本 也方便搜索引擎检索到 所以习惯性加这个属性值
width:设置宽度, height:设置高度,单位默认为像素,可以不写单位,只有数值 宽度与高度写一个就可以,另一个属性会自动等比例缩放的
表格的基本属性 创建表格的基本原则是:先创建行,再划分列。一行一列叫一个单元格,用户数据必须全部放在单元格中
<table>标签在html创建表格用的,这个标签是一个典型的复合标签</table>
<caption>标题用</caption>
<th>表头标签内部文本默认会加粗居中显示</th> <tr>创建行使用标签</tr> <td>创建列使用标签</td>
border:设置表格边框线的宽度
cellspacing: 设置单元格之间的间隙,设置为0,相当于单元格边线折叠,这时它自动使用表格的边框宽度,如1
cellpadding: 设置单元格数据与边界之间的距离,使内容不至于太拥挤,如3或5
align: 设置单元格内数据的对方方式, 默认为left左对齐 right右对齐 center居中对齐
width: 设置表格的宽度,推荐设置为相对值,以自适应数据变化
height: 设置表格的高度,这里没有设置,以适应表格的行数的变化
<form action="" method="post"> <table border="0" cellspacing="0" cellpadding="8" width="400" bgcolor="powderblue">
<thead><tbody><tfoot>为表格的分区，可以将表格分为头部，主体，尾部三分部
这三个表格分区标签本身没有任何样式,仅仅是一个区块划分标记罢了
<colgroup span="1" >可以对一列进行整体控制,但能用的属性非常有限,通常要配合css才能发挥作用
<col>标签可对分到一组的每一列进行更加精准的控制</colgroup>
rows 行 cols 列 <th rowspan="2">合并行</th> <th colspan="2">合并列</th>
bgcolor:可以设置行或单元格的背景颜色 所有表格标签内都可以使用此标签 <tr bgcolor="skyblue">
例如：<
table border="1" cellspacing="0" cellpadding="5" width="80%"> <caption><h3>岛国明星TOP50排行榜</h3></caption> <tr bgcolor="skyblue"> <th colspan="2" rowspan="2">操作</th> </tr> <tr bgcolor="skyblue"> <th>ID</th> </tr> <tr> <td>01</td> </tr> </table>
valign 调格子中内容的垂向（上下）位置
valign=" top "上面 valign=" middle "中间 valign=" bottom " 下面
align 调格子中内容的（左右）横向位置
align=" left " 左边对齐 align=" center "中间 align=" right "右边对齐
列表标签 <ul>无序列表：必须与<li>子标签配对使用 <ol>有序列表 带有数字序号
<dl><dt><dd>自定义列表：非常像名词解释,用途非常广泛
<ul>有一个属性type,可以设置列表项前面的标记
type="disc" 实心小黑点,这是默认一级列表的标记
type="circle" 空心小圆点,这是二级列表默认标记
type="square" 实心方块
<ol>有一个属性type,可以设置列表项前面的序号，默认:十进制数字 (1, 2, 3, 4)。</ol>
<ol reversed>倒序3.2.1~</ol>
<ol type="1|a|A|i|I">
a字母顺序的有序列表，小写 (a, b, c, d)。
A 字母顺序的有序列表，大写 (A, B, C, D)。
i 罗马字母，小写 (i, ii, iii, iv)。
I 罗马字母，大写 (I, II, III, IV)。
list-style-type：none 关闭列表项前面的样式，应用于写默认初始样式
简写方式： <ul type="none"> <!-- 去掉前的小黑圆点 --> 列表是可以嵌套的
表单的基本元素 <form><input ...>输入控件标签<br></form>
<input>有很多类型,是由type属性来指定的, 因为input是一个内联元素,多个input会在一行显示,所以后面加一个换行标签<br> name是输入控件的名称,一定要设置,因为PHP要用它当变量名来获取表单的数据
type="text" 文本框：最常见,可以输入文本,常用来输入用户名帐号等
type="password" 密码框：和文本是一样的,只是用户输入的内容以星号代替
<input type="text/password" name="name/password" value=""> checked 默认选项
type="radio" 单选框:每次只能选择1项
<input type="radio" name="sex（性别） " value="male">男 value="woman">女 value="secret" checked>保密 type="checkbox" 复选框:1次可以选择多个数据提交,返回值是一个数组,name属性要加[],确保返回数组
<input type="checkbox" name="hobby[]" value="movie">看电影、"game">打游戏、"cook">做饭、"wash">洗衣服
<select name="level">下拉列表框:点击后会出一个下拉列表,用户可以选择一个或多个选项，
name写在父标签select中,value写在option子标签中 selected属性设置默认值
<option value="0">1</option> <option value="1">2</option>
<option value="2" selected>3</option> <option value="3">4</option></select>
type="file" 文件上传域:accept属性设置允许上传的文件类型,不过这个很少用,应该在服务器进行判断
头像:<input type="file" name="photo/图片" accept="image/*"> <br>
type="hidden" 特殊的隐藏域：1.有一些数据是自动生成的,不需要用户输入:例如注册时间
2.有一些数据用户是不知道的,例如,用户id 3.后端通过表单向一些页面传数据时使用的主键或关键字
<textarea name="comment" rows="5" cols="30"></textarea><br> 文本域
placeholder="输入框提示语（默认灰色）" size="30" 输入框可输入的字数 可以直接控制输入框宽度
type="submit" 提交按钮 <input type="submit" name="submit" value="提交">
type="button" 普通按钮,失去提交功能 <input type="button" name="button" value="提交">
type="reset" 可以重置用户数据,恢复到最初状态 <input type="reset" name="reset" value="重置">
type="image" 提交图像按钮，默认就是提交功能
<input type="image" name="submit" src="../images/submit.jpg" width="30">
label标签,点击时会导致第一个控件被选中---不需要进入焦点 就不需要label标签
<fieldset>用表单控件分组</fieldset>
<tr><td colspan="2"><hr></td></tr> <!-- 此行代码就是画一条分隔线没有其它用处 -->
<legend align="right " align="center" >
创建一个带框的标题，标题位置可以在：左边 右边 居中， 配合<fieldset>框起一组表单控件 </legend>
内联框架 ifream:叫内联框架,最重要的属性有name,width和height
seamless:去掉边框与浮动条，如果seamless无效,可以用frameborder来设置
marginheight和marginwidth设置上下和左右的外边距
<iframe src="http://www.jd.com" name="iframe" width="1000" height="800" frameborder="0" marginheight="300" marginwidth="500">浏览器不支持框架</iframe>
scrolling="no" auto 在需要的情况下出现滚动条（默认值）
yes 始终显示滚动条（即使不需要） no 从不显示滚动条（即使需要）
<table border="0" cellspacing="1" cellpadding="5" width="960"> <!-- 顶部 --> <tr height=60> <td colspan="2"> <iframe src="inc/top.html" name="top" height="70" width="100%" frameborder="0" scrolling="no" ></iframe> </td> </tr> <!-- 我是一条风骚的分隔线 --> <tr><td width="100%" colspan="2"><hr></td></tr> <!-- 中间主体:分左右二栏 --> <tr> <!-- 左边菜单栏 --> <td> <iframe src="inc/left.html" name="left" height="600" width="140" frameborder="0" scrolling="no"></iframe> </td> <!-- 右边内容区 --> <td> <iframe src="inc/default.html" name="right" height="600" width="800" frameborder="0" scrolling="no"></iframe> </td> </tr> <!-- 我是一条风骚的分隔线 --> <tr><td width="100%" colspan="2"><hr></td></tr> <!-- 底部 --> <tr> <td colspan="2"> <iframe src="inc/footer.html" name="footer" height="70" width="100%" frameborder="0"></iframe> </td> </tr> </table>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
