20初识前端HTML（1）

1 、HTML

1.1 网页的组成

文字图片链接等元素构成。除了这些元素之外网页中还可以包含音频视频等

1.2 WEB前端开发的流程

现在主流的开发流程：

前后端分离的开发模式。

美工：ps(效果图)
- 前端和后端需要协商后端接口的开发规范。
前端工程师：（HTML CSS JS等前端技术）实现静态网页同时还需要使用mock技术实现页面的模拟测试。
后端工程师：开发接口。
- 前后端联调。

1.3 WEB的标准（重点）

不同的浏览器（火狐，谷歌, IE）的内核是不同的。并且他们的工作的原理对页面的解析是不同的，在显示上就会有差异。W3C组织制定了浏览器的WEB标准

1.3.1 web标准的好处

1 能够被广泛的设备访问

2 更容易的被搜索引擎所搜索

3 降低网站的流量费用

4 使网站更易于维护

5 提高页面的浏览速度

1.3.2 WEB标准的构成

主要包括结构表现和行为三个方面

结构标准：用于对网页元素进行整理和分类主要包括html 和XHTML 等。

样式标准：表用用于设置网页元素的版式颜色大小等外观样式，主要指的就是CSS

行为标准：指的是网页模型的定义以及交互的方式，主要包括 DOM ，ECMAScript和BOM三部分。

2 HTML的认识

HTML：Hyper Text Markup Lanague（超文本标记语言）

HTML是通过标签来标记要显示的网页中的各个部分，网页本身是一种文本文件，通过文本文件添加标记符，可以告诉浏览器如何显示其中的内容（文字如何处理，页面如何排版，图片如何显示等）。

2.1 开发第一个HTML的页面

1 创建一个HTML文件扩展名为.html 或者。htm

2 在文件中编写HTML页面的基本框架 html:5

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

</body>

</html>

JAVA 程序需要先编译后由java虚拟机运行。但是HTML文件不需要编译，直接有浏览器进行解析执行。

2.2 文档类型

<!--html4的文档类型 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--html5的文档类型 -->

<!DOCTYPE html>

必须位于文档的第一行告诉浏览器当前文档使用的是哪种html标准规范。

3 HTML的标签

3.1 头部标签

<head>

    <!-- meta标签是页面的元数据 -->

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 页面的标题 -->

    <title>这是第一个HTML页面</title>

</head>

元数据标签：meta标签

meta标签通常用于指定网页的描述关键字文件的最后的修改时间作者及其他的元数据

元数据可以被浏览器使用，搜索引擎发现其他的web服务调用。

meta标签常用name属性：

 <!-- meta标签是页面的元数据 -->

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--设置网页可以自适应布局 width=device-width  适应设备的宽度  initial-scale不缩放 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name='keywords' content="网上购物，网上商城">

    <meta name="description" content="这是一个B2C的全品类的电商网站">

    <meta name="author" content="张三">

    <!-- 设置网页的自动跳转 5秒之后跳转到百度 -->

    <meta http-equiv="refresh" content="5;url=http://www.baidu.com">

    <!-- 页面的标题 -->

    <title>这是第一个HTML页面</title>

3.2 body

3.2.1 标签的格式

<标签名 属性名=属性值, 属性名 = 属性值>标签的封装内容</标签名>

标签名大小写不敏感推荐标签名统一小写

标签的属性：

基本属性：bgcolor=”red“ 可以修改元素的基本样式

事件属性：onclick=“alert('你好')” 可以让浏览器产生一定的动作来相应当前的操作

标签分类：

单标签和双标签

单标签：<标签名/>

<hr/>

双标签：<head></head> <body></body> <p></p>

标签的语法：

1 标签不能交叉嵌套

<!-- 正确 -->

<div><span>你好，html</span></div>

<!-- 错误 -->

<div><span>你好，html</div></span>

2 双标签一定要记得关闭

3 属性必须有值属性值要使用双引号

4 注释不能嵌套

3.2.2 常用标签

3.2.2.1 font字体标签

<font color="red" face="宋体" size="22"> Hello  HTML </font>

3.2.2.2 特殊的符号

  <h2>这是一个换行标签&lt;br/&gt;</h2>

常见的符号

&nbsp; -->空格,无论在源代码中写了多少个空格 浏览器都将解析为一个空格

&lt;

&gt;

&amp;-->&

&quot;-->“

&apos;-->'

3.2.2.4 标题标签

标题标签 h1 --- h6

h1 是最大 h6 最小

属性：

对齐方式： align：left right center

3.2.2.5 超链接

在网页中所有点击之后可以跳转的内容都是超链接

 <!--

    a 标签是超链接标签

    href 设置链接的地址

    target:

        _self 表示在当前标签中打开链接地址

        _blank 表示在一个新的标签中打开链接地址的页面

  -->

 <a href="http://www.baidu.com" target="_blank">百度</a>

3.2.2.6 列表标签

无序列表有序列表

 <!--

    ul 表示无序列表

    ol表示有序列表

      li 列表项

        type属性  可以修改列表签的样式

            有序列表：A  a  1  i

            无序列表：none  disc   square    circle

  -->

<ol type="i">

    <li>赵四</li>

    <li>刘能</li>

    <li>小沈阳</li>

    <li>宋小宝</li>

</ol>



<ul type="circle">

    <li>赵四</li>

    <li>刘能</li>

    <li>小沈阳</li>

    <li>宋小宝</li>

</ul>

3.2.2.7 图像标签

<img src="img/1.jpg"  width="300px" height="200px" border="10"  alt="这是一张图片">

