HTML5 and CSS闯关学习记录

1、一级标题\段落 开始结束元素

元素使用“/”标识结束

<h1>一级标题</h1>
<h2>二级标题</h2>
<p>段落文字</p>
复制代码

2、注释元素

代码：

开始："< !--" 结束："-->"

1. 想让某一段代码不起作用，但你又不想删除这一段代码。

2. 就是给代码添加一些说明，方便团队合作或日后自己查看，但又不想影响代码本身

<!--
<h1>Hello World</h1>

<h2>我家的猫咪</h2>

<p>Hello Paragraph</p>
-->
Let us begin
复制代码

实际显示：

Let us begin

3、样式属性修改：style

应用：以改变字体颜色为例

内联样式：

<h2 style="color:red">应用文本</h2>
复制代码

层叠样式：

1. 元素选择器：

<style>
  h2{color:red;}
</style>
<h2>应用文本</h2>
复制代码

2. 类选择器：

<style>
  .red-text {color: red;}
</style>

<h2 class="red-text">应用文本</h2>
复制代码

4、字号、字体设置

字号设置：font-size:10px

字体设置：font-family:Lobster,Monospace 前一种字体不可用时自动降级为后一个字体

段落居中设置：text-align:center;

link标签用于引入谷歌的Lobster字体

例：

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {color: red;}

  h2 {font-family: Lobster, Monospace;text-align:center;}

  p {font-size: 16px;font-family: Monospace;}
</style>

<h2 class="red-text">标题文本</h2>

<p class="red-text">段落文本段</p>

复制代码

5、使用img元素添加图片

img元素是自关闭元素 不需要结束标记

<img scr="图片位置">
复制代码

例：

<img src="/images/relaxing-cat.jpg">
复制代码

6、设置图片大小

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

例：

<style>
  .image{width:100px;}
</style>

<img class="image"src="/images/relaxing-cat.jpg">
复制代码

7、添加边框属性

（1）边框基本属性元素应用

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

例：想要让一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为固体(solid)，代码如下:

<style>
.image {width: 100px;}

 .border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
<img class="image border" src="/images/relaxing-cat.jpg">
复制代码

应用多个class到一个元素，只需要在多个class之间用空格分开即可

<img class="class1 class2">
复制代码

（2）调整边框角属性

通过CSS的一个叫border-radius(边框半径)的属性来让它的边框变成圆滑的：

使用像素px来指定border-radius边框值：

.border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    width: 100px;
    
    border-radius:10px;
  }
复制代码

使用百分比来指定border-radius边框半径的值：

    border-radius:50%;
复制代码

8、锚点元素a

（1）a元素应用

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

<a href="链接到的地址">显示的链接文本</a>
复制代码

将锚点嵌套进段落中 例：

<p>这有一只萌猫的视频<a href="http://freecatphotoapp.com">cat photos</a>点击观看吧</p>
复制代码

效果：

这有一只萌猫的视频cat photos点击观看吧

（2）固定连接

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

例：

<p>这有一只萌猫的视频<a href="#">cat photos</a>点击观看吧</p>
复制代码

效果：

这有一只萌猫的视频cat photos点击观看吧

（3）把某元素嵌套进a元素使其变成一个链接

<a href="链接到的地址">嵌套链接的元素</a>
复制代码

将图片嵌套链接例：

<style>
  .border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .image {width: 100px;}
</style>
<a href="#"><img class="image border" src="/images/relaxing-cat.jpg"></a>

复制代码

9、给图片增加alt属性

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

<img src="图片位置" alt="替代文本">
复制代码

例：

<a href="#"><img class="image border" src="/images/relaxing-cat.jpg" alt="A cat lying on its back"></a>
复制代码

10、列表

（1）无序列表

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

例：

<ul>
  <li>牛奶</li>
  <li>面包</li>
  <li>米饭</li>
</ul>
复制代码

• 牛奶
• 面包
• 米饭

（1）有序列表

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

例：

<ol>
  <li>牛奶</li>
  <li>面包</li>
  <li>米饭</li>
</ol>
复制代码

1. 牛奶
2. 面包
3. 米饭

11、表单

