20初识前端HTML(1)

  • A+
所属分类:Web前端
摘要

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


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>