3.2.2.8 表格标签

  <!--

        标签：table 表示表格

              tr  表示行

              td 表示单元格

              thead 表示表头

              tbody 表示表体

              th 表头的单元格

        表格属性：

             border  表格的边框

             align 表格相对于页面的对齐方式  left  right  center

             width  表格的宽度

             height 表格的高度

             cellspacing 单元格之间的间距

        单元格的属性：colspan 设置跨列   合并列

                    rowspan  设置跨行  行合并

     -->



<table align="center" border="1" width="300px" height="300px" cellspacing="0">

        <tr>

            <td>姓名</td>

            <td>性别</td>

            <td>年龄</td>

        </tr>

        <tr>

            <td>张三</td>

            <td>男</td>

            <td>21</td>

        </tr>

        <tr>

            <td>李四</td>

            <td>女</td>

            <td>18</td>

        </tr>

    </table>



  <table align="center" border="1" width="300px" height="300px" cellspacing="0">

        <thead>

            <tr >

               <th colspan="4">个人基本信息</th>

            </tr>

            <tr>

                <th>姓名</th>

                <th>性别</th>

                <th>年龄</th>

                <th>学校</th>

            </tr>

        </thead>

        <tbody align="center">

            <tr >

                <td>张三</td>

                <td>男</td>

                <td>21</td>

                <td rowspan="2">中北大学</td>

            </tr>

            <tr>

                <td>李四</td>

                <td>女</td>

                <td>18</td>

            </tr>

        </tbody>

    </table>

3.2.2.9 iframe框架标签（了解）内联或内嵌框架

iframe 标签他可以在一个html页面上打开一个小窗口，去加载一个单独的页面

  <iframe src="index.html"  width="800px" height="300px" name="abc"></iframe>

3.2.2.10 frameset （了解）

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

<!-- 垂直划分  左右分别占比 25%  75 -->

<frameset cols="25%,75%">

    <frame src="index.html">

    <frame src="table.html">

 </frameset>

 <!-- 水平划分 分为上中下  分别占比 25% 50%  25%-->

 <frameset rows="25%,50%,25%">



    <frame src="/example/html/frame_a.html">

    <frame src="/example/html/frame_b.html">

    <frame src="/example/html/frame_c.html">

  </frameset>

4 表单标签

表单标签 form标签主要是用来收集用户的输入数据，将数据提交到后台，进行处理保存。

<form action="">

    <!-- 单行文本输入框 -->

    用户名称：<input type="text" value=""  placeholder="请输入用户名称"/><br/><br/>

    <!-- 密码框 -->

    用户密码：<input type="password" value="" placeholder="请输入密码"/><br/><br/>

    确认密码：<input type="password" value="" placeholder="请输入确认密码"/><br/><br/>

    <!-- 文件选择对话框 -->

    头像：<input type="file" value="" placeholder="请选择你要上传的文件"/><br/><br/>

    <!-- 单选按钮的之间是互斥关系  因此单选按钮的name属性值必须一致 这样才能互斥 -->

    性别：<input type="radio" name="sex" value="man" checked="true">男

         <input type="radio" name="sex" value="woman">女 <br/><br/>

         <!-- 复选框  type=checkbox  可以同时选中多个值  默认选择则使用checked表示选中  可以使用checked或true-->

    兴趣爱好：<input type="checkbox" value="JAVA"  checked="checked">JAVA

                <input type="checkbox" value="python">python

                <input type="checkbox" value="html">HTML

                <input type="checkbox" value="CSS">CSS<br/><br/>

    <!--下拉选择框  multiple表示下拉框是否可以多选  默认选择使用selected  option选项 -->

    籍贯：<select >

            <option>--请选择籍贯所在地--</option>

            <option value="sx" selected="selected">山西</option>

            <option value="tj">天津</option>

            <option value="bj">北京</option>

            <option value="hn">湖南</option>

        </select><br/><br/>

    自我评价：

        <textarea rows="10"  cols="80" placeholder="请填写自我评价">



        </textarea><br/><br/>

    <!-- 提交按钮 -->

    <input type="submit" value="提交"/>

    <!-- 重置按钮 -->

    <input type="reset" value="重置"/>

    <!-- 普通按钮 -->

    <input type="button" value="普通按钮"/>



</form>

使用表格完成表单的布局设置

<form>

    <h1 align="center">用户注册</h1>

    <hr width="500px">

    <table align="center" width="500px">

        <tr>

            <td>用户名称：</td>

            <td><input type="text" value=""  placeholder="请输入用户名称"/></td>

        </tr>

        <tr>

            <td>用户密码：</td>

            <td><input type="password" value="" placeholder="请输入密码"/></td>

        </tr>

        <tr>

            <td>确认密码：</td>

            <td><input type="password" value="" placeholder="请输入密码"/></td>

        </tr>

        <tr>

            <td>头像：</td>

            <td><input type="file" value="" placeholder="请选择你要上传的文件"/></td>

        </tr>

    </table>

</form>

5 其他标签

div标签

span标签

p 段落标签

<!-- div标签是独占一行  但是 标签本身不占有任何空间 依靠内容来占据空间-->

<div style="width: 100px; height: 100px; ">这是一个div标签</div>

<div>这是一个div标签</div>

<!-- span标签是在同一行  本身也不占据空间  依靠内容来占有空间 -->

<span>span标签 </span><span></span> <span>span标签 </span>

<!-- p段落标签  默认会在段落的上方或下方空出一行 -->

<p>

    8月6日，郑州市新冠肺炎疫情发布会回应，网传“800人婚宴”夸大其辞，当天参加婚宴者实有402名客人，60名工作人员，请大家不造谣、不信谣、不传谣。那么，这名护士在哪一天确诊？与她的接触者可否定为密接和次密接者......

    </p>