HTML和CSS设计01——HTML框架和标签

HTML框架和标签

---

一.框架

1.设置网站图标

<link rel="shortcut icon" href="图片链接"  type="image/png">

2.设置网站搜索的关键词和网站的描述内容

<meta name="keywords" content="关键词">
<meta name="description" content="描述内容">

3.书写脚本

<script>
.....
</script>

4.书写样式

<style>
...
</style>
或
<link rel="stylesheet" href="样式路径">

二.标签

1.布局标签

<div>
...
</div>

2.换行标签

<br />

3.显示水平线标签

<hr>

4.链接标签

<a href="跳转网址" title="提示内容">跳转提示</a>
<a href="跳转网址" title="提示内容" target="_blank">跳转提示</a>(增加一个页面）
<a href="跳转网址" title="提示内容" target="_self">跳转提示</a>(在原页面基础上再打开一个页面）

5.图片显示

<img src="图片链接" title="提示内容" alt="当图片无法显示时的代替内容">

6.列表

ul/ol:无序/有序

ul>li{li$}*3  ：
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>

效果：

ol>li{li$}*3  ：
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>

效果：

三.文本格式化标签

1.加粗和强调（行级标签，不会独占一行）

<b></b>:加粗
<strong></strong>:加粗和强调（便于在使用SEO时，提取关键词）

2.倾斜和强调

<i></i>:倾斜
<em></em>:倾斜和强调

3.缩小一号和加大一号（行级标签，不会独占一行）

<small></small>:缩小一号
<big></big>:加大一号（在HTML5中被淘汰了，少用）

4.设置上标和下标

X<sub>1</sub>:下标
X<sup>1</sup>:上标

效果：

5.短文本引用

<q></q>

6.地址信息

<address></address>

四.实体转义符

五.块级元素和行级元素

块级元素：=display:block
独占一行
可包含块级和行级元素

行级元素:=display：inline
不独占一行
只能包含行级元素

<p  dispaly:inline></p>:块级转化行级
<span  dispaly:block></span>:行级转化块级