尚硅谷前端HTML-CSS /HTML

尚硅谷前端HTML-CSS/HTML

软件分类
系统软件 应用软件 游戏软件
软件：客户端 服务器。
客户端
–文字客户端
–图形化界面 C/S
– 网页。 B/S
优点
不需要安装。无需更新 跨平台。
蒂姆 伯纳斯 李 : 万维网发明人。第一个服务器 第一个网站
— 浏览器 的问题：网页编写没有标准
1994–W3C 网页开发标准 W3C 规范 。主要阻碍【微软IE】

W3C:
一个网页 分为三部分:
结构 HTML 页面的结构
表现 CSS 页面元素的样式
行为JavaScript 响应用户的操作

HTML 超文本标记语言。在文本编辑器中写的叫文本。
word :不是文本 是富文本
标签
h标签 标题 p标签 段落。根标签。所有网页内容都要写在根标签里面。
head 头。你在head里面写的东西都是看不见的 是给浏览器看的 不是给用户看的 --> title 网页标题出现在标题栏。
body 网页中所有可见内容 都在 body中
自结束标签 和注释
自结束标签: < image > < image/ > < input > < input />
注释不可以嵌套

标签的属性。< font>
文档声明 doc_type 不区分大小写
进制。
编码。字符编码。
编码和解码采用的规则成为字符集。
字符集：ASCII 【美国】GBK【中国扩展】 ISO8859-1【欧洲标准】 UTF-8 GB2312【中国】
meta 标签设置网页字符集 避免乱码问题。< meta charset=“UTF-8”>
搜索引擎 会根据 title 中的主要内容 来判断 网页的主要内容 。

zeal :离线文档查看器 神器

VSCode ：
配置 liveServer 自动更新 显示到浏览器 即时刷新。 设置auto-Save

sgg-15 实体

网页中编写的多个空格 浏览器只解析为一个空格。
空格，> <, HTML中 。 实体【转义字符】。实体的语法
&实体名称;
空格 &nbsp ; &gt ; &lt ; [去掉空格] 实体专门表示特定符号
© &copy ;版权符号 查询实体: 【实体符号参考手册】

meta 标签
网页元数据 自结束标签
属性: name 数据名称
charset 字符集
content 数据内容 name 和content 对应 可以使用多个关键字 逗号隔开。
name="keywords” 关键词。 "description"描述 。
title 标签会作为搜索结果的超链接 的文字显示。
http-equiv=“refresh” content=“3;url=www.baidu.com”

语义化标签
h1~h6 标题标签 一般一个页面中 只有一个h1 一般只用h1～h3 不用h4～h6
每个标题标签独占一行 称为块元素 block element
p 标签表示一个段落。也是独占一行。块元素。
hgroup : 标签分组
em :语音语调加重 斜体。 并没有换行 行业元素 inline element
strong：加粗。强调重要性
blockquote ：缩进 引用效果 表示一个长引用 块元素。
q 行内元素 引用。 短引用。
br 换行
记事本编辑 默认 字符集是GB2312

块和行内
块元素 对网页的布局 影响。行业元素 包裹文字
一般会在 块元素中放行内元素
p元素中 一般不能放块元素。
浏览器解析网页时会对不符合规范的内容进行解析
比如：标签写在了根元素外部
p元素中嵌套了块元素
根元素中出现了body 和head 以外的子元素
影响浏览器性能 修正是否正确 未知。
开发者工具 Element 查看网页源码 【内存中的】

语义化标签 -2
header 网页头部
main 网页主体 一个网页只有一个
footer 网页的底部 某一部分的底部。 用的频率不高
nav ：表示网页中的导航
aside ：和主体相关 其他内容 侧边栏
article ：一个独立的文章
section 独立的区块 分区 分块。上面的区块不能表示的时候 用section 其他。
H5 新增的 用的不多。
div 没有语义，用来表示一个区块 。 主要布局元素 用来代表所有
span 是行内元素 没有任何语义 一般用于在网页中显示文字

sgg-19列表
list
有序列表 无序列表 定义列表
有序：ul标签来创建无序列表。li来表示列表项。

	<ul>
 		<li>结构</li>
 		<li>表现</li>
 		<li>行为</li>
 	</ul>

有序列表：从ul----> ol

	<ol>
 		<li>结构</li>
 		<li>表现</li>
 		<li>行为</li>
 	</ol>

定义列表: dl–>dt 下定义 dd 具体解释。

<dl>
    <dt>结构</dt>
    <dd>结构的解释说明</dd>
</dl>

ul 用的最多 dl 用得最少
列表之间可以互相嵌套

超链接
a 标签 href 行内元素 在 a标签中可以嵌套任何元素 。除了他本身。
可以写 外部网址 也可以写内部地址。
相对路径 / 绝对路径
超链接
当前页面不动 新建一个页面 target 属性：_self ：当前页面。_blank 在一个新的页面打开超链接
lorem 生成文本
超链接 回到顶部: href=“#”
去底部：去页面的任意位置 为标签加id：每个标签的唯一不重复。 属性值区分大小写。
href=“#id” 跳到id的元素。 锚点：想去哪里就去哪里【给元素指定id属性 唯一】
href=“#” 超链接点击跳到位置未知 。占位
href=“javascript:;” 作为href 的属性此时点击这个超链接什么都不会发生。

sgg-23 图片标签
引入一个外部的图片。<img=“”/>
src 属性。外部图片路径。 属于替换元素 介于行内元素和块元素之间。引入的不是img本身 而是img
alt 属性 对于图片的描述。 在图片无法加载时显示。 搜索引擎会根据alt 内容来识别 图片。
没有alt 属性搜索引擎 不会搜到
width 宽度 单位是像素px 只修改一个另一个会等比例变化 pc 端不建议修改图片的大小。
head 需要多大的图片就裁多大的。

图片的格式：
jpg 支持 颜色丰富 不支持 透明效果 不支持动图。用来表示照片
gif 支持颜色较少 支持简单透明 支持动图。
png 支持颜色丰富 支持简单透明 不支持动图 为网页而生 网页中用的最多
webp google 推出的表示网页中图片的格式。 兼容性不好 IE 老的浏览器 不支持。
效果一样 用小的 效果不一样用效果好的
图片用base64 编码 通过文字形式引入 图片需要和网页一起加载时用这种方式。图片加载速度很快 要求特别高

内联框架
iframe 用于向当前页面中引入其他页面。
border 边框。 用得不多？ 内联框架中的网页不会被搜索引擎所检索

音视频播放
audio 标签引入外部音频 不显示标签 src
controls 属性添加 :允许用户控制 不需要给值。
autoplay 音频文件自动播放 如果设置autoplay 大部分网站不会对音频自动播放。好的用户体验 IE 会自动播放。
loop :音乐是否循环播放。
IE8 不支持 。播放器的美观需要CSS+ JS 。 通过source 指定文件路径 < source src=“” >
这种方式支持的浏览器显示 播放器 不支持的浏览器显示 文字。可以同时指定多个 音频文件。
通过source 同时指定多个 优先使用第一个。 有效解决浏览器兼容问题。mp3+ogg
embed ：IE8 中引入 音频 需要指定width 和head

video 引入视频文件 source 引入资源。 source +src 。webm+mp4 多源。 type=“video/mp4” [兼容]
可以用iframe 引入外部的 视频资源