HTML CSS学习笔记(一)

标签

 

h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。

---

 

P是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样。

---

HTML 更换文本的颜色

style(样式)

TEXT

---

使用CSS选择器定义标签

text

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

---

设置标签的字体大小

font-size: 30px;

---

设置标签的字体样式

font-family: Sans-serif;

---

引入Google字体

font-family:Lobster

---

添加图片

注意：元素是自关闭的。

alt属性：当图片无法加载时显示的替代文本。

---

增加边框

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

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

提示：你可以应用多个class到一个元素，只需要在多个class之间用空格分开即可。例如：

---

链接跳转

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

cat photos

嵌套：

view more

点击

图片链接：

---

项目符号无序列表&有序列表

HTML有一个特殊元素，用于创建unordered lists（无序列表）, 或带项目符号的列表。

无序列表以

元素开始，并包含一个或多个<li>元素。

有序列表以

元素开始，并包含一个或多个
1. 元素。

   • cat
   • pig
     

   cat

   pig

   ---

   文本输入框
   

   Text input(文本输入框)是用来获得用户输入的绝佳方式。
   

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

   ---

   添加表单

   标签用于为用户输入创建 HTML 表单。

   表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。

   表单用于向服务器传输数据。
   

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

   为表单添加提交按钮
   

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

   表单设置为必填
   

   在你的input元素中加上required属性就可以了。
   

   
   

   submit

   
   

    

    

   ---

   单选框
   

   按钮单选只是input输入侧框的一种类型。
   

   一个每单选按钮都应该嵌套在它自己的label(标签)元素中。

   注意：关联所有的单选按钮应该使用相同的name属性

   checked属性设置复选按钮和单选按钮默认被选中
   

       indoor 

       outdoor  

   复选框

   checkboxes（复选按钮）。
   

   复选按钮是input的输入框的另一种类型。

   每一个复选按钮都应该嵌套进label元素中。

   所有关联的复选按钮应该具有相同的name属性。

   checked属性设置复选按钮和单选按钮默认被选中

       1ST

      2ED   

   ---

   div元素

   div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。
   

   ---

   添加ID属性&使用ID属性设置标签样式
   

   除了class属性之外，每一个 HTML 元素还可以使用id属性。
   

   声明一个叫cat-photo-element的ID选择器 ，并设置背景色为绿色。
   

   #cat-photo-app {
   

   background-color: green;
   

   }

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