HTML and CSS

HTML5 and CSS

1、HTML是英文Hyper Text Markup Language(超文本标记语言)的缩写。

h1就是一个HTML元素，h1是header1的简写，意思是一级标题。

大部分元素都有一个开始标记和一个结束标记。

开始标记像这样：<h1>

结束标记像这样：</h1>

开始标记和结束标记的唯一区别就是结束标记多了一个/。

 

2、h是英文header标题的缩写， h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。

 

3、p是英文paragraph段落的缩写，经常被用来创建一个段落。

 

4、注释的开始标记是<!--  结束标记是-->

 

5、我们可以通过修改h2元素的style(样式)来达到目的。样式的属性有很多，其中color用来指定颜色。

<h2 style="color:blue">CatPhotoApp</h2>

 

6、当你键入<h2 style="color:red">CatPhotoApp</h2>，你就给h2元素添加了inline style(内联样式)。内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表CSS（Cascading Style Sheets）。

在代码的最顶端，创建一个如下的style元素：

<style>

</style>

在这个style元素内, 你可以为所有的h2元素创建一个元素选择器。比如，如果你想要将所有的h2元素设置为红色, 你的代码应该看起来像这样：

<style>

  选择器 {属性名称: 属性值;}

  h2 {color:red;}

</style>

注意：一定要在属性值的后面加上分号;。

 

7、上节课我们学习了元素选择器，这节课我们学习类选择器。

我们先声明一个类选择器：

<style>

  .blue-text{color: blue;}

</style>

上面的代码在 <style> 标记中声明了一个叫做 blue-text 的类样式。

然后在h2元素上应用我们声明的类选择器：

<h2class="blue-text">CatPhotoApp</h2>

注意：在CSS中，类选择器应该添加.为前缀。而在HTML中，class属性不能添加.为前缀。这是因为在CSS中如果类选择器前不添加. 浏览器就会误认为类选择器是一个元素选择器。

 

8、字号是由样式属性font-size来控制的, 如下：h1 {font-size: 30px;}

 

9、用font-family属性来设置元素的字体：h2 {font-family:Sans-serif;}

 

10、导入谷歌字体。首先，你需要用link标签来引入谷歌Lobster字体。

<link href="地址" rel="stylesheet"type="text/css">

①最近在用link标签引入外部css文件的时候，忘记加上rel=stylesheet，结果css样式显示不出来，疑惑万分。加上这个css效果就出现了。那rel=stylesheet又是何方神圣呢？首先，我们要知道Link标签有两个作用：1. 定义文档与外部资源的关系；2. 是链接样式表。link标签是用于当前文档引用外部文档的，其次，这个标签的rel属性用于设置对象和链接目的间的关系，说白了就是指明你链进来的对象是个什么东西的，

rel各个属性值配置的意思：

Alternate -- 定义交替出现的链接

Stylesheet -- 定义一个外部加载的样式表

Start -- 通知搜索引擎,文档的开始

Next -- 记录文档的下一页.(浏览器可以提前加载此页)

Prev -- 记录文档的上一页.(定义浏览器的后退键)

Contents

Index -- 当前文档的索引

Glossary -- 词汇

Copyright -- 当前文档的版权

Chapter -- 当前文档的章节

Section -- 作为文档的一部分

Subsection -- 作为文档的一小部分

Appendix -- 定义文档的附加信息

Help -- 链接帮助信息

Bookmark -- 书签

②typetype 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 "text/css"，该类型描述样式表。

 

11、有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。当某种字体不可用时，让浏览器自动降级到另一种字体。你可以使用如下CSS样式：

p {font-family: Helvetica, Sans-Serif;}

 

12、使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。

<imgsrc="https://www.your-image-source.com/your-image.jpg">

注意：img元素是自关闭元素，不需要结束标记。

 

13、CSS包含一个控制元素宽度的width属性。像控制字体一样，我们使用px（像素）来指定图片的宽度。

<style>

.larger-image {width: 500px;}

</style>

 

14、CSS 边框（borde）的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。

<style>

 .thin-red-border {

   border-color: red;

   border-width: 5px;

   border-style: solid;

  }

</style>

 

15、border-radius(边框半径)的属性让边框变成圆的。

 

16、a元素，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

