关于前端:HTML和CSS的第一天

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>

四.实体本义符

5.块级元素和行级元素

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

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

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