学习目标：PC端网站布局
学习内容：H5基础、C3基础、H5C3提高、综合案例品优购
完成综合案例：品优购首页、列表页、注册页
HTML基础
标签
网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。
常用浏览器的内核：Webkit(苹果浏览器内核)、Blink(谷歌浏览器和国内 厂商的浏览器内核)。
Web标准(面试重点)
为什么需要Web标准
Web标准的构成
Web标准的构成：结构(身体HTML)、表现(外观装饰CSS)、行为(动作，使得页面产生交互的动画效果JS)，这些Web标准使得我们的代码在不同的浏览器中看到的效果是一样的。
HTML标签
-
语法规范：
-
尖括号包围的关键词
-
成对出现----双标签
-
单标签
-
-
标签关系：包含关系和并列关系
-
基本结构标签：
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
键盘敲烂，工资过万。
</body>
</html>
4. VSCode的使用
新建文件后先保存文件，注意要保存为.html文件.
生成骨架：按下 ! 后，再按下Tab键即可自动生成。
在浏览器中预览页面：单机鼠标右键，选择“OPen In Default Browser”.
插件的使用：安装插件按钮
chinese----中文化，重启
Open In browser-----右键预览
Auto Rename Tag—前后更改后面跟着改，重新加载
vscode中注释：ctrl+/
- DOCTYPE：文档类型声明标签，使用的html版本。
- lang：浏览器显示的语言。
- charset：字符集。
- HTML常用标签，利用标签语义来记忆：标签的含义，标签用来干嘛的。
这些标签都是在<body></body>中的主体内容。
标题标签
<h1>-<h6>>
- head头部、标题，依据重要性递减。
- 特点：文字变粗；字号依次变大；一个标题独占一行。
- 如果不用标题标签，所有的内容都会和正文的文字大小一样，没有改变，可读性差，不利于用户的使用。
<html>
<head>
<title>标题标签</title>
</head>
<body>
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五极标题标签</h5>
<h6>六级标题标签</h6>
<p>阶段一基础入门:入门前端工程师的必备技能,<br />能够完成PC端和移动端的静态页面,具备1:1还原设计图的能 力。</p>
<p> 阶段二技术进阶:进阶成为合格的初级前端工程师,能够实现页面的交互效果,实现与后端的数据联通。</p>
<p> 阶段三Vue开发:成为中高级前端工程师的核心能力,能够实现企业级项目的功能需求,并具备内容管理系统、企业中台 以及电商平台的项目经验。</p>
</body>
</html>
段落标签
<p> </p>
- paragraph段落，可以把文档分成若干的段落。
- 特点：文本在一个段落中会根据浏览器窗口的大小自动换行；段落和段落之间会有比较大的空隙。
- 如果不用段落标签，所有的内容都会显示在一起，不会分段，而且在其中加入多个空格显示出来的都只有一个空格.解决方法：可以用
 来表示空格。