<p>Here's a <ahref="http://freecodecamp.cn"> link to FreeCodeCamp中文社区</a> for you tofollow.</p>

有时你想为你的网站添加一个a元素，但此时你还不知道要将它们链接到哪儿，此时可以使用固定链接。把你的a元素的href属性的值替换为一个#，别名hash(哈希)符号，将其变为一个固定链接。

 

17、alt属性，也被称为alt text, 是当图片无法加载时显示的替代文本。alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要，搜索引擎也会搜索alt属性。

<img src="www.your-image-source.com "alt="your alt text">

 

18、无序列表以<ul>元素开始，并包含一个或多个<li>元素。

有序列表以<ol>元素开始，并包含一个或多个<li>元素。

 

19、现在让我们来创建一个form(表单)。Text input(文本输入框)是用来获得用户输入的绝佳方式。注意，input元素是自关闭的。

<input type="text">

 

20、占位符(placeholdertext)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。

<input type="text"placeholder="this is placeholder text">

 

21、使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。action属性的值指定了表单提交到服务器的地址。

<form action="/url-where-you-want-to-submit-form-data"></form>

 

21、让我们来为你的form添加一个submit(提交)按钮，点击这个按钮，表单中的数据将会被发送到你通过action属性指定的地址上。

<button type="submit"> submit </button>

 

22、当你设计表单时，你可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。例如，如果你想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了，你可以使用：

<input type="text" required>

 

23单选按钮只是input输入框的一种类型。每一个单选按钮都应该嵌套在它自己的label(标签)元素中。注意：所有关联的单选按钮应该使用相同的name属性。

<label><input type="radio"name="indoor-outdoor"> Indoor</label>

<label><input type="radio"name="indoor-outdoor"> Outdoor</label>

 

24、复选按钮是input的输入框的另一种类型。每一个复选按钮都应该嵌套进label元素中。所有关联的复选按钮应该具有相同的name属性。

<label><inputtype="checkbox" name="personality"> Loving</label>

 

25、使用checked属性，你可以设置复选按钮和单选按钮默认被选中。

为此，只需在input元素中添加属性checked

<input type="radio"name="test-name" checked>

 

26、你可以用background-color 属性来设置一个元素的背景颜色。例如，如果你想把一个元素的背景颜色设置为green，你应该把这些加到你的 style 元素中：

.green-background {

 background-color: green;

}

 

27、除了 class属性之外，每一个 HTML 元素还可以使用 id 属性。id 属性应该是唯一的

<h2 id="cat-photo-app">

 

28、和类选择器一样，你也可以使用ID选择器来声明样式。声明一个叫cat-photo-element的ID选择器 ，并设置背景色为绿色。注意：在你的style 元素内部，定义类选择器必须添加 . 为前缀，定义ID选择器必须添加 # 为前缀。

#cat-photo-element {background-color: green;}

 

29、有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。元素的 padding 控制元素内容 content和元素边框 border 之间的距离。元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。

除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，举例如下：

padding: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

 

30、每一个 HTML 页面都有一个 body 元素。可以像对其他 HTML 元素一样对你的 body 元素应用样式，并且所有其他元素将继承你的 body 元素的样式。

 

31、有时你的 HTML 元素会得到相互冲突的多个样式。我们的 class 会 override（覆盖） body 元素的CSS 属性。在 HTML 中这些 class 如何排序是无所谓的。然而，在 <style> 部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。在你的 style 元素中为你的id创建一个 CSS 声明你声明的这个 CSS 在类选择器的上面还是下面是无所谓的，因为 id 属性总是具有更高的优先级。行内样式将覆盖style 中定义的所有 CSS。还有最后一种覆盖 CSS 的方法，这是所有方法中最强大的，但是在讲它之前，我们先讲讲为什么你要覆盖 CSS。很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以使用 !important。

！important > ID > 后声明的> 开始声明的

 

32、表示颜色的方法：background-color: #000000;

background-color:rgb(0, 0, 0);

hex code 遵循 red-green-blue（红-绿-蓝），或称为 rgb 格式。

 

33、流行的响应式框架Bootstrap来美化它。Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：

<link rel="stylesheet"href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

首先，我们需要把所有的HTML内容放在class为container-fluid的div下。

</style>

<div class="container-fluid">

</div>