day01
- 常见浏览器及其内核
- html语言是什么
- html怎么写
- html文档 怎么创建 ？ 固定模板？
- html标记 【文本标记，布局标记，图片】
常见浏览器以及内核(常识)
内核： 渲染引擎(css+html) js引擎(javascript)
常见：指的是自主研发内核的浏览器
| 浏览器 | 内核 |
|---|---|
| IE | Trident |
| Firefox（开源） | Gecko |
| Chrome | Webkit–>Blink |
| Safari | Webkit |
| Opera | Presto —>Blink |
HTML语言
**角色：**三大要素之一 负责体现网页上面有什么 (负责结构)
是什么？
HTML: Hyper超Text文本 Markup标记 Language 语言
Hyper:超 1. 超越文本 .txt 只写文字 插入图片，链接，文字(段落，标题) —> .html网页
2. 超文本协议
标记:
规范；死的 定义好的 w3c组织
图片 img
链接 a
段落 p
标题 h1~h6
双标记
<标记名字 属性1="属性值" 属性2="属性值">标记内容</标记名字>
开始标记 结束标记
<p>文本内容</p>
单标记
只开始 不结尾
<标记名称 属性1="属性值" 属性2="属性值">
<img src="" alt="">
src="图片地址"
alt="显示的文字"
标记(标签，元素，对象)
双截伦
html文件由多个标记嵌套形成的 —》网页，文档
创建网页文档
新建一个.html文件 (文件名字 一般小写字母，数字 下划线)
关于我们页面 about_us 或者 aboutUs
模板
包含一些对网页文档执行时的设置
快捷键: !+enter
1.文档声明
<!DOCTYPE html> h5的文档说明，必须放在.html第一句 不是个标记 意在告诉浏览器以什么版本解析文档
注释 ctrl+/
html注释
css注释 /**/
编程语言:
单行注释 //
多行注释 /**/
父子后代关系
嵌套: 父子关系
兄弟关系
平行
常见标签
一、文本相关的标记
1、加粗b or strong（no）
<b>文字</b> 没有语义的标记
<strong>文字</strong> 语义标记
2、斜体(no)
<i>斜体文字</i>没有语义的标记
<em>斜体文字</em> 语义标记
3、下划线(no)
<u>文字</u>没有语义的标记
<ins>文字</ins> 语义标记
中划线 (no)
<s></s>没有语义的标记
<del>￥99.00</del>语义标记
4、换行（no）
5、水平线（no）
<hr width="" color="" align="对齐方式 left /right /center" a="1">
width,color,align 自带属性 ，默认属性
a 自定义属性
6、字符实体
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w1xobG04-1615039068311)(media/常用字符编码.png)]
¥
¥人民币符号
7、段落标记
作用： 装 一行或者多行文字
<p>装一行或者多行文字<br>装 一行或者多行文字</p>
8、标题(语义标记)
<h1>标题名称</h1>
<h2>标题名称</h2>
结论:
- 一张网页有且只有一个h1 （权重太大）
- 建议h3以下少用
9、h5新增的高亮标记
<mark>高亮显示</mark>
二、布局相关的标记
大容器，大区域 division
<div>
图片+p+小盒子 +背景图 +音视频
</div>
小区域，小容器 span
<span>
几个字
</span>
特点：
- div 一行一个 独立成行 默认宽度占满父元素的宽度区域
- span 宽高取决于内容 并排
- p ,hi一行一个 独立成行 默认宽度占满父元素的宽度区域
三、图片标记
<img src="" alt="" title="">
src:
alt:
title:
src属性:
图片的路径，地址
绝对路径：1. 网络路径 2. 本地路径 (D:/a/b/.png)
相对路径(常用)
从你当前.html出发 去找那个图片
alt:
当图片加载失败的时候的文本提示
title：
鼠标移入图片时的文本框
width:宽度
height：高度
四、超链接标记
链接新页面
<a href="" target="">
文字/图片/div盒子链接
</a>
href="目标地址"
target="打开方式" _blank新页/_self 本页(默认值)
锚点链接
跳转到某一页面的某一个部分
- 抛下去一个唯一标识id=""
- 在a链接的 href="#id值"
base标记
必须设置到head里 作用：一次性设置a链接的打开方式和基础地址 —》减少冗余
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
