尚硅谷前端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 引入外部的视频资源

尚硅谷前端HTML-CSS /HTML相关推荐

前端 | （九）尚品汇实操练习 | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
前端 | （十一）CSS3简介及基本语法（上） | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
前端 | （二）各种各样的常用标签 | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
【尚硅谷前端html+css】02_css
02_css 1.css简介 -层叠样式表 -网页实际上是好多层的结构,css为每一层设置样式,而最终我们看到的是最上面一层总之,css用来设置网页中元素的样式使用css修改元素的样式 ...
尚硅谷前端视频总结（二）
尚硅谷前端视频总结(二) 原文链接动画animation CSS animation 属性是 animation-name,animation-duration, animation-timing- ...
尚硅谷前端项目开发笔记
尚硅谷前端项目开发笔记 B站视频直达,这个项目亮点在于所有 API 请求都并非在组件内编写,而是在组件内使用this.$store.dispatch() 派发任务,再由 Vuex(actions.mu ...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结删除行内元 ...
尚硅谷前端框架vue语法(二)
一.class绑定(会动态改变的class需要用到class绑定) 写法:class="xxx" xxx可以是字符串.对象.数组. 字符串写法适用于:类名不确定,要动态获取. ...
Less学习笔记（尚硅谷前端less教程）
一.快速入门 Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量.Mixin.函数等特性,使CSS更易维护和扩展. Less可以运行在Node或浏览器端. Less编译工具: Koala ...

尚硅谷前端HTML-CSS /HTML

尚硅谷前端HTML-CSS/HTML

尚硅谷前端HTML-CSS /HTML相关推荐

最新文章

热门文章