记篇笔记(Html)

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元素可以实现拨打电话

发邮件→a元素可以实现发邮件

→a元素可以通过javascript运行一些代码

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

有序列表

     

             

  1.          

  2.          

  3.          

  4.      

type后的引号中可以填“1”表示按阿拉伯数字排序、“a”表示按照英文小写字母排序、“A”表示按照大写英文字母排序、“i”表示按照小写罗马数字排序、“I”表示按照大写罗马数字排序,默认情况下为“1”。reversed="reversed"表示倒序排列。star="n",表示从该种排列方式的第n个序号开始排列

无序列表

               

  •            

  •            

  •            

  •            

  •        

type后的引号中可以填“disc”表示实心圆、“square”表示方块、“circle”表示圆圈

元素的嵌套(元素之间不能相互嵌套):

元素;父元素、子元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素的两个元素)

标准的文档结构

:文档声明,告诉浏览器当前使用的HTML标准是HTML5。(不写文档声明将时浏览器进入怪异渲染模式)

根元素:一个页面最多只能有一个,并且该元素是其他元素的父元素或祖先元素(HTML5版本中没有强制要求书写该元素)

lang属性:language,全局属性,表示该元素内部使用的文字是哪一种自然语言书写而成的

     

:文档头,文档头内部的内容不会显示到页面上

:文档的元数据,填写附加信息

charset:的局部属性,用于指定网页内容编码

</p> <p>

网页标题,也可以做为页面元素中的提示文本

文档体,页面上所有要参与显示的内容都应该放在文档体中

语义化

每个HTML元素都有具体含义(如:a元素表示超链接,p元素表示段落)

所有元素与展示效果无关,元素展示到页面中的效果应该由CSS决定(浏览器带有默认CSS样式,所以每个元素带有一些默认样式)

选择什么元素,取决于内容含义。而不是显示出的效果

语义化的目的:为了搜索引擎优化(SEO)、为了让浏览器理解网页

路径的写法

(站外资源用绝对路径)绝对路径书写格式:协议名://主机名:端口号/路径。当跳转目标和当前页面协议相同时可以省略协议

(站内资源用相对路径)相对路径书写格式:以./开头,"./"表示当前资源所在的目录,可以书写../表示返回上一级目录。相对路径中./可以省略掉

你可能感兴趣的:(记篇笔记(Html))