html:超文本标记语言
编辑器:例如“记事本”,“VScode”等。
html是w3c组织定义的语言标准,是用于描述页面结构的语言
css是w3c定义的语言标准,用于描述页面展示的语言
ALT+shift+↓ 表示复制并向下粘贴当前选中区域
ALT+shift+f整理代码
关键词
web:互联网
w3c:万维网联盟(非营利性的组织,w3.org。为互联网提供各种标准)。由于w3c是全英文,平时查询可以去MDN
XML:可扩展性标记语言(用于定义文档结构)
lorem段落检测
浏览器
shell:外壳
core:内核(JS执行引擎 渲染引擎)
IE:Trident
Firfox:Gecko
Chrome:Webkit / Bliink
Safari:Webkit(苹果与谷歌共同开发)
Opera:Presto / Blink
注释
注释为代码的阅读者提供帮助,注释不参与运行。快捷键为"ctrl+/"
元素(标签、标记)
文本元素
根标签,一个html文件中只能有一个(lang="en"告诉引擎爬虫,我们的网页是关于什么内容);
、为结构化标签h:h1h6(一级标题六级标题)
p:段落
span:无语义,没有语义仅用于设置样式
pre:预格式化文本元素,在pre元素内部出现的内容会按照源代码格式显示在页面中。该元素通常在网页中显示一些代码。
code:显示代码时通常外面套code元素,code表示代码区域。
实体字符:通常用于在页面中显示一些特殊符号,例如:小于号“<” 大于号“>” 空格“ ” 版权符号“©” 分数(以3/4为例)“¾” &“&”回车(换行)"
"水平线(水平分隔线)"
"
a:超链接。。href属性通常表示跳转地址,id属性,为全局属性,表示元素在文档中的唯一编号。target属性,表示跳转窗口位置(_self:在当前页面窗口打开,默认值。_blank:在新窗口中打开)
发邮件→a元素可以实现发邮件
strong:字体加粗
em:斜体
del:废除(中划线,划去元素中定义的内容)
address:地址(格式特点,独占一行,斜体)
div:容器,默认换行
元素=其实标记+结束标记+元素内容+元素属性。有些元素没有结束标记,叫做空元素
属性=属性名+属性值
属性的分类:
局部属性:某些元素特有的属性
全局属性:所有元素通用
图片属性
img元素:image缩写,空元素。src属性,source缩写,表示资源地址。alt属性,当图片资源失效时,将使用该属性的文字替代图片。title属性,图片提示,当鼠标光标放在图片上时会出现title中的内容
map元素:将图片模块化,通过area属性针对某个部分设置超链接
figure(指代、定义元素):通常用来把图片、图片标题、描述包裹起来。figcaption是figure元素的子元素,用于包裹标题。
视频 音频属性
video:视频。src属性,表示资源地址。controls属性,控制控件的显示,取值只能为controls(某些属性只有两种状态,即写或者不写。这种属性叫做布尔属性,写了便为真,不写为假。取值只能取自身,也可以简写,即只写出该属性单词不取值,同样默认为真)。autoplay(自动播放)、muted(静音播放)、loop(循环播放)同样为布尔属性。(为了解决不同浏览器对视频的兼容性问题,通常不将src直接写在video中,而是写在video下的一个子元素source中,并且同时写入两个不同格式的视频,例如
audio:音频,和视频用法几乎一样
列表元素
有序列表
ol:排序列表
li(ol的子元素):列表下。type为li的属性,当其取值为1时,所排的序列是以阿拉伯数字(默认序号)为序号的;如果取值为i则是以罗马数字为序号;如果取值为a则是以英文字母为序号;如果取值为A则是以大写英文字母为序号排序。reversed属性(为布尔属性),对文本语义倒着排序
无序列表
把ol换为ul,其他的不变。我序列表常用于制作菜单或新闻列表 3.定义列表(通常用于一些术语的定义)
dl:定义列表
dt:定义标题
dd:术语的描述
- 标题
-
正文
表单标签
method表示发送方式可取值为“get”或“post”;
action表示发送地址;
表示输入框;
表示密码框;
name为文件名(没有name的话提交不会成功)
表示提交,
value=""可以修改提交框的样式(默认情况下
为“提交”二字);当type值变为checkbox时表示可多选
这是个选择题:
A.选项
checked="checked">
B.选项
C.选项
只有name值相同时(确定三个选项为同一道题的
选项)该题才是真正意义上的选择题(单选题);
value表示该选项代表的数据值,只有给每有一个
数据值赋值,答案才能提交成
功;checked="checked"表示默认选中该选项
提交值为“name值=161/815/...”(没有value的情况下);
如果option中定义的有value值,则提交结果
为“value值=161/815/...”
容器元素(该元素代表一块区域,内部用于放置其他元素)
div:表示容器(无语义)。
语义化容器元素
header:通常用于表示页头,也可以用于表示文章的头部
footer:通常用于表示页脚,也可以用于表示文章的尾部
article:通常用于表示整篇文章
section:通常用于表示
aside:通常用于表示附加信息(或者说是侧边栏)
元素包含关系
容器元素可以包含任何元素
a元素几乎可以包含任何元素
某些元素有固定的子元素(ul>li,ol>li,dl、dd)
标题元素和段落元素不能相互嵌套,并且不能包含容器元素
i元素,默认斜体,表示以特殊音调阅读,但因icon开头为i所以该元素实际上通常用来表示图片
strong 默认加粗字体 表示重要的不能忽视的内容
em 默认斜体字体 表示强调的内容
del表示错误的内容;s表示过期的内容
活动价格:9.8,原价:998
活动价格:9.8,原价:998
有序列表
type后的引号中可以填“1”表示按阿拉伯数字排序、“a”表示按照英文小写字母排序、“A”表示按照大写英文字母排序、“i”表示按照小写罗马数字排序、“I”表示按照大写罗马数字排序,默认情况下为“1”。reversed="reversed"表示倒序排列。star="n",表示从该种排列方式的第n个序号开始排列
无序列表
type后的引号中可以填“disc”表示实心圆、“square”表示方块、“circle”表示圆圈
元素的嵌套(元素之间不能相互嵌套):
元素;父元素、子元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素的两个元素)
标准的文档结构
:文档声明,告诉浏览器当前使用的HTML标准是HTML5。(不写文档声明将时浏览器进入怪异渲染模式)
根元素:一个页面最多只能有一个,并且该元素是其他元素的父元素或祖先元素(HTML5版本中没有强制要求书写该元素)
lang属性:language,全局属性,表示该元素内部使用的文字是哪一种自然语言书写而成的
charset:
网页标题,也可以做为页面元素中的提示文本
文档体,页面上所有要参与显示的内容都应该放在文档体中
语义化
每个HTML元素都有具体含义(如:a元素表示超链接,p元素表示段落)
所有元素与展示效果无关,元素展示到页面中的效果应该由CSS决定(浏览器带有默认CSS样式,所以每个元素带有一些默认样式)
选择什么元素,取决于内容含义。而不是显示出的效果
语义化的目的:为了搜索引擎优化(SEO)、为了让浏览器理解网页
路径的写法
(站外资源用绝对路径)绝对路径书写格式:协议名://主机名:端口号/路径。当跳转目标和当前页面协议相同时可以省略协议
(站内资源用相对路径)相对路径书写格式:以./开头,"./"表示当前资源所在的目录,可以书写../表示返回上一级目录。相对路径中./可以省略掉