全栈开发起步html_1_笔记

1.HTML:

1.1 HTML: 超文本标记语言。

超文本：特殊的文本
标记：标签，元素

1.2 给浏览器用的

1.2.1 http: 超文本 传输 协议

2. meta: 元

。。。

3. 标签、属性、内容

标签：

<标签名 属性名1="属性值1" 属性名1="属性值1">
    内容
</标签名>

没有内容的标签简写
<标签名 /> ： <br /> <img /> <hr />

4.XML4个要求：可扩展标记语言

1. 只能有一个根节点
2. 合理嵌套

   hello

   wo

   rld
3. 属性要有双引号
4. 大小写敏感。 html是不敏感的

html是一种特殊的XML

5. html > (head ， body)

html中只有 head和body两个1级子标签

6. html5的文档头

html4有3中头信息。

1. 过渡的，transitional 通用的
2. 严格的strict： xhtml
3. 框架 frameset

---

1. 过渡到h5, 不合理嵌套时，自动解析。不写双引也可以。不区分大小写。
2. strict严格的，xhtml=xml+html.完全按照xml标准了。
3. 框架-- 一个框架包含多个子页面。
   top.html left.html main.html

–补： 字符编码：
UTF-8: 支持大多数语言
GBK/GB2312: 国标，中国中文
BIG5: 繁体中文
ISO-8859-1: 一般英语环境默认

7.meta标签：

1. 设置 charset=‘utf-8’ 字符编码
2. keywords: 关键词 用于爬虫收录
3. 缓存
4. 视口 viewport

8. title: 标题

1. 显示在 浏览器tab上
2. 收藏夹，默认名

9. body 标签：网页的主体

–补：计算机颜色：
红黄蓝 物理三原色
红绿蓝：RGB 计算机三原色。

写值方式：

1. #加上六个十六进制数
2. 常量值： red , …
3. rgb(255, 0, 0)
4. 色温，。。。不常用

特殊值：

    #000000: 黑色
    #FF0000: 红色 、 #F00
    #00FF00: 绿色   
    #0000FF: 蓝色
    #FFFFFF: 白色

属性：

1. bgcolor: 背景色
   style=“background-color: #FF00000;样式名：样式值;”
2. background: 背景图
   1. 背景图默认是循环的
   2. 默认图片大小

    style="background-image: url(aaa.jpg);
    	background-repeat: no-repeat;
		background-size:cover;
    "

#10 H1-H5
####h1:
font-size: 2em; // 1em 约等于 16px 2em=32px
font-weight: bold; // 加粗
display: block; // 块显示

所有的标签：分两类

1. 行级：一行
   1. inline
   2. inline-block：有宽高
2. 块级：前后换行

#11 font标签： 被淘汰

#12 特殊字符：转义字符

浏览器不认识手写的空格与换号

空格：    
换行：   <br />
大于：   &gt;
小于：   &lt;

13 div： 标准块级元素

仅是前后换行。
div: 默认是顶行， 如果没内容高度是0

14 p标签：段落

p也是块级元素， 上下外边距 1em。

• margin外边距

15 img 图片

属性：

1. src: 设置图片的资源地址，请求，路径
2. width: 100px; 宽
3. height: 100px; 高
4. alt： 图片资源访问不到时显示的文字
5. title: 悬停下控件上 【提示，填出层“popup”】

15-1 路径问题

1. 绝对路径： 以协议开头完整的路径

   1. http://wwww…aaa.jpg
   2. file:///d:/aaa.jpg

2. 相对路径： 找参照物

   1. 直接写， 相对于当前目录
   2. ./开头 相对于当前目录
   3. / 开头 相对于网址根目录 http://www.baidu.com:80/
   4. …/ 向上一层目录

3. base64二进制方式：

4. // 当前协议//

15-2图片与文字

1. align:
   1. left/right/ 图片文字环绕
   2. center==middle ： 短文字垂直居中

–align用于水平left/center/right
–vertical-align: top/middle/bottom

16.hr 横线

属性：
width: 宽
size: 粗细
align: 水平左中右
color: 线的颜色

---

视频资料留言索取或QQ34340237 , 验证信息

---