响应式网页设计
响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
学习日记：第一章
基础html和html5
<h1></h1>分别是起始符和结束符
<h2>代表2级标题，还有<h3><h4><h5>等等
<p></p>代表的是段落
按照惯例，所有的HTML标签都应该是小写字母，不会用大写字母
注释开始标签<!--，结束标签是-->
照片格式<img src=" " alt=" ">
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a> 超链接方法，a叫做锚点元素，锚文字为cat photos，target属性是"_blank"说明链接会在一个新建标签页打开，href是锚点元素的另外一个属性，用来指定连接的URL
也可以添加页面内的连接，将元素的href属性设置为"#加对应的id"，然后在后面的想要跳转的属性上面要加上对应的id，例如
<a href="#footer">Jump to Bottom</a>
<footer id="footer">Copyright Cat Photo App</footer>
在不确定a元素将要链接到哪里时，我们可以先用#写在上面，后续可以用JavaScript来更改链接的指向
<ul> (无序列表)
<li></li>
.
.
.
<li><li>
<ul>
<ol>(有序列表)
<li></li>
…
<li></li>
</ol>
文本输入框<input type=""placeholder="">后面如果加上required属性就可以设置文本框为必须要输入的形式，例如<input type=""placeholder=""required>
表格<form action=""></form>
按钮<button type="">文本内容</button> 当type的属性是submit时，点击提交按钮会将数据发送到action属性指定的URL上面
单选按钮：radio buttons
每一个单选按钮都会被嵌套在它自己的label元素里面，相当于给input元素和包裹它的label元素建立起关系，所有关联的单选按钮都会拥有相同的name属性，创建一组单选按钮时，选中其中一个按钮，其他按钮即为未选中，只能提供一个答案。
复选框：checkboxes
每一个复选框都应该嵌套在它自己的label元素中。这样，我们相当于给input元素和包裹它的label元素建立起了对应关系
Value属性：提交表单时，所选项的值会发送到服务端，radio和checkbox的value属性值决定了发送到服务端的实际内容。如果没有指明value属性值，则会使用默认值做为表单数据提交，也就是on。例如，如果用户选中“indoor”选项然后提交表单，表单数据则会包含indoor-outdoor=on。这样的表单数据看起来不够直观，因此最好将value属性值设置为一些有意义的内容。
checked属性：在input属性里面添加checked这个词，就可以实现将复选框或者是单选按钮都设置为默认选中。
div元素：内容划分元素，是一个包裹其他元素的通用容器。以<div>开始和</div>结束
在文章的顶部，我们需要告诉浏览器网页我们所使用的HTML版本，具体的语句就是<!DOCTYPE …>，其中“…”代表的就是版本号，例如<!DOCTYPE html>对应的就是HTML5，其中htnl即可以大写也可以小写，其余部分都是大写。整个HTML代码都要位于html标签中，开始部分为<html>，结束部分为</html>
html的结构主要分为两部分，head和body。网页的描述应该放入head标签，网页的内容（向用户展示的）应该放到body标签，link，meta，title，style都应该放入到head标签中。head元素应该包含title，body应该包含h1和p。
例子：
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
