html&css(01)---html

Unit One: html&css(01)—html

1.进制

十进制
- 特点：满10进1
- 计数：0 1 2 3 4 5 6 7 8 9 ** ** 10
- 单位数字： 10个（0-9）
二进制
- 特点：满2进1
- 计数：0 1 ** ** 10 11 100 101 111 1000
- 单位数字： 2个（0-1）
八进制
- 特点：满8进1
- 计数：0 1 2 3 4 5 6 7 10 11 12… 17 ** ** 20
- 单位数字： 8个（0-7）
十六进制（一般显示一个2进制数字时，都会转换为16进制。）
- 特点：满16进1
- 计数：0 1 2 3 4 5 6 7 8 9 A B C D F ** ** 10 11 12 … 1a(=26) 1b 1c 1d
- 单位数字： 16个（0-F）
计算机基础
- 所有数据在计算机底层都是以二进制的形式保存。
- 可以将内存想象为一个有多个小格子组成的容器，每一个小格子可以存储一个1或0。
- 这一个小格子在内存中被称为1位（1bit）
- 8bit=1byte(字节)
  
  1024byte=1kb(千字节)
  
  1024kb = 1mb(兆字节)
  
  1024mb = 1gb(吉字节)
  
  1024gb = 1tb(特字节)

2.字符编码

编码
- 将字符转换为二进制码的过程为编码。
解码
- 将二进制码转换为字符的过程称为解码。
字符集（charset）
- 编码和解码所采用的规则称为字符集。
乱码
- 如果解码和编码所采用的字符集不同就会出现乱码。
常见的字符集
- ASCII:7位，128个字符。
- ISO88591:8位，256个字符。
- GB2312/GBK: 中国编码集
- UTF-8：Unicode编码，万国码。

3. 实体

在网页中编写的多个空格，默认情况会自动被浏览器解析为一个空格。

在html中有些时候，不能直接书写特殊符号。

比如，多个连续空格，字母两侧的大于和小于号。
如果我们需要在页面中书写这些特殊符号，则需要使用html中的实体（转义字符）
1. 实体语法：&实体名称
```
&nbsp; 空格
&gt; 大于号
&lt; 小于号
&copy; 版权符合
```
2. 实体查询网站：实体查询

4. meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看的。

主要属性：
- charset 指定网页的字符集
- name 指定数据的名称
  - description: 用于指定网站描述。
  - keywords: 表示网站的关键字。
- content 指定数据内容。
- title 作为搜索结果的超链接上的文字显示。
- http-equiv （见下方例子）过多久时间跳转。

    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    <meta name="description"
          content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

5.语义化标签

在网页中HTML专门用来负责网页的结构。所以在使用html标签时，应该关注的是标签的语义，而不是它的样式。
在页面中独占一行的元素为块元素（block element）
- 在网页中一般通过块元素进行布局。
在页面中不独占一行的元素为行内元素（inline element）
- 行内元素用来包裹文字。
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素。
- 块元素基本上什么都能放。
- p元素不能放任何块元素。
浏览器在解析网页时，会自动对网页不符合规范的内容进行修正。比如：
- 标签写在了根元素的外部。
- p元素中嵌套了块元素。
- 根元素中出现了除head和body以外的子元素。

标题标签<h1>~<h6>：
- h1~h6 一共六级标题。
- 重要性递减：h1最重要，h6最不重要。
- h1在网页中重要性仅此于title标签，一般情况下一个页面只会用一个h1。
- 一般情况下标签只会用到h1~h3,h4~h6很少用。
分组标签<hgroup>:
- hgroup可以将一组相关的标题同时放入到hgroup中。
段落标签<p>：
- p表示页面中的一个段落。
- p是一个块元素。
加重标签<em>：
- em标签表示语音语调的一个加重。
- em是一个行内元素。
强调标签<strong>：
- strong标签表示强调，重要内容！
引用标签<blockquote>&<q>：
- blockquote表示长引用。块元素。
- q表示短引用。行内元素。
换行标签<br>：
- br表示页面换行。

6. 结构化语义标签 Content sectioning

<header>

表示网页头部
<main>

表示网页的主题部分。（一个页面中只会有一个main。）
<footer>

表示网页底部。
<nav>

表示网页中的导航。
<aside>

表示和主题相关的侧边栏。
<article>

表示一个独立的文章。
<section>

表示一个独立的区块，表示上边的标签不能表示时使用。
<div>

没有语义，就用来表示一个区块，目前是我们主要布局元素。
<span>

行内元素，无语义，用于选中文字。

7.列表

html中可以创建3种列表：

有序列表
- <ol>: 用来创建有序列表。
- <li>:用来表示列表项。
无序列表
- <ul>: 用来创建有序列表。
- <li>:用来表示列表项。
定义列表
- <dl>: 创建定义列表。
- <dt>: 定义的词语。
- <dd>: 对内容进行解释说明。

8.超链接

超链接可以让我们从一个页面跳转到其他页面，或者当前页面的其他位置。

VS中:

Alt+Shift+上下方向键可以进行整行复制。

*+数字可以复制数字次标签。

lorem添加伪文本。

<a href="">
- 超链接是行内元素，在a标签中可以嵌套它自身外的任何元素。
- href 指定跳转的目标路径。
  - 值可以是一个外部网站的地址。
  - 也可以写一个内部页面的地址。
