第一课

什么是CSS

执行HTML和CSS

版本和兼容性

第一个网页

注释

元素

元素嵌套

标准的文档结构

语义化

什么是语义化

为什么要语义化？

文本元素

span 【无语义】

pre

实体字符

a元素

href属性

target属性

路径写法

站内资源和站外资源

绝对资源与相对资源

图片元素

img元素

和a元素联用

和map元素联用

和figure

多媒体元素

video

audio

兼容性

第一课

什么是CSS

css是决定页面长什么样子

执行HTML和CSS

依靠浏览器、->HTML、CSS
1.shell：外壳
2.core：内核（JS执行引擎、渲染引擎）

现如今主流浏览器
IE：Trident
Firfox:Gecko
Chrome:Webkit/Blink
Safari:Webikt
Opera:Presto/Blink

版本和兼容性

HTML5、CSS3

第一个网页

Emmet插件：自动生成HTML代码片段

注释

注释为代码的阅读者提供帮助阅读,注释不参与运行
注释格式

<!---注释内容 --->

元素

<a href="htttp://www.duyiedu.com">而非开车上班的好看</a>

元素=起始标记 + 结束标记 + 元素内容 + 元素属性
属性 = 属性名 + 属性值
属性分类：
-局部属性：某些元素特有的属性
-全局属性：所有元素通用

<meta charset="UTF-8">

有些元素没有结束标记，这样的元素叫做：空元素
空元素的两种写法：
1.<meta charset="UTF-8">
2.<meta charset="UTF-8"/>加/表示闭合，现在可以不写

元素嵌套

元素不能相互嵌套

父元素，子元素，祖先元素，后代元素，兄弟元素（拥有同一个父元素的两个元素）

标准的文档结构

HTML:页面、HTML文档

<!DOCTYPE html>

文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5.
不写文档声明将导致浏览器进入怪异渲染模式。

<html lang="en">
</html>

根元素，一个页面只可以有一个
可以不写
lang属性：language,全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。

官方简体中文

<head> </head>

文档头，文档头内部的内容不会显示在页面上。

<meta>

文档元数据：附加信息
charset：指定网页内容编码。
计算机中低电压（0~2v） 0.
计算机中只能存储数字。
该字典叫做字符编码

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

适配手机端

<title>Document</title>

显示网页标题

语义化

什么是语义化

每一个HTML元素都有具体的含义
a元素：超链接
p元素：段落
h1元素：一级标题
所有元素与展示效果无关
元素展示到页面中的效果，应该由CSS决定的
因为浏览器带有默认的CSS样式，每个浏览器都有自己的默认样式。

重要：选择什么元素，取决于内容的含义，而不是显示出的效果

为什么要语义化？

为了搜索引擎优化（SEQ)

搜索引擎：百度、搜搜、Bing、Google

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码。

为了让浏览器理解网页

阅读模式、语音模式

文本元素

HTML5支持的元素：HTML5元素周期表、

h

h1~h6：表示一级标题到六级标题

可以通过以下方式实现

h$*6>{$级标题}

p

段落，paragraphs

lorem 乱数假文，没有实际意义。

p*6>lorem

可在lorem后添加数字，数字代表单词数量。

span 【无语义】

没有语义，仅用于设置样式

某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）行级元素不会独占一行，块级元素会独占一行。
到了HTML5已经弃用这种说法。

pre

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时会被折叠为一个空格。

例外：在pre元素中的内容不会出现空白折叠

在pre元素内部出现的内容，会按照源代码格式显示到网页上

该元素通常用于网页中显示一些代码

pre元素功能本质：它有一个默认的css属性。

tab可以加缩进，shift+tab可以减缩进。

显示代码时，通常外面套code元素，code代表代码区域。

实体字符

实体字符，HTML Entity

实体字符通常用于在页面中显示一些特殊符号。

&单词；
&#数字；

小于
<
大于
>
空格
（一个空格）
版权符号
©
&符号
&

a元素

超链接

href属性

引用通常用于跳转页面

跳转地址
跳转到某个锚点
目录

