【尚硅谷前端html+css】01_intoduce_html
01_intoduce
1、前言
客户端和服务端
软件分为两部分：
—客户端:用户通过客户端使用软件。
—服务器：负责远程处理业务逻辑。
服务器
开发的语言：java（主流）、python、C#、Node.js（前端重要）
客户端
客户端形式
-文字客户端：命令行来使用软件
-图形化界面：点击拖动等来使用软件C/S架构
-网页：访问网页来使用软件B/S架构（浏览器Browser）
网页的特点
网页优点：
-不需要安装
-无需更新（服务器直接更新，客户端打开网页即更新）
-跨平台（最重要：安不安装客户更不更新不关心，只关心成本）
网页中使用的语言：
-HTML、CSS、JavaScript
总结
前端主研究B/S架构
2、网页简史
W3C
万维网联盟规范
W#C标准：结构、表现、行为
**结构：**html（页面结构）
**表现：**css（元素样式，美化页面）
**行为：**JS（响应用户操作）
3、HTML
HTML
超文本标记语言
标签介绍
根标签：所有网页内容都应写进去子标签：在里面的标签,如是子标签;是的子标签；
<html>
<head>
<title>哈哈猜猜我在哪？？title>
head>
<body>
<h1>我是大标题h1>
<h2>我是小标题1h2>
<h2>我是小标题2h2>
<p>我是内容1p>
<p>我是内容2p>
<p>我是内容3p>
<p>我是内容4p>body>
body>
html>
自结束标签、
4、meta标签
meta标签主要用于设置一些网页中的元数据，元数据不是给用户看的
- charset 指定网页中的字符集
- name 指定的数据的名称-keywords
- content 指定的数据的内容（值）-keywords的值是HTML，css
几种情况
1.name=“keywords”
表示网页的关键字，可同时指定多个关键字，关键字中间用逗号隔开（比如百度搜索栏搜索关键字“购物”，name=‘购物’)
2.name=“description”
用于指定网站描述，网站的描述会显示在搜索引擎的搜索结果中
3.title标签
内容会作为搜索结果超链接显示的内容 百度一下，你就知道
4.http-equiv=“refresh”
将页面重定向到另一个网站，3表示3秒跳转到百度网站；
<meta http-equiv="refresh" content="3;url=https://www.baidu.com/">
乱码产生原因：字符集编码问题
5、语义标签
5.1、语义标签01
在网页中html专门用来负责网页的结构
所以在学习HTML的标签时，我们首先关注的是标签的语义，而不是他的样式
块元素
在页面中独占一行的元素成为块元素（block element）（标题标签、p、hgroup都是块元素）
行内标签
行内标签表示在页面中不会独占一行的标签（inline element），如em标签、strong标签、q
标题标签
h1-h6 一共有6级标题；直观看见是逐渐变小，但是我们只关注语义
从h1-h6重要性递减，h1最重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只有一个h1
一般情况下，标题标签只会用到h1-h3，其他很少用
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
hgroup标签
用来为标题分组，可以将一组相关的标题同时放入到hgroup里，叫做标题组
<hgroup>
<h1>回乡偶书二首h1>
<h2>其二h2>
hgroup>
P标签
p标签表示页面中的段落
p也是一个块元素
<p>在p标签中的内容表示一个段落p>
<p>在p标签中的内容表示一个段落p>
em标签
em标签表示语音语调的一个加重
<p>今天天气<em>真em>不错！p>
strong标签
strong标签表示强调，重要内容
你今天必须要完成作业
blockquote标签
blockquote表示一个长引用，表示某人说的话，块元素，换不换行都没用，都占一行
鲁迅说
<blockquote>这句话我从来都没说过！blockquote>
鲁迅说<blockquote>这句话我从来都没说过！blockquote>
q标签
q表示一个短引用，行内元素，换不换行都没用，页面上都不换行
子曰<q>学而时习之q>
子曰
<q>学而时习之q>
br标签
br标签表示换行
<br><br><br>
<br>nnnnnnnnnn呢
5.2、语义标签02
块元素(block element)
-在网页利用块元素中对页面进行布局
行内元素(inline element)
-
-主要用来包裹文字
-
-在快元素中放行内元素，不会在行内元素放块元素
-
-快元素啥都能放，但是p元素不能放任何块元素（段落不能放title）
浏览器在解析网页时，会自动对不符合规范的内容进行纠正
比如：
-
h1写在html外部
-
p标签中嵌套了快元素
-
根元素中出现除了body和head以外的子元素
-
…
-
（浏览器纠正不在源码纠正，在内存里面修正，通过检查可以看见）
如：源码：
hhhhha
网页解析时变成：
hhhhha
5.3、语义标签03-布局标签
布局标签（结构化语义标签）（header、main、footer、nav、aside、article）（div、span）
header 表示网页的头部，网站的顶部
main 表示网页主体部分（一个网页只有一个main）
footer 表示网页的底部
nav 表示网页中的导航
aside 表示和主体相关但不属于主体的其他内容（侧边栏）
article 表示网页里的文章
---------------------------------------------------------------------------------------------------------------
div 没有语义，就用来表示一个区块，目前来讲div还是主流布局元素
span 行内元素，没有语义，一般用于在网页中选中文字
6、列表
1.pencil
2.book
3.notebook
列表有三种：
1.有序列表ol
2.无序ul
3.定义列表dl
有序标签，使用 ol 来创建有序列表
使用li表示列表项（因为
- 标签在网页上不显示任何内容）
无序标签，使用 ul 来创建有序列表（用得多）
使用li表示列表项
------------但其实各个浏览器兼容不一样，所以一般不分有序无序，无序用得多----------------
定义列表，使用 dl 标签来创建定义列表（用得少）
dt表示定义内容
dd表示对内容解释说明
（以上都是块元素每个占一行）
（可以互相嵌套）
7、超链接简介
a标签定义超链接，只从一个页面跳转到其他页面，或者同页面的其他位置；
属性：
herf 指定跳转的目标路径
值可以是外部网站的地址
也可以是一个内部页面的地址
超链接也是行内元素，在a标签中可以嵌套除他自身以外的任何元素
<a href="https://www.baidu.com">baidua>
<br><br>
<a href="07.列表.html">超链接2a>
8、超链接其他用法
---------------如何实现在超链接跳转不是刷新当前页面，而是打开另一个页面----------------
target属性：用来指定超链接打开的位置（当前页面还是新页面）
可选值：
_self 默认值 在当前页面打开超链接
_blank 在一个新页面打开超链接
<a href="07.列表.html" target="_self">当前页面打开超链接1a>
<br><br>
<a href="07.列表.html " target="_blank">外部打开超链接2a>
基础知识：
1.可以将超链接herf=“#”, 这样点击超链接之后不会跳转到其他页面，而是可以转到页面的其他位置
herf="#"默认跳转顶部
herf="#bottom"默认跳转底部
在开发中可以吧#作为超链接占位符，问题是herf="#"默认跳转顶部
也可以使用herf="javascript:;"作为超链接占位符,它什么效果都没有
\2. id属性（唯一不重复）
-每一个标签都可以添加一个id属性
-id属性就是标签的标识
-同一个页面不能出现重复的id属性
-正常都是字母开头
解决的问题：
------------------如何使用超链接跳转当前页面的其他位置（步骤如下）----------------
1.herf=“#”
2.给标签注明属性id=“p3”
3.herf=“#p3”
<br><br>
<a href="#bottom" >去底部a>
<br><br>
<a href="#p3" >去第三段落a>
<p>1.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem non eius pariatur maiores ducimus laboriosam sed nam. Voluptates provident soluta ad consequatur quas porro dolorem. Cupiditate magnam eveniet earum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem non eius pariatur maiores ducimus laboriosam sed nam. Voluptates provident soluta ad consequatur quas porro dolorem. Cupiditate magnam eveniet earum.p>
<p>2.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem non eius pariatur maiores ducimus laboriosam sed nam. Voluptates provident soluta ad consequatur quas porro dolorem. Cupiditate magnam eveniet earum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem non eius pariatur maiores ducimus laboriosam sed nam. Voluptates provident soluta ad consequatur quas porro dolorem. Cupiditate magnam eveniet earum.p>
<p id="p3">3.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem non eius pariatur maiores ducimus laboriosam sed nam. Voluptates provident soluta ad consequatur quas porro dolorem. Cupiditate magnam eveniet earum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem non eius pariatur maiores ducimus laboriosam sed nam. Voluptates provident soluta ad consequatur quas porro dolorem. Cupiditate magnam eveniet earum.p>
<p>4.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem non eius pariatur maiores ducimus laboriosam sed nam. Voluptates provident soluta ad consequatur quas porro dolorem. Cupiditate magnam eveniet earum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem non eius pariatur maiores ducimus laboriosam sed nam. Voluptates provident soluta ad consequatur quas porro dolorem. Cupiditate magnam eveniet earum.p>
<p id="bottom" >5.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem non eius pariatur maiores ducimus laboriosam sed nam. Voluptates provident soluta ad consequatur quas porro dolorem. Cupiditate magnam eveniet earum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem non eius pariatur maiores ducimus laboriosam sed nam. Voluptates provident soluta ad consequatur quas porro dolorem. Cupiditate magnam eveniet earum.p>
<a href="#" >回到顶部a>
9、图片标签
图片标签用于在页面中引用外部图片
img标签
自结束标签
他其实属于替换元素（介于行内和块之间，具有两种元素特点）显示的是替换了img的外部图片
属性：
src 指定图片的路径（和超链接路径规则一样）
alt 图片描述，默认不显示 有些浏览器会图片加载不出来的时候显示alt内容
主要作用是搜索引擎会根据alt中的内容识别图片，如果不写alt则图片不会被搜索引擎引录
width宽度
height高度
-只修改一个另一个属性等比例缩小
-都改变，图片会按照写的，可能会变形
！！！
-pc端不建议修改图片大小，
-移动端，经常需要对图片缩放
图片格式：
jpg
颜色丰富 不支持透明效果 不支持动图
一般用来显示照片
gif
颜色少 支持简单透明效果 支持动图
颜色单一图片、动图
png
颜色丰富 支持复杂透明效果 不支持动图
颜色丰富 复杂透明图片（专为网页生
webp
谷歌推出专门为网页而生的，具备三者优点
缺点：老浏览器不兼容
base64
图片使用base64进行编码，将图片转换成字符，通过字符的形势引入图片
一般都是一些需要和网页同步加载的页面使用base64（其他都是再次向服务器发出请求）
网上搜可以转换base64
总结：
效果一样选小的
不一样选效果好的
<img src="./img/1.gif" alt="">
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.mfMlln2Y7etPhpk5kJDVQgHaNL?pid=ImgDet&rs=1" alt="">
10、内联框架
内联框架：（替换元素）
iframe标签 用于表示向当前页面中引入另一个页面
src 指定要引入网站的路径
width、height可以修改框架大小
frameborder 指定内联框架的边框（=0无边框，=1有边框）
<iframe src="http://www.baidu.com" frameborder="1">iframe>
<iframe src="11.图片标签.html" width="800" height="600" frameborder="0">iframe>
<iframe src="11.图片标签.html" width="800" height="600" frameborder="1">iframe>
11、音视频播放
<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls >audio>
<audio controls>
<sourse src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
<sourse src="">
<embed src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mp3">
audio>
<embed src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mp3">
<video controls>
<sourse src="">
<sourse src="">
<embed src="http://www.iqiyi.com/v_oe163h1824.html" type="audio/mp4">
video>