相对路径
- 当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径。
- 相对路径都会使用./或../开头。
  - ./表示当前文件所在的目录。
  - ../表示当前文件所在目录的上一级目录。
<a target="">
- <a target = "_blank">打开一个新的页面。
- <a target = "_self">默认值，在当前页面中打开超链接。
页面内部跳转
- <a href="#id">: 转到当前页面顶部。
- id属性
  - 每一个标签都可以添加一个id属性。
  - id属性是元素的唯一标识，不能重复，有大小写区别。
javascript:;在开发中可以作为href属性占位符，点击时什么都不会发生。

9.图片标签

图片标签用于向当前页眉引入一个外部图片。

<img src="" alt="" width="" height="">
- img标签是一个自结束标签。
- img属于替换元素（介于块和行内元素之间，不独占一行。）
- alt图片描述，图片无法显示时会显示。
  - 搜索引擎会根据alt搜索出图片。
- width 图片宽度。
  - 只修改一个，同时缩放。
  - 单位:px
- height 图片高度。
- 不建议修改图片大小，需要多大就选择多大。
- 移动端经常对图片进行大图缩小。
格式
- jpeg
  - 支持颜色比较丰富
  - 不支持透明
  - 不支持动图
  - 用来显示照片。
- gif
  - 支持颜色比较少
  - 支持透明
  - 支持动图
  - 颜色单一的图片，动图。
- png
  - 支持颜色丰富
  - 支持复杂透明
  - 不支持动图
  - 颜色丰富，复杂透明图片。（专为网页而生。）
- webp
  - 谷歌新推出的专门用来表示网页中的图片的格式。
  - 具有所有优点，文件还小。
  - 缺点：兼容性不好
- base64
  - 将图片使用base64来编码，可以将图片转换为字符，通过字符的形式来引入图片。
  - 一般都是和网页一起加载的图片才会使用。
  - 转换地址
原则：效果一样，用小的；效果不一样，先用效果好的。

10. 内联框架

用于向当前页面引入一个其他页面。

<iframe>
- src 指定引入的网页的路径。
- frameborder=0/1：0表示无边框，1表示有边框。默认为1。

11.音视频文件

音视频文件引入时，默认情况下不允许用户自己控制播放停止。

属性
- controls是否允许用户控制播放。
- autoplay是否允许用户自动播放。
  - 大部分浏览器不支持自动播放。
- loop是否循环播放。
- 除了src来指定，也可以用<source src="">来指定多个文件。
<audio src="" controls>
<video src="" controls>

兼容性

    <video controls>
        对不起，不支持视频播放。
        <source src="1">
        <source sre="2">
          
        <!-- 兼容IE8 -->
        <embed src="..." type="video/mp4" width="500" height="100">
    </video>

利用iframe引入视频网站视频。

<iframe src="//player.bilibili.com/player.html?aid=77217003&bvid=BV1XJ411X7Ud&cid=132017557&page=26" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="500" height="800"> </iframe>

PREVIOUSBasic Statistics(10)-Confidence Interval

NEXTBasic Statistics - (09) R[4] Sampling Distribution

html&css(01)---html

Unit One: html&css(01)—html

1.进制

计算机基础

2.字符编码

3. 实体

4. meta标签

5.语义化标签

标题标签`<h1>~<h6>`：

分组标签`<hgroup>`:

段落标签`<p>`：

加重标签`<em>`：

强调标签`<strong>`：

引用标签`<blockquote>`&`<q>`：

换行标签`<br>`：

6. 结构化语义标签 Content sectioning

`<header>`

`<main>`

`<footer>`

`<nav>`

`<aside>`

`<article>`

`<section>`

`<div>`

`<span>`

7.列表

8.超链接

`<a href="">`

`<a target="">`

9.图片标签

`<img src="" alt="" width="" height="">`

10. 内联框架

<`iframe`>

11.音视频文件

`<audio src="" controls>`

`<video src="" controls>`

Unit One: html&css(01)—html

1.进制

计算机基础

2.字符编码

3. 实体

4. meta标签

5.语义化标签

标题标签<h1>~<h6>：

分组标签<hgroup>:

段落标签<p>：

加重标签<em>：

强调标签<strong>：

引用标签<blockquote>&<q>：

换行标签<br>：

6. 结构化语义标签 Content sectioning

<header>

<main>

<footer>

<nav>

<aside>

<article>

<section>

<div>

<span>

7.列表

8.超链接

<a href="">

<a target="">

9.图片标签

<img src="" alt="" width="" height="">

10. 内联框架

<iframe>

11.音视频文件

<audio src="" controls>

<video src="" controls>

标题标签`<h1>~<h6>`：

分组标签`<hgroup>`:

段落标签`<p>`：

加重标签`<em>`：

强调标签`<strong>`：

引用标签`<blockquote>`&`<q>`：

换行标签`<br>`：

`<header>`

`<main>`

`<footer>`

`<nav>`

`<aside>`

`<article>`

`<section>`

`<div>`

`<span>`

`<a href="">`

`<a target="">`

`<img src="" alt="" width="" height="">`

<`iframe`>

`<audio src="" controls>`

`<video src="" controls>`