HTML5+CSS 学习笔记（一）

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

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

第一个Hello World！

<h1>Hello World</h1>

副标题

<h2>CatPhotoApp</h2>

段落

<p>Hello Paragraph</p>

注释

<!--注释-->

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

<h2 style = "color:blue">我家的猫咪</h2>

创建元素选择器

<style>
  选择器 {属性名称: 属性值;}
  h2 {color: red;}
</style>

声明一个类选择器并应用

声明（css模块）

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

应用（html模块）

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

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

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

字号控制

h1 {
  font-size: 30px;
}

设置字体

h2 {
  font-family: Sans-serif;
}

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

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">

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

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

添加图片

<img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="这里是一张炒鸡可爱的猫咪">

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

控制图片宽度

定义样式

<style>
  .larger-image {
    width: 500px;
  }
</style>

应用样式

<img class  = "larger-image"  src = "/images/relaxing-cat.jpg" >

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

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;//边框宽度
    border-style: solid;//去掉后边框隐形
    border-radius:10px;//圆滑边界方式1
    border-radius:50%;//圆滑边界方式2
  }
</style>

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

<img class="class1 class2">

锚点文本

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

<a href = "http://freecatphotoapp.com">cat photos</a>

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

T：cat photos

<p>Click here for <a href=“#”>cat photos</a>.</p>

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

T：Click here for cat photos

<a href="#footer">Jump to Bottom</a>
<footer id="footer">Bottom</footer>

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

T：Jump to Bottom

Bottom

锚点图片

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

<a href="#"><img src="/images/relaxing-cat.jpg"></a> 

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

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

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

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

创建列表

无序列表

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

显示为

• milk
• cheese

有序列表

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

显示为

1. Garfield
2. Sylvester

创建用户输入接口

文本框创建

<input type="text">

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

<input type="text" placeholder = "cat photo URL">

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

<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL">
  <button type="submit">Submit</button>
</form>

显示为此图：

表单必填

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

<input type="text" required>