记篇笔记(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"告诉引擎爬虫,我们的网页是关于什么内容);<head></head>、<body></body>为结构化标签

h:h1h6(一级标题六级标题)

p:段落

span:无语义,没有语义仅用于设置样式

pre:预格式化文本元素,在pre元素内部出现的内容会按照源代码格式显示在页面中。该元素通常在网页中显示一些代码。

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

实体字符:通常用于在页面中显示一些特殊符号,例如:小于号“<” 大于号“>” 空格“ ” 版权符号“©” 分数(以3/4为例)“¾” &“&”回车(换行)"<br>"水平线(水平分隔线)"<hr>"

a:超链接。<a href="网址或锚点(id)">。href属性通常表示跳转地址,id属性,为全局属性,表示元素在文档中的唯一编号。target属性,表示跳转窗口位置(_self:在当前页面窗口打开,默认值。_blank:在新窗口中打开)

  <a href="tel:电话号码"></a>→a元素可以实现拨打电话

<a href="mailto:邮箱地址">发邮件</a>→a元素可以实现发邮件

<a href="javascript:"></a>→a元素可以通过javascript运行一些代码

strong:字体加粗

em:斜体

del:废除(中划线,划去元素中定义的内容)

address:地址(格式特点,独占一行,斜体)

div:容器,默认换行

元素=其实标记+结束标记+元素内容+元素属性。有些元素没有结束标记,叫做空元素

属性=属性名+属性值

属性的分类:

局部属性:某些元素特有的属性

全局属性:所有元素通用

图片属性

img元素:image缩写,空元素。src属性,source缩写,表示资源地址。alt属性,当图片资源失效时,将使用该属性的文字替代图片。title属性,图片提示,当鼠标光标放在图片上时会出现title中的内容

map元素:将图片模块化,通过area属性针对某个部分设置超链接

<a href="点击img图片时链接的网址">

  <img usemap=“#地图名Map”>

</a>

<map name=“地图名Map”>

  <area shape="(poly)为多边形" coords="x坐标,y坐标,半径" href="点击特定区域后链接的网址"

</map>

figure(指代、定义元素):通常用来把图片、图片标题、描述包裹起来。figcaption是figure元素的子元素,用于包裹标题。

视频 音频属性

video:视频。src属性,表示资源地址。controls属性,控制控件的显示,取值只能为controls(某些属性只有两种状态,即写或者不写。这种属性叫做布尔属性,写了便为真,不写为假。取值只能取自身,也可以简写,即只写出该属性单词不取值,同样默认为真)。autoplay(自动播放)、muted(静音播放)、loop(循环播放)同样为布尔属性。(为了解决不同浏览器对视频的兼容性问题,通常不将src直接写在video中,而是写在video下的一个子元素source中,并且同时写入两个不同格式的视频,例如

<video controls autoplay muted loop>

          <source src="视频路径.mp4">

          <source src="视频路径.webm">

</video>

audio:音频,和视频用法几乎一样

列表元素

有序列表

ol:排序列表

li(ol的子元素):列表下。type为li的属性,当其取值为1时,所排的序列是以阿拉伯数字(默认序号)为序号的;如果取值为i则是以罗马数字为序号;如果取值为a则是以英文字母为序号;如果取值为A则是以大写英文字母为序号排序。reversed属性(为布尔属性),对文本语义倒着排序

无序列表

把ol换为ul,其他的不变。我序列表常用于制作菜单或新闻列表 3.定义列表(通常用于一些术语的定义)

dl:定义列表

dt:定义标题

dd:术语的描述

<dl>

    <dt>标题</dt>

    <dd>

      正文

    </dd>

</dl>   

表单标签

<form  method="GET" action="">

        <input type="text" name="向框内输入的内

        容(自定义名称,类似于title提示),此内容

        一开始就显现于输入框内">

        <input type="password" name="同上">

        <input type="submit" value="">

</form>

method表示发送方式可取值为“get”或“post”;

action表示发送地址;

<input type="text">表示输入框;

<input type="password">表示密码框;

name为文件名(没有name的话提交不会成功)

<input type="submit" >表示提交,

value=""可以修改提交框的样式(默认情况下

为“提交”二字);当type值变为checkbox时表示可多选

这是个选择题:

A.选项<input type="radio" name="" value""

checked="checked">

B.选项<input type="radio" name="" value"">

C.选项<input type="radio" name="" value"">

<input type="submit" >

只有name值相同时(确定三个选项为同一道题的

选项)该题才是真正意义上的选择题(单选题);

value表示该选项代表的数据值,只有给每有一个

数据值赋值,答案才能提交成

功;checked="checked"表示默认选中该选项

<select name="" id="">

            <option value="">161</option>

            <option value="">815</option>

            <option value="">85</option>

            <option value="">577582</option>

</select>

提交值为“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表示过期的内容

<p>活动价格:9.8,原价:<del>998</del></p>

<p>活动价格:9.8,原价:<s>998</s></p>

有序列表

      <ol type=""  reversed="reversed" star="n">

          <li></li>

          <li></li>

          <li></li>

          <li></li>

      </ol>

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

无序列表

<ul type="disc square">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

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

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

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

标准的文档结构

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

<html lang="en">

</html>

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

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

<head>

      <mata>

</head>

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

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

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

<title>

</title>

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

<body>

</body>

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

语义化

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

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

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

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

路径的写法

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,887评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,180评论 0 3
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,490评论 1 11
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,115评论 0 0
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,640评论 0 7