这周主要学HTML 写个静态百度页面 看懂DOM
写好文件想运行 option+b
<h1>这不是一个标题<h1>
<p>这不是一个段落<p>
1.网页
1.网页 指在因特网上根据一定的规则，用HTML等制作的用于展示特定内容相关的网页集合
2.
1.2 HTMl指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言
<jpg==“logo.logoing.jpg”>
1.3网页组成
网页是由图片、链接、文字、声音、视频等元素组成，其实就是一个html文件后缀
2.常用浏览器
常用的浏览器IE、火狐（Firefox)、Chrome、Safari和Opera等
浏览器内核：浏览 渲染
IE Trident IE、猎豹安全、360浏览器、百度浏览器
firefox Gecko 火狐浏览器内核
safari Webkit 苹果浏览器内核
Chrome Blink Chrome浏览器内核
3.Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合
3.1浏览器不同，它们显示页面或者排版就有些差异
遵循标准可以
3.2Web的标准主要包括结构、表现和行为三方面
1结构 现阶段主要是HTML（骨骼）
2表现 主要指的是CSS（皮囊）
3行为 现阶段主要是Javascript（行为）
1.1基本语法概括
1.HTML标签是由尖括号包括的标签
1.2双标签可以分为两类：包含关系和并列关系
2.1第一个HTML网页
<html>
<head>
<title>这不是一个页面</title>
</head>
<body>
断剑重铸之日，骑士归来之时。
</body>
</html>
3.
3.1<!DOCTYPE html>文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面
3.2 lang语言种类
<html lang=“zh-CN”> </html>
用来定义当前文档显示的语言
1.en定义语言为英文
2.zh-CN定义语言为中文（fr法语
3.3字符集
字符集（character set）是多个字符的集合。以便计算机能够识别和储存各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
<meta charset=“UTF-8”/>
UTF-8也被称为万国码
4.HTML常用标签
4.2<h1>标题标签</h1>
<h2>标题一共六级选</h2>
<h3>文字加粗一行显</h3>
<h4>由大到小依次减</h4>
<h5>从重到轻随之变</h5>
<h6>语法规范刷新见</h6>
4.3段落和换行标签（重要）
在网页中<p>标签用于定义段落
<p>这是一个段落标签</p> //paragraph
特点：文本在一个段落中会根据浏览器的大小自动变换大小
换行标签：<br /> //break
段落和段落间隙较大
换行虽然有间隙但总体还是一个自然段
4.4文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要
<strong></strong>//加粗标签
或<b></b>//加粗标签
<em></em>或<i></i>//倾斜标签
<del></del>或<s></s>//删除线标签
<ins></ins>或<u></u>//下划线标签
4.5<div>和<span>标签//division。span范围
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
span小盒子只占一块 div占一行
4.6图像标签和路径（重点）
1.图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像//image
<img src=“图像URL”/>
src是<img>必须属性
alt替代文本
title提示文本
width
height
border
注意点：
1.图像标签可以拥有多个属性，必须写在标签名的后面
2.属性之间不分前后，标签名和属性、属性名之前要用空格隔开
3.属性采取键值对的格式即属性=“属性值”
4.8图像标签和路径
2.路径
（1）目录文件夹和根目录：实际工作中，我们的文件不能乱放
目录文件夹：就是普通文件夹，里面只不过存些素材
根目录：打开目录的最外层
（2）vscode中打开文件夹
路径可分为
1.相对路径：以引用文件所在位置为参考基础，而建立出的目录路径
图片相对于HTML页面的位置
2.绝对路径
下一级路径图片文件位于文件夹下一级 <img src=“images/baidu/gif”/>
上一级 <img src=“images../baidu/gif”/>
5.Study
1.<a></a>跳转标签标签 <a href="https://baidu.com">百度一下</a>
2.css文件与html同级 用link标签 <link rel=“stylesheet” href=“strengen.css”>可把标题色
3.块元素<div></div>独占一行
4.css中 color：颜色；
font-size:像素大小；
background-color:颜色；
*{
margin:0;/*外边距*/
padding:0;/*内边距*/
} 通配符 全选 清除默认样式
div{
background-color:颜色；
height:像素大小；
width：像素大小；
}
5.<ul></ul> 列表元素
可用ul>li*3回车之间开三个列表元素
ul{}在css中修改ul的状态
在css中ul{}修改ul状态
ul{
padding:像素大小；
list-style:none;/*清除默认点*2/
}
ul li{
}
6. .box span{}修改box中span元素样式
/* relative 相对定位 是相对于元素本身进行移动 */
/* absolute 绝对定位 是相对于有定位的父盒子进行移动 */
/* fixed 固定定位 相对于浏览器视口进行定位 */
/* 相对移动 相对对上向下移动20个像素 相对左向右移动100px*/
/* top与bottom同时存在 top不起作用 left与right同理*/
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
