2019-07-20

作者: 想和于谦共枕眠 | 来源:发表于2019-07-20 16:58 被阅读0次

1、打字练习
2、快捷键
3、w3C html--到html链接
css--css基础教程+css样式
4、红宝书1-4章
5、每日总结

快捷键

webstorm快捷键：
Ctrl+/ 或 Ctrl+Shift+/ 注释（// 或者/…/ ）
Ctrl+E 最近打开的文件
Shift+F6 重构-重命名
F2 或Shift+F2 高亮错误或警告快速定位
Alt+F1 查找代码所在位置
alt+Shift+F 将当前文件加入收藏夹
Ctrl+Alt+L 格式化代码
Ctrl+R 替换文本
Ctrl+F 查找文本
Ctrl+X 删除行
Ctrl+D 复制行
Ctrl+G 查找行
Ctrl+Shift+Up/Down 代码向上/下移动。

w3c html css

html:

image.png

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

<pre style="margin: 15px 0px 0px; padding: 20px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas; width: 765px; background: rgb(245, 245, 245); line-height: 1.4;"><a href="http://www.w3school.com.cn">This is a link</a></pre>
注释：在 href 属性中指定链接的地址。

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

<pre style="margin: 15px 0px 0px; padding: 20px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas; width: 765px; background: rgb(245, 245, 245); line-height: 1.4;"><img src="w3school.jpg" width="104" height="142" /></pre>

注释：图像的名称和尺寸是以属性的形式提供的。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://www.w3school.com.cn">This is a link</a>
HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。
始终为属性值加引号

1、HTML class 属性 `<span class="left_menu important">`

class 属性规定元素的类名（classname）。
class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。
注释：class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。
提示：可以给 HTML 元素赋予多个 class，例如：<span class="left_menu important">。这么做可以把若干个 CSS 类合并到一个 HTML 元素。
提示：类名不能以数字开头！只有 Internet Explorer 支持这种做法。
向元素添加多个类

2、HTML dir 属性 `<element dir="ltr|rtl">`

注释:dir 属性在以下标签中无效：<base>
<frame><frameset>

3、HTML id 属性 `<element id="value">`

id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。

4、HTML lang 属性 `<element lang="language_code">`

lang 属性规定元素内容的语言。语言代码参考

5、HTML style 属性`<element style="value">`

style 属性规定元素的行内样式（inline style）
style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。

6、HTML tabindex 属性`<element tabindex="number">`

tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）
可以下元素支持 tabindex 属性：<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。
例如下面的例子就是在了解里面进行控制次序的转换。
亲自试一试

7、HTML title 属性`<element title="value">`

title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。
提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。
属性值
text 规定元素的工具提示文本（tooltip text）
其他HTML5 中添加的属性：HTML 全局属性

HTML标签

image.png

其他标签详见w3c HTML参考手册

HTML 段落

可以把 HTML 文档分割为若干段落
段落是通过 <p> 标签定义的。<p>This is a paragraph</p> <p>This is another paragraph</p>

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：

image.png

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

HTML 样式

HTML 文本格式化

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
具体标签在w3c上查看

HTML 引用

HTML <q> 用于短的引用
HTML <q> 元素定义短的引用。
浏览器通常会为 <q> 元素包围引号。
实例
<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
用于长引用的 HTML <blockquote>
HTML <blockquote> 元素定义被引用的节。
浏览器通常会对 <blockquote> 元素进行缩进处理。
实例

<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

用于缩略词的 HTML <abbr>
HTML <abbr> 元素定义缩写或首字母缩略语。
对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
实例
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
用于联系信息的 HTML <address>

image.png
其他类似例子

image.png

HTML 计算机代码格式

通常，HTML 使用可变的字母尺寸，以及可变的字母间距。
在显示计算机代码示例时，并不需要如此。
<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。
例如code 元素不保留多余的空格和折行：下图

image.png

HTML 注释

注释标签用于在 HTML 插入注释。

CSS教程

css语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

image.png

css派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

派生选择器包含：
CSS 后代选择器h1 em {color:red;}
后代选择器可以选择作为某元素后代的元素
CSS 子元素选择器h1 > strong {color:red;}
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
CSS 相邻兄弟选择器h1 + p {margin-top:50px;}
可选择紧接在另一元素后的元素，且二者有相同父元素。
亲自试一试
上面这个例子要仔细看

image.png
li+li 前者是指第一个li +后面的是指后面的两个li（也就是他的兄弟萌！）

css id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义

css 类选择器

