文章目录
一、HTML常用标签
1.标题标签h1-h6
实例:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
效果如下:
This is a heading
This is a heading
This is a heading
2.段落标签p
实例:
<p>This is a paragraph.</p>
效果如下:
This is a paragraph.
3.链接标签a
实例:
<a href="https://csdn.com.cn">This is a link</a>
效果如下:
This is a link
- 注释:在 href 属性中指定链接的地址。
4.图像标签img
实例:
<img src="img.jpg" width="100" height="100" />
5.水平线hr
实例:
<p>This is a paragraph</p>
<hr />
效果如下:
This is a paragraph
6.换行br
实例:
<p>This is <br/>a paragraph</p>
效果如下:
This is
a paragraph
7.短的引用q
实例:
<p>我们的目标是<q>拯救世界</q></p>
效果如下:
我们的目标是拯救世界
8.长的引用blockquote
实例:
<p>以下内容引用自 WWF 的网站:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来,WWF 一直致力于保护自然界的未来。
世界领先的环保组织,WWF 工作于 100 个国家,
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
效果如下:
以下内容引用自 WWF 的网站:
五十年来,WWF 一直致力于保护自然界的未来。 世界领先的环保组织,WWF 工作于 100 个国家, 并得到美国一百二十万会员及全球近五百万会员的支持。
9.表格标签table:
实例:
<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 |
10.表头标签th:
实例:
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<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>
效果如下:
Heading | Another Heading |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
11.空单元格:
实例:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
效果如下:
row 1, cell 1 | row 1, cell 2 |
row 2, cell 2 |
12.无序列表ul列表项li
实例:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
效果如下:
- Coffee
- Milk
13.有序列表ol列表项li
实例:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
效果如下:
- Coffee
- Milk
14.自定义列表序列dl
实例:
<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
- 注:自定义列表项以dt开始,自定义列表项的定义以dd开始
15.表单标签form
实例:
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
效果如下:
二、CSS基础
1.CSS发展历史
2.CSS的作用
- 主要用来设计网页的样式,美化网页
- 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式
- 对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制
3.CSS的引用方式
引用方式共三种:
- 行内样式(元素上的style)
将css样式添加在HTML标签中,作为style样式的属性值
- 内部样式(文件头上的style元素)
在HTML中创建一个style标签,把css样式写入style标签内,style标签可以写在HTML中的任何位置
- 外部样式(外部样式文件)
将css样式写入.css文件内,然后通过link标签链接
优先级自上而下降低
4.CSS的三大特性
5.CSS的常用属性
-
背景属性:
-
简写边框属性:
border属性是以下各个边框属性的简写属性:
1.border-width
2.border-style
3.border-color
实例:
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<h1>border 属性</h1>
<p>此属性是 border-width、border-style 以及 border-color 的简写属性。</p>
</body>
效果如下:
- 简写轮廓属性:
outline 属性是以下各个轮廓属性的简写属性:
1.outline-width
2.outline-style
3.outline-color
实例:
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>
<h1>outline 属性</h1>
<p class="ex1">点状轮廓。</p>
<p class="ex2">红色的点状轮廓。</p>
<p class="ex3">5 像素的黄色实线轮廓。</p>
<p class="ex4">粗的粉色凸脊轮廓。</p>
</body>
- 字体属性:
- 列表属性:
- 定位属性:
- 表格属性:
- 尺寸属性:
以上就是本周我的预习内容,其中不足之处,请多多指教