HTML5+CSS 学习笔记（一）

HTML5 引入了很多更具描述性的 HTML 元素，例如：header、footer、nav、video、article、section等等。

这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。

第一个Hello World！

Hello World

副标题

CatPhotoApp

段落

Hello Paragraph

注释

元素的style样式（内联样式）

我家的猫咪

创建元素选择器

声明一个类选择器并应用

声明（css模块）

应用（html模块）

CatPhotoApp

在CSS中，类选择器应该添加.为前缀。

而在HTML中，class属性不能添加.为前缀。

字号控制

h1 {
  font-size: 30px;
}

设置字体

h2 {
  font-family: Sans-serif;
}

导入谷歌字体：在代码编辑器顶部添加

设置备用降级字体：在第一选择Helvetica字体不可用时启动Sans-Serif字体

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

添加图片

其中，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。

控制图片宽度

定义样式

应用样式

创建css样式边框(一般是给图片创建)

应用两个class到一个元素（加空格即可）

锚点文本

使用段落潜嵌套连接的方式创建句子中的连接

cat photos

cat photos为锚点文本，href为其指向的连接http://freecatphotoapp.com

T：cat photos

Click here for cat photos.

使用“#”创建固定连接，其没有指向

T：Click here for cat photos

Jump to Bottom
Bottom

通过修改href属性为#footer来更改外部链接为内部链接然后添加一个footer元素，它的id值为footer，即可实现页面内跳转。

T：Jump to Bottom

Bottom

锚点图片

将图片嵌套入a元素作为锚点图片

当图片无法加载时显示指定文字

为每一张图片都添加其alt属性！以避免万一

由于csdn并不具有free code camp这个图像库，所以其会发挥作用如下

创建列表

无序列表

  
milk
  
cheese

显示为

• milk
• cheese

有序列表

  
Garfield
  
Sylvester

显示为

1. Garfield
2. Sylvester

创建用户输入接口

文本框创建

设置预定义文本（在用户还未输入前其内部的文本）

将提交的表单与我的服务器交互：在输入框外嵌套带action属性的form元素，并将带submit的按钮元素嵌套进form中，则会使submit按钮用于触发form的action。

  
  Submit

显示为此图：

表单必填

在input中加入required元素即可使用户填写后才能提交表单