在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用
和 id 一样，class 也可被用作派生选择器：
.fancy td {
color: #f60;
background: #666;
}
在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

td.fancy {
    color: #f60;
    background: #666;
    }

<td class="fancy">

CSS 属性选择器

对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
性选择器下面的例子为带有 title 属性的所有元素设置样式：
亲自试一试

如何创建 CSS

外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

CSS样式

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
CSS 在这方面的能力远远在 HTML 之上。
一、背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
p {background-color: gray;}
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
p {background-color: gray; padding: 20px;}

二、背景图像

要把图像放入背景，需要使用 background-image 属性background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值（图片地址）：
body {background-image: url(/i/eg_bg_04.gif);}
大多数背景都应用到 body 元素，不过并不仅限于此。
下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}
您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
a.radio {background-image: url(/i/eg_bg_07.gif);}

三、背景重复

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}

四、背景定位

可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

五、背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动

css文本

CSS 文本属性可定义文本的外观。
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
缩进文本
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：
p {text-indent: 5em;}
注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
使用负值
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
p {text-indent: -5em;}
不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p {text-indent: -5em; padding-left: 5em;}
使用百分比值
text-indent 可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中，缩进值是父元素的 20%，即 100 个像素：
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
水平对齐 text-align:center
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。
<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。
justify
最后一个水平对齐属性是 justify。
在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。
需要注意的是，要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。
字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
字母间隔
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量
文本装饰
text-decoration 有 5 个值：
none
underline
overline
line-through
blink

css字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）
指定字体系列
使用 font-family 属性定义文本的字体系列。
使用通用字体系列
如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：
body {font-family: sans-serif;}
字体风格
font-style最常用于规定斜体文本。
该属性有三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
实例
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小
font-size 属性设置文本的大小。
有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。
请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。
font-size 值可以是绝对或相对值。
绝对值：
将文本设置为指定的大小
不允许用户在所有浏览器中改变文本大小（不利于可用性）
绝对大小在确定了输出的物理尺寸时很有用
相对大小：
相对于周围的元素来设置大小
允许用户在浏览器改变文本大小
注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
使用像素来设置字体大小
通过像素设置文本大小，可以对文本大小进行完全控制：
使用 em 来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。
W3C 推荐使用 em 尺寸单位
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
h1 {font-size:3.75em;} /* 60px/16=3.75em /
h2 {font-size:2.5em;} / 40px/16=2.5em /
p {font-size:0.875em;} / 14px/16=0.875em */

image.png

css链接

链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

image.png
亲自试一试

css列表

具体实例请参考w3c

image.png

css表格

image.png
表格边框
如需在 CSS 中设置表格边框，请使用 border 属性。
下面的例子为 table、th 以及 td 设置了蓝色边框：

table, th, td
  {
  border: 1px solid blue;
  }

折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框：
table
{
border-collapse:collapse;
}

table,th, td
{
border: 1px solid black;
}
表格宽度和高度
通过 width 和 height 属性定义表格的宽度和高度。
下面的例子将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px：
table
{
width:100%;
}

th
{
height:50px;
}
表格文本对齐
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
td
{
text-align:right;
}
表格内边距
如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：
td
{
padding:15px;
}
表格颜色
下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：
table, td, th
{
border:1px solid green;
}

th
{
background-color:green;
color:white;
}

css轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
详见w3c

2019-07-20

快捷键

w3c html css

html:

HTML 标题

HTML 段落

HTML 链接

HTML 图像

HTML 属性

属性实例

1、HTML class 属性 <span class="left_menu important">

2、HTML dir 属性 <element dir="ltr|rtl">

3、HTML id 属性 <element id="value">

4、HTML lang 属性 <element lang="language_code">

5、HTML style 属性<element style="value">

6、HTML tabindex 属性<element tabindex="number">

7、HTML title 属性<element title="value">

HTML标签

HTML 段落

HTML 折行

HTML 样式

HTML 文本格式化

HTML 引用

HTML 计算机代码格式

HTML 注释

CSS教程

css语法

css派生选择器

css id 选择器

css 类选择器

CSS 属性选择器

如何创建 CSS

CSS样式

css文本

css字体

css链接

css列表

css表格

css轮廓

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1、HTML class 属性 `<span class="left_menu important">`

2、HTML dir 属性 `<element dir="ltr|rtl">`

3、HTML id 属性 `<element id="value">`

4、HTML lang 属性 `<element lang="language_code">`

5、HTML style 属性`<element style="value">`

6、HTML tabindex 属性`<element tabindex="number">`

7、HTML title 属性`<element title="value">`