HTML学习笔记三20200311

今天继续啊
甩链接HTML学习笔记二
现在让我们把 Cat Photo App 的网页暂时放一边，并了解学习更多关于的 HTML 样式。
最开始是这样的

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
padding: 20px;
}

.green-box {
background-color: green;
padding: 10px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

14.布局页面标签
有三个重要的属性控制每个HTML元素的布局：padding(内边距)、margin(外边距)、border(边框)。
padding 控制元素与其边框 border 之间的距离。
注意，要放到style中

.green-box {
background-color: green;
padding: 20px;
}

对不同方向上有
padding-top、padding-right、padding-bottom 和 padding-left属性来控制元素四个方向的 padding。
注意，要放到style中

.green-box {
background-color: green;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}

除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，如下所示：
注意，要放到style中

.green-box {
background-color: green;
padding:40px 20px 20px 40px;
}

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。
margin 控制元素 border 和周围元素实际所占空间的距离。
注意，要放到style中

.green-box {
background-color: green;
padding: 20px;
margin: 20px;
}

同样的，除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，还可以和padding一样集中起来指定它们，如下所示：
注意，要放到style中

.green-box {
background-color: green;
margin:40px 20px 20px 40px;
}

一样的，也是上右下左！
如果将一个元素的 margin 设置为负值，则元素将会变大。
注意，要放到style中

.green-box {
background-color: green;
padding: 20px;
margin: -15px;
}

同样的，也可以分不同方向
CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 属性来控制元素四个方向的margin。
注意，要放到style中

.green-box {
background-color: green;
margin-top:40px;
margin-left: 40px;
margin-right: 20px;
margin-bottom: 20px;
}

写了这么半天居然被我合并成这样了，哈哈哈哈哈哈哈隔
go on!
不过HTML好像就这样可以了吧
大致总结一下吧

HTML 元素

<p>	这是一个段落	</p>
<a href="default.htm">	这是一个链接	</a>
<br>	这是一个换行标签	 

这是一个段落

这是一个链接
这是一个换行标签 **HTML 属性** class 为html元素定义一个或多个类名（classname）(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式（inline style） title 描述了元素的额外信息 (作为工具条使用)

HTML 水平线

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

这是一个段落。

---

这是一个段落。

---

这是一个段落。

HTML 注释

<!-- 这是一个注释 -->

HTML 文本格式化标签

<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

定义粗体文本
定义着重文字
定义斜体字
定义小号字
定义加重语气
_{定义下标字
^{定义上标字}}
定义插入字
定义删除字

HTML 图像
使用<img>标签定义 HTML 页面中的图像。标签有两个必需的属性：src和alt。

<img border="0" src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" width="304" height="228">

HTML 表格

<table>…</table>：定义表格
<th>…</th>：定义表格的标题栏（文字加粗）
<tr>…</tr>：定义表格的行
<td>…</td>：定义表格的列

例子

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML 列表
无序列表使用 <ul> 标签

 <ul>
 <li>Coffee</li>
 <li>Milk</li>
 </ul> 

• Coffee
• Milk

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签

<ol>
 <li>Coffee</li>
 <li>Milk</li>
 </ol> 

1. Coffee
2. Milk

自定义列表：

以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
 <dt>Coffee</dt>
 <dd>- black hot drink</dd>
 <dt>Milk</dt>
 <dd>- white cold drink</dd>
 </dl> 

Coffee

- black hot drink

Milk

- white cold drink

HTML 区块
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>

内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>

HTML <div> 元素可以把文档分割为独立的、不同的部分。它是块级元素，它是可用于组合其他 HTML 元素的容器。没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，可用于对大的内容块设置样式属性。
它另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素是内联元素，可用作文本的容器，也没有特定的含义。当与 CSS 一同使用时，可用于为部分文本设置样式属性。
HTML 表单
这里很重要，东西也很多。
用实例来做了

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form> 

First name:
Last name:

表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
这是输入密码的

<form>
Password: <input type="password" name="pwd">
</form> 

Password:

密码字段字符不会明文显示，而是以星号或圆点替代。

单选（Radio Buttons）

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form> 

Male
Female

可能在csdn里面看不了吧
附张图

复选框（Checkboxes）

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form> 

提交按钮(Submit Button)

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 

吃饭啦
饿了