# html基础 - ## html中知识要点 - html中空格 - 不管在html元素中添加了多少空格或者换行，其连续的多个空格都会被替换为一个空格，块元素中的换行符会被取消，除非显式指定
- html中特殊符号： - 在html中，< > ' " 都是特殊的符号，其都是html语法的一部分，故而在文本中如果存在这些特殊字符，可以通过特殊的引用来表示该特殊字符 - 特殊的用来表示该类字符的表达式以&开头，以；结尾，具体如下 ```shell < 可以用 < (less than) > 可以用 > (greater than) " 可以用 " ' 可以用 ' & 可以用 & // 例如，可以在

中包含如下内容

This is content of element <p>!

// 其会显示如下内容 This is content of element

! ``` - html中评论： ```html ``` - html head: - head标签中的信息并不显示在html页面中，html中包含的是html页面的元信息 - head中可以包含如下信息： - title：该页面显示在title标签栏中的标题内容 - meta：meta标签用来定义元信息 - 通过meta元信息指定文档使用的字符集： ```html ``` - 通过meta元信息为页面指定作者和页面描述信息： ```html ``` - 为页面制定favicon图标： - 在index.html路径下防治ico图标 - 在head元素中添加如下标签 ```html - 向页面中添加css样式 - 用rel指定该link为stylesheet - 用href来指定css样式表的路径 ```html ``` - 向页面中添加script脚本 - 指定defer，可以在页面完成解析后再执行引入的js脚本 - 用src属性指定js脚本路径 ```html // 除了可以引入外部脚本外，还可以在script标签中加入 // js代码 ``` - 为文档指定语言信息 - 可以在html标签中制定lang属性来为文档指定使用的语言 ```html ``` - html body中的重要元素 - 强调某些单词 - em:通过em标签，通常会通过斜体的效果来加强某些单词 - strong：通过strong标签，通常会通过加粗的方式来强调某些单词 - 超链接(hyperlink) - 超链接语法如下，通常用于在不同的document之间进行跳转 - 可以通过title属性来为超链接添加一些信息，当鼠标hover时，添加信息将会以tooltip的形式显示 ```html link to baidu homepage! ``` - 通过hyperlink链接到文档的特定部分，而非是跳转到文档顶部 ```html link to baidu ele-id! ``` - 当想要下载链接到的资源而不是在浏览器中打开时，可以在hyperlink中制定download属性，并且为其赋值一个字符串用来表示文件名 ```html download file ``` - 描述性列表（description list） - dl可以为每一个列表项添加dt（description term）和dd（description definition） - 可以为同一个dt添加多个dd ```html

apple: fruit with red color!
banana: fruit with yellow color!; fruit with bar shape!

``` - 引用（quote） - 引用可以分为块级引用和内联引用 - blockquote ```html

quote content...

``` - q ```html

This is an inline quote: quote content...

``` - 缩写（abbr） - 缩写用来标注缩写，并且可以在title属性中指定全称，全称在hover时以tooltip的形式显示 ```html

HTML is used commonly in web area!

``` - 上标或下标（sub和sup） - sup标记用来处理上标，sub标记用来处理下标 ```html

water is H_2O

``` - 标记代码 - <code>用来表示通用的代码部分 - <pre>用来保持编辑器中的格式 - <kbd>用来表示命令行输入 - <samp>用来表示程序输出 - <var>用来代表变量 - html结构 - header - <header> - navigation bar - <nav> - main content - <main> - <main>标签中通常含有<section>,<div>,<article>等元素 - side bar - <aside>通常被放置在<main>中 - footer - <footer> - <hr> - <hr>会在页面中间创建一条横线，用来分割之前和之后的内容 ```html

Section A

Section B

``` - ## html中添加多媒体 - html中添加图片 - 在html页面中添加图片可以通过<img>元素来实现 - 可以为图片指定title属性，当鼠标hover时会通过tooltip显示信息 ```html Picture of Waifu

``` - <figure>和<figcaption> - <figure>可以为内容添加说明性文字 ```html

``` - html中添加video - 可以通过<video>来向html中嵌入video - 在video的tag中可以嵌套内容，当当前的浏览器不支持video tag时，会显示嵌套的内容 ```html

``` - 为<video>指定多个不同格式的视频源，让视频能够在不同浏览器平台都得到播放 ```html

``` - video的其他属性： - autoplay：页面加载时直接开始播放视频 - width/height：设置宽度和高度 - loop：视频播放完后循环播放 - muted：视频以静音的形式播放 - poster：在视频播放前，poster指定url的图片将会被显示 - preload：用来缓存文件 - “none”：不缓存文件 - “auto”：缓存文件 - “metadata”：只缓存元信息 - html中添加audio - 可以通过<audio>来添加音频数据 ```html

``` - html中添加字幕 ```html

- ## html中嵌入其他元素 - <iframe>元素的使用 - <iframe>通常用于向文本中嵌入其他文档或来源于其他网站的视频信息，其有如下属性 - allowfullscreen：如果存在该属性，iframe元素可以被全屏化 - src：用于指向想要嵌入元素的url - width/height：用于指定iframe元素的宽度和高度 - fallbackContent：如果当前浏览器不支持iframe，会显示fallbackContent中的内容 - sandbox：沙箱，安全性更加高 ```html ``` - 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的其他页面中 - ## 响应式图像 - 为不同的屏幕宽度选用不同的分辨率图片 ```html img...

``` - 为不同物理像素/逻辑像素值的设备来选用不同分辨率图片 ```html img...

``` - 为不同屏幕宽度的设备选用不同的图片 ```html

``` - ## html表格 - <table>：表示table标签 - <th>：表示表格的行、列标题 - <tr>：表示表格的行 - <td>：表示表格的单元行 ```html

Name	Age
Touma	17
Ogiso	17

``` - 可以通过rowspan和colspan属性来控制单元格跨行和列的数目 ```html

Waifu
Japan	France
Touma	Charles
waifu
Kazusa	Japan
Kazusa	Austria

``` - colgroup和col - <colgroup>：col的容器 - <col>：col通常用来指定表格中列的样式 ```html

Name	Age
Touma	17

```