（1）文本输入框（input元素是自关闭的）：

<input type="text">
复制代码

效果：

（2）文本框中增加预定义文本

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

<input type="text" placeholder="placeholder text">
复制代码

效果：

（3）构建可以跟服务器交互的表单

使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的

action属性的值指定了表单提交到服务器的地址

<form action="/url-where-you-want-to-submit-form-data"></form>
复制代码

将文本框嵌套进form元素

<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
 </form>
复制代码

在文本框中可搜索“/submit-cat-photo”地址中的内容

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

<button type="submit">button name</button>
复制代码

button name

例：为form元素添加一个type为submit的提交按钮：

<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL">
  <button type="submit">S（5）指定必填项ubmit</button>
</form>
复制代码

Submit

（5）指定必填项

设计表单时，可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。

例如，如果想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了：

<input type="text" required>
复制代码

应用：

<form action="/submit-cat-photo">
  <input type="text" required placeholder="cat photo URL">
  <button type="submit">Submit</button>
</form>
复制代码

Submit

（6）创建单选按钮

单选就是只能在多个选项中选择一个

单选按钮只是input输入框的一种类型，这样的场景就用radio

每一个单选按钮都应该嵌套在它自己的label(标签)元素中，所有关联的单选按钮应该使用相同的name属性

<label><input type="radio" name="关联元素名"> 选项1</label>
复制代码

选项1

例：

 <label><input type="radio" name="选项">num1</label>
 <label><input type="radio" name="选项">num2</label>
 <label><input type="radio" name="选项">num3</label>
复制代码

num1 num2 num3

（7）创建复选按钮

复选按钮是input的输入框的另一种类型，这样的场景就用checkbox

使用方法与单选一样

<label><input type="checkbox" name="关联元素名"> 选项1</label>
复制代码

选项1

例：

 <label><input type="checkbox" name="选项">num1</label>
 <label><input type="checkbox" name="选项">num2</label>
 <label><input type="checkbox" name="选项">num3</label>
复制代码

num1 num2 num3

（8）设置默认被选中

在input元素中添加属性checked，可以设置复选按钮和单选按钮默认被选中。

<label><input type="checkbox" name="选项" checked>选项1</label>
复制代码

选项1

例：

 <label><input type="radio" name="选项" checked>num1</label>
 <label><input type="radio" name="选项">num2</label>
 <label><input type="radio" name="选项">num3</label>
 <label><input type="checkbox" name="选项" checked>num1</label>
 <label><input type="checkbox" name="选项">num2</label>
 <label><input type="checkbox" name="选项">num3</label>
复制代码

num1 num2 num3 num1 num2 num3

12、将多个元素嵌套到一个元素中

div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。 所以可以利用CSS的继承关系把div上的CSS传递给它所有子元素。

例：将标题、无序列表和有序列表合并成一个元素

<div>
<p>单选与多选</p>
<ul>
  <li>牛奶</li>
  <li>面包</li>
  <li>米饭</li>
</ul>
<ol>
  <li>苹果</li>
  <li>橙子</li>
  <li>香蕉</li>
</ol>
</div>
复制代码

单选与多选

• 牛奶
• 面包
• 米饭

1. 苹果
2. 橙子
3. 香蕉

13、设置背景颜色

用 background-color 属性来设置一个元素的背景颜色。

例如，如果想把一个元素的背景颜色设置为green，应该把这些加到style 元素中：

.green {background-color:green;}
复制代码

例：给上面合并的元素添加背景颜色

<style>
.green{background-color:green;}
</style>
<div class="green">
<p>单选与多选</p>
<ul>
  <li>牛奶</li>
  <li>面包</li>
  <li>米饭</li>
</ul>
<ol>
  <li>苹果</li>
  <li>橙子</li>
  <li>香蕉</li>
</ol>
</div>
复制代码

14、ID元素

除了 class属性之外，每一个 HTML 元素还可以使用 id 属性，id 属性应该是唯一的，虽然浏览器并不强制唯一，但基于最佳实践，这一点是被广泛认可的，所以不要给一个以上的元素设置相同的 id 属性。

和类选择器一样，也可以使用ID选择器来声明样式

