今天继续啊
甩链接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">
![Pulpit rock](/statics/pulpit.jpg)
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>
- Coffee
- 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>
吃饭啦
饿了