换行标签
<br />
- break：强制换行，在
<p> </p>标签里面写. - 特点：单标签；只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距，而换行两行之间的间距不变。
- 我直接用段落标签再分一个段落行不行？
不行。段落标签使用时段落之间的空隙较大，而换行标签使用之后空隙不会变大，就只是另起一行而已。
文本格式化标签
为文字设置粗体、斜体、下划线等效果，使文字以特殊的方式显示，进而突出重要性，比普通文字更重要。
- 加粗：
<strong></strong>或<b></b> - 倾斜：
<em></em>或<i></i>- emphasize，强调、着重
- 删除线：
<del></del>或<s></s> - 下划线：
<ins></ins>或<u></u>- insert，插入
div和span标签
<div></div> <span></span>
- 只是一个盒子，用来布局网页，存放图片和文字的，没有语义。
- 特点：
<div>标签用来布局，一个div标签独占一行，后面再有内容只能在下一行重新开始，大盒子。
<span>标签用来布局，一行上可以有多个span标签，小盒子。 - divsion，分割 分区
span，跨度、跨距
<div>我是一个div标签我独占一行</div>123
<div>我是一个div标签我独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>腾讯</span>
图像标签和路径
图像标签：img
- 单标签
- 直接写图像的文件名时，图像必须和.html文件在相同的路径下
- 图像标签
<img src="图像的文件名（带后缀）"/>
src是图像的属性，图像的路径和文件名，是必须要有的属于图像的特性， - 图像标签的属性
-
src：图片路径-----必须属性，必须要有
-
alt：文本-----替换文本，当图像显示不出来（因为路径或文件名错误等原因）时显示的文字
-
title：文本------提示文本，当鼠标放在图像上时出现的文字提示
-
width：像素-----设置图像的宽度（长）—根据测量工具直接写数值
-
height：像素-----设置图像的高度（宽） -----根据测量工具直接写数值
在实际应用中一般只修改高度和宽度其中一个，另一个等比例缩放即可，否则会出现压缩失真的情况 -
border：像素-----设置图像的边框粗细 -----直接写数值
一般通过css来设置，还可以改颜色、直圆角
-
- 图像标签的注意点
- 不写图像的路径时，图像必须和.html文件在同一路径下
- 可以有多个属性，必须写在标签名的后面
- 属性之间无先后顺序，标签名与属性、属性与属性之间用空格分开。
- 属性采用键值对的格式，即key="value"的格式。
- 重点掌握：
图像标签中那个属性必须要写：src，表明要显示的是哪张图片；
图像标签中alt和title属性的区别：二者出现的时机不同，alt为替换文本，是当图像不显示时代替的文本；title为提示文本，是当鼠标放在图像上时显示的文本
<h4> src 图像标签的使用：</h4>
<img src="img.jpg"/>
<h4> alt 替换文本 在图像显示不出来（例如因为文件名错误或路径错误）时用文字代替：</h4>
<img src="img1.jpg" alt="我是小孩"/> <!-- 因为文件名错误不显示图像 -->
<h4> title 提示文本 鼠标放到图像上时提示的文字：</h4>
<img src="img.jpg" alt="我是小孩" title="我是一个可爱的小孩"/>
<h4> width 设置图像的宽度 </h4>
<img src="img.jpg" alt="我是小孩" title="我是一个可爱的小孩" width="180"/>
<h4> height 设置图像的高度 </h4>
<img src="img.jpg" alt="我是小孩" title="我是一个可爱的小孩" height="150"/>
<h4> border 设置图像的边框 </h4>
<img src="img.jpg" alt="我是小孩" title="我是一个可爱的小孩" width="180" border="20"/>
-
相对路径：以引用文件所在位置为参考基础而建立的目录路径，即图片相对于HTML页面的位置
-
同一级路径：直接写图像的文件名，
<img src="img.jpg" /> -
下一级路径：用
/来表示，<img src="images/img.jpg" /> -
上一级路径：用
../来表示，<img src="../img.jpg" />上一级的上一级的下一级：
<img src="../../images/img.jpg" />
-
-
绝对路径
<img src="D:\聊天工具除qq下载内容\Documents\前端学习资料\上课跟做\前端基础第一天-HTML\案例\img.jpg" />网络上的绝对地址：直接复制图像链接，网站上路径修改之后就找不到了
<img src="http://web.itcast.cn/2018czgw/images/logo2.png" />指目录的绝对位置 ，直接达到目标位置，通常从盘符开始的路径。但是由于每个人的存放图片的位置不一样，在别人的电脑上往往无法打开，很少使用。
超链接标签
从一个页面链接到另一个页面<a>文字或图像 </a>
<a href="跳转目标的url地址" target="目标窗口的弹出方式" > </a>
- anchor：锚
- 属性：
- href—用于指定链接目标的url地址，----必须属性
- target----用于指定链接页面的打开方式，
_self为默认值在当前窗口打开页面，_blank为在新窗口中打开页面_self下之前的页面没有了，只剩下链接后的页面，需要用返回的箭头才可以返回上一页面_blank下重新打开了一个窗口为链接后的页面，而原来的页仍然存在
- 链接的分类
-
外部链接标签：标签的地址以
http://www开头，转到别人已经使用的网页中去
<a href="http://www.qq.com" target="_blank">腾讯</a> -
内部链接标签：网站内部页面之间的相互链接，转到自己建立的网页中去，前提是该网页已经存在，不需要写
http://www。
和图像标签一样，在相同路径/下一路径/上一路径下写网页名
<a href="公司简介.html">公司简介</a>
<a href="09-图像标签/img.jpg">tuxiang</a>
<a href="../12-超链接标签.html">图像</a> -
空链接：如果当前没有确定链接目标时，链接的地址用
#或者空着代替
小发现：在默认的情况下，herf里面没有内容或#点击后是会回到顶部的。
<a href="#">公司地址</a>或者<a href="">公司地址</a>如果不想回到顶部，可以多输入几个 ### ,问题就可以得到解决。
-
下载链接：如果herf里面的地址是一个文件.exe或压缩包.zip会下载这个文件。直接在href中泄出对应路径的.exe或.zip文件名即可
<a href="img.zip">下载</a> -
网页元素链接：在网页中的各种网页元素，如文字、图像、表格、音频、视频等都可以添加超链接，把他们都当成文字来处理就行。
<a href="http://baidu.com"><img src="img.jpg" /></a>点击该图像就进入了百度的超链接中- 步骤：先把图像用图像标签显示出来，再把该图像当作文字写在超链接标签中，在写上链接地址即可。
-
锚点链接：在一个页面上，由于页面太长，通过该标签点击链接，可以快速定位到该页面中的某个位置，--------类似于目录
-
在链接文本的href属性中设置属性值为
#名字的形式，如<a href="#two">第二季</a> -
找到目标位置，在标题中添加一个id属性=刚才的名字，如
<h3 id="two">第二季介绍</h3> -
若是想要在末尾加一个超链接，使得点击后回到顶部，可以用空链接来实现
<a href="#">返回顶部</a>
-
-
注释标签
<!-- 注释内容 --> ，快捷键ctrl+/
特殊字符
- 空格：
写几个有几个空格 - 小于号：
<less than - 大于号：
>great than
表格标签
- 表格是用来展示数据的，不是用来布局页面的，表格时数据显示更规整，可读性很好。
- 表格的基本语法
<table> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> ... </tr> ... </table><tr></tr>和<td></td>都要写在<table></table>标签里面去。<tr></tr>定义表格中的行，有多个行时可以多个<tr></tr>标签。<td></td>，table data，定义单元格的内容。- 表格没有列这一说。
- 表头单元格标签：表格中的第一行，里面文本内容加粗居中显示。
<th>表头单元格的内容</th> - 表格属性，这些属性都要写在表格标签table里面去，和 table 写在一起。
- 整个表格靠近浏览器的对齐方式，不是单元格内文字的对齐方式，左侧、右侧、居中显示，
<table align="left"><table align="right"><table align="center">，默认为左侧 - 单元格边框，默认没有边框，
<table border="1"><table border="" - 单元格边沿与其中的内容之间的空白距离，默认1像素，但一般设为0.
<table cellpadding="0"> - 单元格与单元格之间的空白距离，默认两像素，但一般设为0。
<table cellspacing="0"> - 表格的宽度和高度:
<table width="400" height="500">
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250"> <!-- 第一行 --> <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr> <!-- 第二行 --> <tr><td>刘德华</td> <td>男</td> <td>56</td></tr> <!-- 第三行 --> <tr><td>张学友</td> <td>男</td> <td>58</td></tr> <!-- 第四行 --> <tr><td>郭富城</td> <td>男</td> <td>51</td></tr> <!-- 第五行 --> <tr><td>黎明</td> <td>男</td> <td>57</td></tr> </table> - 整个表格靠近浏览器的对齐方式，不是单元格内文字的对齐方式，左侧、右侧、居中显示，
-
表格结构标签：为了更好的表示表格的语义，
<thead></thead>标签表示表格的头部，<tbody></tbody>表示表格的主体区域。- 将全部的表头标签及其行的
<tr>标签放在<thead> </head>中，剩余的放在<tbody>中。 <thead></thead>中必须要有<tr></tr>标签。- 以上两个标签放在
<table></table>中的
<table> <thead> <tr> <th></th>... </tr> </thead> <tbody> <tr> <td></td>... </tr> ... </tbody> </table> - 将全部的表头标签及其行的
-
合并单元格
- 合并单元格的方式
- 跨行合并
rowspan="合并单元格个数" - 跨列合并
colspan="合并单元格个数"
- 跨行合并
- 目标单元格写在相对应的第一个单元格中，即跨行合并放在上面的单元格中，跨列合并放在左侧的单元格中。
- 合并单元格三部曲
- 确定跨行or跨列
- 找到目标单元格，写上 合并方式=合并单元格的数量，
<td rowspan="2"></td> - 删除多余的单元格
- 合并单元格的方式
列表标签
- 列表是用来布局的，整齐有序，在看到整齐有序的样式时可以使用列表
- 无序列表(极其重要。每天都在使用，像导航栏，没有顺序的都可以用无序列表)
<ul> <li>列表项的内容，文字、图像、音频 、 视频等都可以</li> <li>列表项的内容</li> ... </ul>- 各个列表项之间是没有顺序的的，是并列的。
<ul></ul>之间只能放<li></li>，不能放其他的文字和标签。（其实如果在<ul></ul>中放了其他的标签，也是会显示出来的，只是不是以无需列表的形式显示出来，而是按照之前普通的形式显示）- 而
<li></li>之间相当于一个容器，可以容纳所有元素，上面所提到的其他标签和文字都可以放在<li><li>中。 - 无序列表带有自己的样式属性，一般通过CSS来处理样式，但在使用过程中会将前面的小黑点去掉，在CSS中会学到。
- 使用情况，遇到下图中的情况时：排列整齐，相互之间没有顺序
- 有序列表（理解）
<ol> <li>列表项</li> <li>列表项</li> ... </ol>- 其他的要求同无序列表
- 自定义列表（像官网最下面中，上面有一个小标题，下面是解释和描述），定义列表的列表项前没有任何项目符号
<dl> <dt>名词1</dt> <dd>名词解释1</dd> <dd>名词解释2</dd> ... </dl>- 使用情况：下图这种情况时，一个名词，下面是对名词的各项解释。
- 使用情况：下图这种情况时，一个名词，下面是对名词的各项解释。
表单标签
在注册页面时使用，为了收集用户信息，跟用户进行交互。
组成：表单域、表单控件（表单元素））和提示信息。
- 表单域，实现用户信息的收集和传递，将用户信息传递给后台服务器，
暂时先不用会，在之后学习了服务器编程阶段会重新讲解<form action="要提交到的url地址" method="GET/POST" name="表单的名字"> </form>
表单控件（表单元素） - input输入表单元素：
<input type="属性值" name="表单名字，单选和复选按钮的表单元素要有相同的name" value="请输入用户名/男" checked="checked,常用于单选和多选按钮" maxlength="6" />- 单标签
- input属性
- type
- name
- value 规定Input元素的值，表示可以有哪些取值，但vlaue只会在文本框和密码框中显示，在按钮中是看不到效果的。主要是给后台人员使用的，value能让文本框中默认的显示一些内容。
- checked 默认一打开页面就被选中了，如注册页面的同意注册按钮，单选按钮和复选按钮可以设置checked 属性，当页面打开的时候就可以默认选中这个按钮
checked="checked" - maxlength 规定输入字段的最大长度
总结：name和vlaue是每个表单元素都有的属性，主要是给后台人员使用的
name 要求单选框和复选框要有相同的name值
checked属性主要针对单选按钮和复选按钮，主要左右一打开页面就要默认选中某个表单元素。
maxlength是用户在表单元素输入的最大字符数，一般较少使用，通常之后使用正则表达式来设置。 - input属性的使用场景
- 刚打开页面就默认显示几个文字：value属性,
<input type="text" value="请输入用户名" /> - 页面中的表单元素很多，区别不同的表单元素：name，
<input type="text" value="请输入用户名" name="uesrname"/> - 单选框和复选框的每个name都要一样
- 页面一打开就让某个单选或复选按钮时选定状态：checked,
<input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" vlaue="女" />女 - 如何让inpuut表单元素展示出不同的形态：type
- 刚打开页面就默认显示几个文字：value属性,
- type属性设置不同的属性值用来指定不同的控件类型，如文本字段、复选框、掩码后的文本控件、单选按钮、按钮等
- text：单行的文本框，用户可以在里面输入任何文字，默认宽度20字符
- password：密码框，定义密码字段，该字段中的字符被掩码，将输入的内容用…来表示
- radio：单选按钮，实现多选一
name时表单元素名字，单选按钮必须要有相同的名字name，才可以实现多选一，否则选择的时候会都能选上，同样，复选框也得要有相同的名字name - checkbox：复选框，可以实现多选
复选框要有相同的名字name - submit：提交按钮，把表单数据发送到服务器
- reset：清除按钮，把表单数据全部删除
- button：普通按钮，如免费注册发送验证码按钮，后期结合js搭配使用
- file：文件域，上传文件使用的
<form>
用户名<input type="text" name="username" value="请输入用户名" maxlength="25" /><br />
密码<input type="password" name="psw" /><br />
性别<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女<br />
爱好<input type="checkbox" name="hobby" checked="checked" />吃饭
<input type="checkbox" name="hobby" />睡觉
<input type="checkbox" name="hobby" />打豆豆<br />
<input type="submit" value="免费注册" />
<input type="reset" value="重新设置" />
<input type="button" value="发送验证码" /><br />
上传文件<input type="file" />
</form>
-
- select下拉表单元素
使用场景：在页面中有多个选项让用户选择，并要节约页面空间时。
在<option>中使用selected="selected"默认选定状态
<select> <option selected="selected">列表项1</option> <option>列表项2</option> <option>列表项3</option> ... </select>- textarea文本域元素，输入多行文本
- rows：显示的行数
- cols：每行中的字符数，但一般都通过CSS来设置样式
<form> 今日反馈： <tetxarea rows="显示的行数" cols="每行的文字个数"> 文本内容 </tetxarea> </form>
- select下拉表单元素
综合案例：注册页面
最常用的几个标签：
表格标签，可以让内容排列整齐，可以有多行多列
列表标签，内容比较整齐，但只有一列
表单标签
注意：同意注册的那一块用的是复选框checkbox，单选框是圆圈，复选框是方块。
查阅文档
百度：http://www.baidu.com
W3C：http://www.w3school.com.cn/
MDN：https://developer.mozilla.org/zh-CN/
标签小总结
- 独占一行的标签：标题标签
<h1>-<h6>、div标签<div></div>、 - 单标签有哪些：
<br /> <img src="url地址" /> 表单元素<input type="属性值" /> - 只有绝对路径的反斜杠是向右的
单、双标签、相对路径的反斜杠都是向左的 - HTML中不常用，一般在CSS中用的：
- 盒子：用来布局网页
<div></div>、<span></span> - 图像的样式
- 表格的属性
- 列表的样式
- 表单元素textarea文本域的行列数
- 盒子：用来布局网页
- 无序列表中的小黑点一般不显示，通过CSS将其设置。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