a[href="chapter$]*6>{章节$}

((h2[id="chapter$"]>{章节$})+p>lorem1000)*6

功能链接
点击后触发某个功能

执行js代码 javascript:
发送邮件,mailto:
要求用户计算机上安装有邮件发送软件：exchange
拨号 tel:
要求用户计算机上安装有拨号软件或使用的是移动端访问

id属性：全局属性，表示元素在文档中的唯一元素

target属性

表示跳转窗口位置

target的取值：

_self:在当前页面窗口的打开，
_blank：在新窗口打开。

路径写法

站内资源和站外资源

站内资源：当前网站的资源
站外资源：非当前网站的资源

绝对资源与相对资源

站内资源：相对路径

站外资源：绝对路径

绝对路径

协议名：//主机名：端口号/路径
schema://host:port/path

协议名：HTTP、HTTPS、file
主机名：域名、IP地址
端口号：如果协议是http协议，默认端口号80；如果协议是https协议，默认端口号443
当跳转目标与当前页面协议相同，可以省略协议

相对路径
以./开头，表示当前资源所在的目录
可以书写../表示返回上一级资源所在的目录

图片元素

img元素

image缩写，空元素
src属性：source
alt属性：当图片资源失效时，将使用该属性的文字替代图片

和a元素联用

和map元素联用

map:地图
map的子元素：area

和figure

指代、定义、通常用于把图片、图片标描述包裹起来
子元素：figcaption 表示指代的标题加给标题

多媒体元素

video 视频
audio 音频

video

controls:控制控件的显示，取值只能为controls
某些属性，只有两种状态：1. 不写 2. 取值为属性名，这种属性叫做布尔属性
布尔属性在HTML5中，可以不用书写属性值
autoplay：布尔属性，自动播放
muted：布尔属性，静音播放

audio

兼容性
旧版本浏览器不支持这两个元素
标不同的浏览器支持的音视频格式可能不一致
MP4 webm
相对路径中可以把./省略

代码：index.h

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 超链接 --><a href="htttp://www.duyiedu.com"title="有限公司">大概有</a><h1 title="有限公司">第一个网页</h1><h2>二级标题</h2><h3>三级文本</h3><h4>四级文本</h4><h5>五级文本</h5><h6>六级文本</h6>      <img src=""><a href="javascript:alert('你好！')">弹出：你好！</a><a href="mailto:"></a><a href="./text.html">进入</a><figure><a target="_blank" href="https://www.bilibili.com/anime/?spm_id_from=333.1007.0.0"><img usemap="#dmMap" src="./taiyang.jpg" alt="这是一张动漫的宣传海报"></a><figcaption><h2>太阳系</h2></figcaption> <p>太阳系（英文：Solar system）是一个以太阳为中心，受太阳引力约束在一起的天体系统，包括太阳、行星及其卫星、矮行星、小行星、彗星和行星际物质。 [1]  太阳系位于距银河系中心大约2.4~2.7万光年的位置（银河系的恒星数量约在1000亿到4000亿之间，太阳只是其中之一 [2]  ）。太阳以220千米/秒的速度绕银心运动，大约2.5亿年绕行一周，地球气候及整体自然界也因此发生2.5亿年的周期性变化。太阳运行的方向基本上是朝向织女座，靠近武仙座的方向。 [3] 截至2019年10月，太阳系包括太阳、8个行星、近500个卫星和至少120万个小行星 [4]  ，还有一些矮行星和彗星。若以海王星轨道作为太阳系边界，则太阳系直径为60个天文单位，即约90亿千米。若以日球层为界，则太阳距太阳系边界可达100个天文单位（最薄处）。若以奥尔特云为界，则太阳系直径可能有20万天文单位。 [5] 太阳系的形成大约始于46亿年前一个巨型星际分子云的引力坍缩。 [6]  太阳系内大部分的质量都集中于太阳，余下的天体中，质量最大的是木星。八大行星逆时针围绕太阳公转。此外还有较小的天体位于木星与火星之间的小行星带。柯伊伯带和奥尔特云也存在大量的小天体。还有很多卫星绕转在行星或者小天体周围。小行星带外侧的每颗行星都有行星环。</p></figure><map name="dmMap"><area shape="circle" coords="433,226,87" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank"><area shape="rect" coords="350,300,450,400" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank"></map><video controls autoplat muted src=""></video><audio src="./dmt/tfr.mp3" controls></audio></body>
</html>

WEB基础学习笔记01相关推荐

Java web基础学习笔记
1.xml概述 1.1xml:xml一种数据存储格式,这种数据存储格式在存储数据内容的同时,还能够保存数据之间的关系 1.2xml保存数据的方法:xml利用标签来保存数据的内容,利用标签之间的嵌套关系 ...
Spark基础学习笔记01：初步了解Spark
文章目录零.本讲学习目标一.大数据开发总体架构二.Spark简介三.Spark发展史四.Spark特点 (一)快速 (二)易用 (三)通用 (四)随处运行 (五)代码简洁 1.采用MR实现词 ...
Web前端学习笔记01：Web标准_HTML_lang_字符集_HTML标签的语义化
文章目录 1认识WEB 1.1 认识网页总结 1.2 浏览器(显示代码) 1.2.1 查看浏览器占有的市场份额 1.2.2 常见浏览器内核(了解) 1.3 Web标准(重点) 1.3.1 为什么要遵 ...
深度学习-计算机视觉-基础学习笔记-01
图像分类的思想:收集大量已知图像数据并带有正确的标签,将以往通过一个函数传入一张图片并返回图片的类型的这个思想转变成,通过俩个函数,第一个函数传入大量的图片并通过该函数训练返回一个模型,该模型通过训练 ...
MATLAB基础学习笔记01：初探MATLAB世界
文章目录一.安装MATLAB2016 (一)下载MATLAB2016 (二)安装MATLAB2016 二.启动MATLAB2016 --解决远程桌面启动报错的问题三.变量操作 (一)给变量赋值 ( ...
Spring Boot基础学习笔记01：Spring Boot入门程序
文章目录零.学习目标 1.了解Spring Boot框架的优点 2.掌握使用Maven方式构建Spring Boot项目 3.掌握使用Spring Initializr方式构建Spring Boot ...
JSP常用标记——（web基础学习笔记）
include指令标记语法: <%@ include file="文件的URL" %> 目的:在jsp页面内某处整体静态嵌入一个文件.include指令可以实现代码的 ...
Java中执行存储过程和函数(web基础学习笔记十四)
一.概述如果想要执行存储过程,我们应该使用 CallableStatement 接口. CallableStatement 接口继承自PreparedStatement 接口.所以CallableS ...
WEB前端学习笔记01利用纯CSS书写二级水平导航菜单
先放效果图: 将鼠标放置在对应一级导航处,即显示二级导航栏 HTML部分代码: <!DOCTYPE html> <html><head><meta chars ...

WEB基础学习笔记01

第一课

什么是CSS

执行HTML和CSS

版本和兼容性

第一个网页

注释

元素

元素嵌套

标准的文档结构

语义化

什么是语义化

为什么要语义化？

文本元素

h

p

span 【无语义】

pre

实体字符

a元素

href属性

target属性

路径写法

站内资源和站外资源

绝对资源与相对资源

图片元素

img元素

和a元素联用

和map元素联用

和figure

多媒体元素

video

audio

兼容性

WEB基础学习笔记01相关推荐

最新文章

热门文章