在 style 元素内部，定义类选择器必须添加 . 为前缀，定义ID选择器必须添加 # 为前缀。

ID是一个标签，用于区分不同结构和内容，像名字

class是样式，可以套在任何结构和内容上，像衣服

例：给表单添加一个值为 cat-photo-form 的 id 属性，一个绿色的背景。

<style>
#cat-photo-form{background:green;}
</style>
<form action="/submit-cat-photo" id="cat-photo-form">
  <label><input type="radio" name="选项" checked>num1</label>
 <label><input type="radio" name="选项">num2</label>
 <label><input type="radio" name="选项">num3</label>
 <label><input type="checkbox" name="选项" checked>num1</label>
 <label><input type="checkbox" name="选项">num2</label>
 <label><input type="checkbox" name="选项">num3</label>
  <button type="submit">Submit</button>
</form>

复制代码

15、调整区域布局

所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

（1）元素的 padding 控制元素内容 content和元素边框 border 之间的距离 在这儿，我们可以看到绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的 padding。

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }
  
  .red-box {
    background-color: red;
    padding: 20px;
  }

  .green-box {
    background-color: green;
    padding: 10px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>
复制代码

（2）元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。

在这儿，我们可以看到绿方块和红方块都位于黄方块之中，注意红方块比绿方块具有更大的外边距 margin，使得它看起来更小。

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }
  
  .red-box {
    background-color: red;
    padding: 20px;
    margin: 20px;
  }

  .green-box {
    background-color: green;
    padding: 20px;
    margin: 10px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>
复制代码

如果你将一个元素的 margin 设置为负值，元素将会变大

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }
  
  .red-box {
    background-color: red;
    padding: 20px;
    margin: -15px;
  }

  .green-box {
    background-color: green;
    padding: 20px;
    margin: -15px;
  }
</style>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>
复制代码

CSS 允许使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding

同样使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin

 .red-box {
    background-color: red;
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
  }
复制代码

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

padding: 10px 20px 10px 20px;
复制代码

16、CSS继承 优先级

（1）Body元素：每一个 HTML 页面都有一个 body 元素，代表页面整体

可以像对其他 HTML 元素一样对 body 元素应用样式，并且所有其他元素将继承 body 元素的样式：

<style>
  body {
    background-color: black;
    color:green;
    font-family: Monospace;
  }

</style>
<h1>Hello world</h1>
复制代码

Hello World

（2）元素中的class 会覆盖 body 元素的 CSS：

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text{color:pink;}
</style>
<h1 class="pink-text">Hello World</h1>
复制代码

Hello World

（3）在 <style> 部分中 class 声明的顺序非常重要，第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明，它覆盖了 .pink-text 属性：

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text{color:pink;}
  .blue-text{color:blue;}
</style>
<h1 class="pink-text blue-text">Hello World</h1>
复制代码

Hello World

（4）id 属性总是具有更高的优先级：

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
   #orange-text{color:orange;}
  .pink-text {color:pink;}
  .blue-text {color:blue;}
 
</style>
<h1 class="pink-text blue-text" ID="orange-text">Hello World!</h1>
复制代码

Hello World

（5）行内样式将覆盖style 中定义的所有 CSS

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {color:orange;}
  .pink-text {color:pink；}
  .blue-text {color:blue;}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

复制代码

Hello World

(6)很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉自己的 CSS。当需要确保某元素具有指定的 CSS 时，可以使用 !important。

例：给 pink-text 元素的 color 声明加上关键字 !important，确保 h1元素是粉色的:

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
复制代码

Hello World

总结优先级：标注！important>行内样式>ID>class（后面比前面优先）>body

17、16进制代码标识颜色

#000000 每两位对应红、绿、蓝三色

例：#FF0000表示红色 对应的2位数值越大 颜色越深

也可用3位表示：

例：#F00 表示红色 #0F0表示绿色

可以用rgb（0,0,0）格式来表示颜色，每个数字0-255之间的数值代表红、绿、蓝三色的亮度

例：rgb(255,0,0)表示红色

转载于:https://juejin.im/post/5a30cebf5188257db3727db6