web前端介绍¶

1. web前端是什么?¶

网页开发 -> 任何在浏览器运行的程序

前后端分离

## 2. 三大核心技术

HTML
CSS
JAVASCRIPT

HTML¶

1. 超文本标记语言¶

<开始标签 属性>内容</结束标签>
<标签/>  <br/>  <hr/>  <img src=""/>

2.网页结构¶

<!DOCTYPE HTML>
<html>
    <head></head>
    <body></body>
</html>

3. head页头包含html元素(标签)¶

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta chartset="utf-8"/>
    </head>
    <body></body>
</html>

4. body页身包含html元素(标签)¶

<!--文本标签-->
<h1-h6>
<p></p>
<strong></strong>
<em></em>

<!-- 图像-->    
<img />

<!-- 超链接-->    
<a></a>

<!-- 列表-->
<ul>
    <li></li>
</ul>

<!--表格-->
<table>
   <tr>
       <td></td>
   </tr>    
</table>
<!-- 行内元素和块元素-->
<span></span>
<div></div>
<!-- 行块元素转变 -->
div{
    display: inline-block; //行块元素    
}
p{
  display:inline;      
}    
a{
   display: block;    
}
<!-- 媒体标签 -->
<vedio src=""></vedio>
<audio src=""></audio>

<!-- 其它-->
<br/>
<hr/>

5.网页布局, 结构标签¶

<div class="header"></div>

<header></header>  头部
<footer</footer>  底部区域
<section></section> 独立区块
<aside></aside> 侧表框
<artice></artice>
<nav></nav> 导航

6. 网页嵌入标签 iframe¶

<img src=""/>
<iframe name="contentFrame" src="http://www.yuguoxy.cn"/>

<a href="http://www.yuguoxy.cn" target="contentFrame">雨果学院</a>

7.特殊符号¶

&nbsp;  空格