14 KiB
14 KiB
html基础
-
html中知识要点
- html中空格
- 不管在html元素中添加了多少空格或者换行，其连续的多个空格都会被替换为一个空格，块元素中的换行符会被取消，除非显式指定
- 不管在html元素中添加了多少空格或者换行，其连续的多个空格都会被替换为一个空格，块元素中的换行符会被取消，除非显式指定
- html中特殊符号：
- 在html中，< > ' " 都是特殊的符号，其都是html语法的一部分，故而在文本中如果存在这些特殊字符，可以通过特殊的引用来表示该特殊字符
- 特殊的用来表示该类字符的表达式以&开头，以；结尾，具体如下
< 可以用 < (less than) > 可以用 > (greater than) " 可以用 " ' 可以用 ' & 可以用 & // 例如，可以在<p>中包含如下内容 <p>This is content of element <p>!</p> // 其会显示如下内容 This is content of element <p>! - html中评论：
<!-- comment content --> - html head:
- head标签中的信息并不显示在html页面中，html中包含的是html页面的元信息
- head中可以包含如下信息：
- title：该页面显示在title标签栏中的标题内容
- meta：meta标签用来定义元信息
- 通过meta元信息指定文档使用的字符集：
<meta charset="utf-8">- 通过meta元信息为页面指定作者和页面描述信息：
<!-- name: 用来指定元信息元素的类型 content：用来指定元信息元素的内容 --> <meta name="author" content="Rikako Wu"> <meta name="description" content="information description"> - 为页面制定favicon图标：
- 在index.html路径下防治ico图标
- 在head元素中添加如下标签
<link rel="icon" href="favicon.ico" type="image/x-icon"> - 向页面中添加css样式
- 用rel指定该link为stylesheet
- 用href来指定css样式表的路径
<link rel="stylesheet" href="./main.css"> - 向页面中添加script脚本
- 指定defer，可以在页面完成解析后再执行引入的js脚本
- 用src属性指定js脚本路径
// 除了可以引入外部脚本外，还可以在script标签中加入 // js代码 <script src="./main.js" defer></script> - 为文档指定语言信息
- 可以在html标签中制定lang属性来为文档指定使用的语言
<html lang="en-US">
- html body中的重要元素
- 强调某些单词
- em:通过em标签，通常会通过斜体的效果来加强某些单词
- strong：通过strong标签，通常会通过加粗的方式来强调某些单词
- 超链接(hyperlink)
- 超链接语法如下，通常用于在不同的document之间进行跳转
- 可以通过title属性来为超链接添加一些信息，当鼠标hover时，添加信息将会以tooltip的形式显示
<a href="https://www.baidu.com" title="homepage for baidu">link to baidu homepage!</a>- 通过hyperlink链接到文档的特定部分，而非是跳转到文档顶部
<!-- 通过在URL之后添加#{元素id}，可以跳转到目标页面的id对应元素 # 如果想要在当前页面内完成跳转，可以省略URL --> <a href="https://www.baidu.com/#ele-id" title="link to baidu ele-id">link to baidu ele-id!</a>- 当想要下载链接到的资源而不是在浏览器中打开时，可以在hyperlink中制定download属性，并且为其赋值一个字符串用来表示文件名
<!-- 当通过download属性指定想要下载的文件时，需要满足同源策略，否则download属性失效 --> <a href="URL-TO-RESOURCE" download="file-name">download file</a> - 描述性列表（description list）
- dl可以为每一个列表项添加dt（description term）和dd（description definition）
- 可以为同一个dt添加多个dd
<dl>fruits <dt>apple</dt> <dd> fruit with red color! </dd> <dt>banana</dt> <dd> fruit with yellow color! </dd> <dd> fruit with bar shape! </dd> </dl> - 引用（quote）
- 引用可以分为块级引用和内联引用
- blockquote
<blockquote cite="resouce path"> quote content... </blockquote>- q
<p>This is an inline quote: <q cite="resource path"> quote content...</q></p> - 缩写（abbr）
- 缩写用来标注缩写，并且可以在title属性中指定全称，全称在hover时以tooltip的形式显示
<p><abbr title="hypertext markup language">HTML</abbr> is used commonly in web area!</p> - 上标或下标（sub和sup）
- sup标记用来处理上标，sub标记用来处理下标
<p>water is H<sub>2O</p> - 标记代码
- <code>用来表示通用的代码部分
- <pre>用来保持编辑器中的格式
- <kbd>用来表示命令行输入
- <samp>用来表示程序输出
- <var>用来代表变量
- 强调某些单词
- html结构
- header
- <header>
- navigation bar
- <nav>
- main content
- <main>
- <main>标签中通常含有<section>,<div>,<article>等元素
- <main>
- side bar
- <aside>通常被放置在<main>中
- footer
- <footer>
- header
- <hr>
- <hr>会在页面中间创建一条横线，用来分割之前和之后的内容
<div> Section A </div> <hr/> <div> Section B </div>
- html中空格
-
html中添加多媒体
- html中添加图片
- 在html页面中添加图片可以通过<img>元素来实现
- 可以为图片指定title属性，当鼠标hover时会通过tooltip显示信息
<!-- 可以为img指定一个描述性的文本，当img无法被加载（网络问题、资源不再存在）时，可以显示alt指定的文本 --> <img src="./img/waifu.png" alt="Picture of Waifu" width="300" height="200">- <figure>和<figcaption>
- <figure>可以为内容添加说明性文字
<figure> <img src="./img/waifu.jpg" alt="waifu"> <figcaption> Touma Kazusa in WA2 </figcaption> </figure>
- html中添加video
- 可以通过<video>来向html中嵌入video
- 在video的tag中可以嵌套内容，当当前的浏览器不支持video tag时，会显示嵌套的内容
<video src="waifu.mp4" controls> <p>Sorry, your broswer doesn't support <video> tag</video></p> </video>- 为<video>指定多个不同格式的视频源，让视频能够在不同浏览器平台都得到播放
<video controls> <!-- type属性通常用来指定视频文件的mime类型，浏览器可以通过type属性快速跳过不支持的视频类型 --> <source src="waifu.mp4" type="video/mp4"> <source src="waifu.webm" type="video/webm"> </video>- video的其他属性：
- autoplay：页面加载时直接开始播放视频
- width/height：设置宽度和高度
- loop：视频播放完后循环播放
- muted：视频以静音的形式播放
- poster：在视频播放前，poster指定url的图片将会被显示
- preload：用来缓存文件
- “none”：不缓存文件
- “auto”：缓存文件
- “metadata”：只缓存元信息
- html中添加audio
- 可以通过<audio>来添加音频数据
<audio controls> <source src="music.mp3" type="audio/mp3"> <source src="music.ogg" type="audio/ogg"> </audio> - html中添加字幕
<video controls> <source src="waifu.mp4" type="video/mp4"> <source src="waifu.webm" type="video/webm"> <!-- kind: 指定是subtitles, captions, descriptions src： 字幕文件路径 srclang：指定字幕的语言种类 label：指定标签，此处告诉用户是西班牙语字幕 --> <track title="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish"> </video> - html中添加图片
-
html中嵌入其他元素
- <iframe>元素的使用
- <iframe>通常用于向文本中嵌入其他文档或来源于其他网站的视频信息，其有如下属性
- allowfullscreen：如果存在该属性，iframe元素可以被全屏化
- src：用于指向想要嵌入元素的url
- width/height：用于指定iframe元素的宽度和高度
- fallbackContent：如果当前浏览器不支持iframe，会显示fallbackContent中的内容
- sandbox：沙箱，安全性更加高
<iframe src="https://bilibili/video/path" allowfullscreen width="600" height="400" sandbox> <!-- fallback content --> <p> Your broswer doesn't support <iframe>! </p> </iframe>- iframe安全
- sandbox是一个容器，在容器中的代码可以被正确的使用和测试，但是无法对容器外的其他部分造成任何伤害。
- 没有在sandbox中运行的内容可以运行js代码、提交表单、弹出窗口，会造成安全问题。故而，在使用sandbox时，应该使用没有参数的sandox属性，应用所有的安全约束
- 不要同时给予sandbox以allow-script和allow-same-origin权限，否则可以通过allow-same-origin绕过同源策略，并且通过allow-script运行js脚本关闭沙箱
- 通过X-Frame-Options的HTTP响应头字段，可以设置SAMEORIGIN或者DENY，当设置DENY时，当前页面无法被嵌入到其他页面的iframe中，如果设置为SAMEORIGIN，当前页面可以被嵌入到来自同一origin的其他页面中
- <iframe>通常用于向文本中嵌入其他文档或来源于其他网站的视频信息，其有如下属性
- <iframe>元素的使用
-
响应式图像
- 为不同的屏幕宽度选用不同的分辨率图片
<img srcset="img-480w.png 480w, img-600w.png 600w" sizes="(max-width:500px) 480px, 600px" src="img-480w.png" alt="img...">- 为不同物理像素/逻辑像素值的设备来选用不同分辨率图片
<img srcset="img-480w.png, img-720w.png 1.5x, img-960w.png 2x" src="img-480w.png" alt="img...">- 为不同屏幕宽度的设备选用不同的图片
<picture> <srouce media="(max-width:599px)" srcset="img-1.png"> <source media="(min-width:600px)" srcset="img-2.png"> <img src="img-1.png" alt="img..."> </picture> -
html表格
- <table>：表示table标签
- <th>：表示表格的行、列标题
- <tr>：表示表格的行
- <td>：表示表格的单元行
<table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Touma</td> <td>17</td> </tr> <tr> <td>Ogiso</td> <td>17</td> </tr> </table>- 可以通过rowspan和colspan属性来控制单元格跨行和列的数目
<table> <colgroup> <col style="background-color:pink"> </colgroup> <tr> <th colspan="2"> Waifu </th> </tr> <tr> <th>Japan</th> <th>France</th> </tr> <tr> <td>Touma</td> <td>Charles</td> </tr> <tr> <th colspan="2">waifu</th> </tr> <tr> <td rowspan="2">Kazusa</td> <td>Japan</td> </tr> <tr> <td>Austria</td> </tr> </table>- colgroup和col
- <colgroup>：col的容器
- <col>：col通常用来指定表格中列的样式
<table> <colgroup> <col> <col style="background-color:pink"> </colgroup> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Touma</td> <td>17</td> </tr> </table> - caption：添加描述性文本，描述性文本位于表格的正上方
<table> <caption>Waifu Table</caption> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Touma</td> <td>17</td> </tr> </table>- thead,tbody,tfoot
- thead通常用来标注表头的行，即<th>标签所在的行
- tfoot通常用来标注表尾信息，比如对上述内容之和的SUM统计
- tbody通常用来标注表格除thead和tfoot之外的其他信息
<table> <colgroup> <col> <col style="background-color:gray"> </colgroup> <caption>Cost Summary</caption> <thead> <tr> <th>Term 1</th> <th>Term 2</th> </tr> </thead> <tfoot style="font-weight:bold;font-size:1.2em;color:cyan"> <td>3</td> <td>5</td> </tfoot> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </tbody> </table> - 可以在td中嵌套table表格
<table> <thead> <tr> <th colspan="2" style="text-align:center">Waifu</th> </tr> </thead> <tbody> <tr> <td> <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Touma</td> <td>17</td> </tr> </table> </td> <td> <table> <tr> <th>City</th> <th>Job</th> </tr> <tr> <td>Tokyo</td> <td>Pianoist</td> </tr> </table> </td> </tr> </tbody> </table> - scope属性：在th标签中，具有scope属性，可以指明该th对应的是行标题、列标题、行组标题、列组标题，scope标签对应如下值：
- row
- col
- rowgroup
- colgroup
-
Web表单