HTML5学习笔记
|
概念 |
网页是构成网站的基本元素； 网站是相关网页的集合； 网页是构成网站的基本元素，他是由图片链接、文字、声音视频等元素组成；通常看到的网页以HTML为后缀，因此俗称HTML文件；
定义：HTML是超文本标记语言Hyper Text Markup Language，他是用来描述网页的一种语言； HTML不是一种编程语言，而是一种标记语言markup language； 标记语言有一套标记标签markup tag； 超文本有2层含义： 他可以加入图片声音动画、多媒体等内容（超越了文本限制）； 2、它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）；
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面； Web标准（重点） 主要构成包括3个方面： 结构（Structure）、表现（Presentation）行为（Behavior）；
Web标准提出的最佳方案：结构、样式、行为相分离； 简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中； 相比较而言，三者中结构最为重要；
|
||||||
|
基础 |
基本语法： HTML标签是由尖括号包围的关键词，如<html>； HTML标签通常是成对出现的叫双标签；第一个标签是开始标签，第二个是结束标签； 双标签：<head></head>；单标签：<br/>; 标签之间的关系有2种：包含关系（嵌套）、并列关系； HTML基本框架（骨架标签）： <html lang="en">//HTML标签，页面中最大的标签，也称为根标签 <head>//文档的头部，在head标签中，必须要设置的标签是title <title>标题</title>//文档的标题，让页面拥有一个属于自己的网页标题 </head> <body>//文档的主体，包含文档的所有内容，页面内容基本都放到body中 用VSCode创建的第一个HTML页面 </body> </html>
必写标签： <!DOCTYPE html>文档类型生命标签，必须位于文档第一行，不属于html； <html lang="en">或者zh-CN，表示文档语言是中文的还是英文的； 语言标签对文档内容本身没有什么作用，但是对浏览器和搜索引擎有指导意义； <meta charset="UTF-8">字符集为UTF-8（编码方式）；（不写可能乱码）
|
||||||
|
标签 |
标题标签<h1>一级标题</h1>作为标题使用， 一行显示，从h1-h6,重要性递减，大小递减； 段落标签<p></p>全称 paragraph段落间距比较大； 换行标签<br/> 全称 break换行仅仅是另起一样，没有段落那么大的段间距； 文本格式化标签：加粗、倾斜、删除线、下划线； <strong>加粗</strong><b>加粗</b> 推荐第一个，语义更加强烈 <em>倾斜</em><i>倾斜</i> 推荐第一个，语义更加强烈 <del>删除线</del><s>删除线</s> 推荐第一个，语义更加强烈 <ins>下划线</ins><u>下划线</u> 推荐第一个，语义更加强烈
<div>和<span>是没有语义的，他就是一个盒子，用来装内容，用来布局网页；
div是大盒子，单独占一行；span是小盒子，一行可以放多个；
图像标签（单标签）：<img src=”url”/> img的意思是image n src属性（img标签必须写一个）；用于指定图片的路径和文件名； n alt属性表示，图片显示不出来的时候，就显示的替换文本； n title属性表示，鼠标放到图片上时的提示信息； n height、width表示图片的高度和宽度（px）； n border属性表示为图片设定边框； 各个属性之间顺序部分先后，必须用空格隔开； 属性用键值对形式，值必须用双引号； <img src="111.webp" alt="图片替换文本" title="鼠标放上去的提示信息"> <img src="111.webp" height="30" alt="替换文本" title="提示信息" border="10" /> 超链接标签<a href=””></a>，a是anchor锚点； href属性为必写属性，表示链接的地址； target表示是在当前窗口打开_self，还是在新窗口打开_blank； <a href="http://baidu.com" target="_blank">超链接</a> 链接分为内部链接（本网站内的其他页面）和外部链接（外部网站）； #表示空链接； 下载链接：如果链接href是一个文件，就是一个下载链接； <a href="111.rar" >下载文件</a> 图片链接：将图片标签img放到a标签之间即可； <a href="http://baidu.com" target="_blank"><img src="111.webp" height="800"></a> 锚点链接：快速定位到当前页面的特定位置； <a href=”#two”>锚点链接</a> <h1 id=”two”>要跳转到的位置</h1> 注释标签<!-- --> 特殊字符： 空格；你 好<>¥
|
||||||
|
表格 |
table表示表格； tr表示行row，必须位于table内； td表示单元格table data必须位于tr内； th是表头单元格，必须位于tr内；（文字加粗、文字居中） align ="center"表格的对齐方式left、right、center； border表格边框1或””; cellpadding单元格内容和单元格边框间的距离； cellspacing表示各个单元格之间的举例；
<table align ="center" border="1" cellpadding="1" cellspacing="1" width="600" height="200"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th></tr> <tr> <td>刘德华</td> <td>男</td> <td>66</td></tr> <tr> <td>张学友</td> <td>男</td> <td>44</td></tr> </table> <thead>表示表头区域，放在table内，将表头行和单元格的内容放入； <tbody>表示表体区域，放在table内，将表体行和单元格内容放入； 跨行合并：rowspan=”合并单元格数量”，合并代码写到 最上面的单元格内； 跨列合并：colspan=”合并单元格数量”，合并代码写到最左侧的单元格内；
|