web 前端 html

1，什么是web

　　在网络中，大量的数据需要有一个载体，而很多人都能够访问这个载体，利用浏览器的这个窗口链接一个有一个载体，这个载体就是网站也就是web的前身。　

　　1，web标准：结构标准，表现标准，行为标准

　　　　结构标准：html

　　　　表现标准：css

　　　　行为标准：JavaScript

　　2，基本游览器的（渲染）内核，

　　　　chrome：blink

　　　　火狐：gecko

2，结构标准——html

　　　　1，html是一个超文本标记语言，主要用来进行描述文档语义的语言

　　　　2，同时html还是一个弱势语言

　　　　3，html在使用的过程中不需要区分大小写但是一般默认书写为小写

　　　　4，html页面的后缀名是html或者htm

　　　　5，基本结构：

　　　　　　1，声明部分：主要作用是用来告诉游览器这个页面使用的标准

<!DOCTYPE html>

　　　　　　2，head部分：将页面的一些维阿信息告诉服务器，不会显示在页面上。

　　　　　　3，body部分：我们缩写的代码必须放在此签内，这里的所有信息都会显示在网页中给予用户查看

3，HTML规范--xhtml == html 4

　　1，一一对应，所有的书写标签必须一一对应，

　　2，所有属性必须加引号和值！

4，结构分解！

<!DOCTYPE html>  #声明标签 ，默认为html5
<html lang = 'en'>
<head>#字头
            <meta charset="UTF-8">
            <title>Document</title>
</head>
<body>
           <！--主要内容输入-->
</body>
</html>

　　meta结构介绍

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

　　meta中的name属性：

<meta name = "Keywords" content = '关键词，于搜索引擎相关！'>
#设置关键字查找的搜索方式

<meta name="Descripation" content = '页面的简单描述'>
#页面的简单描述指令

　　title 标签

<title>网页名称</title>
#网页名称的缩写

　　body 标签

<body>
         所有主要内容直接输入
</body>

5，body中的标签

　　body中的标签分为两大类：

　　　　1，字体标签

　　　　2，排班标签

　　1，字体标签：

　　　　1，一般有 <h1> - <h6> 没有h7！

　　　　　此标签中含有align属性，作用是显示数据的位置，分别为left，center，right

<h1>bilibili<h1>
<h2>bilibili<h2>
<h3>bilibili<h3>
<h4>bilibili<h4>
<h5>bilibili<h5>
<h6>bilibili<h6>
大小有大到小

　　　　2，<font></font>

　　　　　　几乎不会被使用，主要用来进行基本的字体类型选择和字体大小切换。

　　　　3,<u>　

　　　　　　下划线标记方式！

<u>bilibili</u>

　　　　4,<b>

　　　　　　和strong一样用来字体加粗！！很粗！很粗！

　　　　5,<strong>

　　　　　　同上！！

　　　　6,<em>

　　　　　　这是一个缺少脉动的字体标签，脖子是斜的！<em>bilibli</em>

　　　　7,<sup>

　　　　　　上标，虽然不知道何用，但是感觉很6

　　　　8,<sub>

　　　　　　下标，虽然不知道何用，但是感觉一样很6

莫名其妙的特殊字符！

　　&nbsp ：居然是空格！

　　&lt：小于号

　　&gt ：大于号

　　&amp ：&。。。

　　&quot ：双引好

　　&apos ：单引号

　　&copy ：版权符号

　　&trade ：商标符号

主要记忆空格，大于号小于号，版本符号！！分别是&nbsp &lt &gt &copy

　　2，排班标签：

　　　　1，段落标签 <p> 里面只能方文字，图片，表单元素注：不可将h系列的文字放到p中

　　　 2，块级标签 <div>和<span> 都是重要的盒子

　　　　　　<div> 是换行的，并且是分割区块的

　　　　　　<span>不换行，并且表示小区域，小跨度的标签，但是是一个文本级的标签

　　　　　　其中不能有p，h，ul，dl，ol，div

　　　　3，<br>he <p>的区别br会强置换行，p会在段落的前后自动出入一个空行，br标签没有空行

　　　 4，center 标签，居中使用！

　　　　5，<pre> 标签自定义格式！！重点

6，超链接！

　　<a href = "网址">点击后直接转到网址</a>

　　锚链接

　　邮件链接

　　跳转到顶部

　　超链接的属性：　

　　　　　 href：目标URLtitle：悬停文本。

　　　　　　name：主要用于设置一个锚点的名称。

　　　　　　target：告诉浏览器用什么方式来打开目标页面。

　　　　　　target属性有以下几个值：

　　　　 _self：在同一个网页中显示（默认值）

　　　　　　　　_blank：在新的窗口中打开。

　　　　　　　　_parent：在父窗口中显示

　　　　　　　　_top：在顶级窗口中显示

图片标签：

　　　相对路径和绝对路径的传输

猜你喜欢