HTML学习笔记二20200310

接着昨天的写了
甩个链接HTML学习笔记一
昨天的状态是这个样子的

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

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

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

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

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

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

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a>

<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多。</p>

10.创建序列表
HTML具有用于创建 unordered lists（无序列表），或带项目符号列表的特殊元素。
无序列表以 <ul> 元素开始，并包含一个或多个<li>元素。
栗子：

<ul>
    <li>猫咪喜欢玩毛线</li>
    <li>猫咪喜欢喝牛奶</li>
    <li>猫咪还喜欢一些东西，但是我也不知道了orz</li>
</ul>

值得注意的是需要确保你的元素有结束标记
效果是这样的：效果示意
那么，我们怎么创建ordered lists（有序列表）呢？
有序列表是以<ol>元素开始的，并包含一个或多个<li>元素。
是这样的：

<ol>
    <li>文本1</li>
    <li>文本2</li>
    <li>文本3</li>
</ol>

11.表单制作

<input type="text">

input元素是自关闭的。
那么，如果我想在用户输入文本时候放点东西给用户看呢？
看这里：
placeholder text（占位符）是用户在 input 框输入任何内容之前放置在 input 框中的预定义文本。
这样子

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

你可以通过在form元素上添加一个action属性来执行提交表单操作。
action属性的值指定了表单提交到服务器的地址。
这样

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

但是，我还想要一个按钮
我们可以在form中添加一个 submit (提交)按钮。点击此按钮，表单中的数据将会被发送到你使用表单 action 属性指定的地址上。
并且嵌套进form里头

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

看到了伐？
之后他的界面长这个样子
那我有的时候收集一些信息，我想把一些内容设置为必须填写的，不填不行的，要怎么办呢?
对于表单，你可以指定某些选项为required（必填项），只有当用户填写了该选项后，用户才能够提交表单。
这样子

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

但是要注意required属性在Safari浏览器中不起作用
如果我想让用户做选择题呢？
单选按钮是 input 输入框的一种类型。
每个单选按钮都应该嵌套在自己的 label(标签) 元素中。
所有关联的单选按钮应具有相同的 name 属性。
如果是多选的话，我们叫他复选，是这样的：
checkboxes（复选按钮）通常用于可能有多个答案的问题的形式。
复选按钮也是 input 的输入框的一种类型。
所以每一个复选按钮都应嵌套在其自己的 label元素中，
所有关联的复选按钮输入应该具有相同的 name属性。

<label><input type="checkbox" name="personality"> Loving</label>

整体上是这样的

<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

有的时候我想让我的选项有一个默认值
可以使用 checked 属性，这样可以设置一个单选框和复选框默认被选中。为此，只需在 input 元素中添加属性checked。

<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor </label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<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>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

上面这样
12关于div
div 元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。
div 元素是最常用的HTML元素。所以可以利用CSS的继承关系把 div 上的CSS传递给它所有子元素。
<div>来标记一个div元素的开始，并使用</div>来标记一个div元素的结束。
为div元素设置背景颜色

<style>
.gray-background {    
  background-color: gray;    
}
</style>

<div class="gray-background">
<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>

13.HTML 为标签添加ID属性
除了 class属性之外，每一个 HTML 元素也可以具有 id 属性。
使用 id 属性有很多好处，一旦你开始使用jQuery，你将了解更多信息。
id 属性应该是唯一的。虽然浏览器不会强制唯一，但这是被广泛认可的。所以请不要给一个以上的元素相同的 id 属性。

<h2 class="red-text" id="cat-photo-app">CatPhotoApp</h2>

关于id属性也可以像类选择器一样，可以使用CSS来设计样式。

<style>
#cat-photo-form {    
  background-color: green;    
}
</style>

<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<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>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

虽然他现在看起来很多，但是第七行以后都是看过的，但是把他删掉有失完整性。
至此，最前面的网页代码成了这样

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

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

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

.smaller-image {
width: 100px;
}

.gray-background {
background-color: gray;
}

#cat-photo-form {    
  background-color: green;    
}

</style>

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

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

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a>

<div class="gray-background">
    <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="/submit-cat-photo" id="cat-photo-form">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <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>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
</form>