前端开发html/css 基础知识整理

 html5,css css3 bootatarp4 ,这些前端基本知识

今天从html5开始大概梳理一下;

html:是一种创建网页语言的标准标记语言。

文件结构;

<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
<!DOCTYPE html>:声明,这是html什么版本写的。
<html>:是根标签。

head:定义文章头部!包含:style,meta,link,title,script·····

body:网页的主要内容。包含:h1—h6,p,a,span,img,i等标签。

综合使用;

<!DOCTYPE html>
<html>
<head>
  <title>这是头部</title>
</head>
<body>
<h1>这是h标签</h1>
<p>这是一个p标签</p>
<img src="xxx(引用图片)">
<a href="#">这是一个a标签,链接</a>
</body>
</html>

语义化:明白每个标签的用处,比如 只是一个标题 就用h标签,需要插入图片用img...

认识body标签;

<p>段落文本</p>          有几段就放几个p

<h1>标题标签</h1>       h1—h6共6个标题分级

<em>斜体</em> 斜体文本(强调斜体文本)           <i>斜体</i>(仅仅表示斜体)

<strong>粗体</strong>粗体文本(加重语气)             <b>粗体</b>(只表示这是一个加粗的文本)

<sub>定义下标字</sub> 定义下标文本 比如 :100元  “其中的“元”就好比在html中加了字体下标”

<sup>定义上标字</sup>定义上标文本 和<sub>用法一样 只不过是作用于上方 好比数字中的平方。

<span>单独样式文本</span>     没有语义的 一般作用于某个样式的其中一处 给它单独设置样式。

<br/>  换行符

<hr/>水平横线

<a href="#"  title="xx"  target=“_blank”>链接</a>  这是一个链接 ,其中“#”为网站地址、文本、图片、图标都可以的’,"title=xx"鼠标经过时显示的文本。“target=_blank”会在点击这个链接时打开一个新的网页来显示。

例子;

<!DOCTYPE html>
<html>
<head>
  <title>链接</title>
</head>
<body>
<a href="https://www.baidu.com/"  title="百度" target="_blank">百度</a>
</body>
</html>

img标签;

<img src="图片地址" alt='图片加载失败替换文字' title="提示文本">

三个列表 :ul(无序列表)                     ol(有序列表)                            dl(自定义列表)

            <ul>                                     <ol>                                                      <dl>

<li>内容以圆点显示</li>               <li>以123排列</li>                                 <dt></dt>

             </ul>                                     </ol>                                                  <dd>....</dd>

                                                                                                                        </dl>

div:块级元素,定义文档中的分区。

<div class=""  id=''>
<h1></h1>
<p></p>
.....
</div>

class/id  定义div样式 

div中可以加很多样式:h1,p,img,a,......




猜你喜欢

转载自blog.csdn.net/w859265708/article/details/80752289