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>

20初识前端HTML(1)的更多相关文章

  1. 初识前端HTML

    HTML 超文本标记语言 HTML的解析 顾名思义,HTML就是由一个个的标签组成的,组成后,HTML可被浏览器直接识别以及处理成我们想给用户展示的样子. 下面我们就来解析HTML的一个个标签. &l ...

  2. 20、前端知识点--html5和css3特性(一)

    [html5/css3]css中的flex弹性布局学习总结 https://blog.csdn.net/Umbrella_Um/article/details/99490209 用CSS/CSS3 实 ...

  3. web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

  4. day 41 前端之前端初识

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

  5. 01 . 前端之HTML

    初识前端 HTML简介历史 HTML(Hyper Text Markup Language)超文本标记语言,它不同于编程语言 超文本就是超过纯文本的范畴,例如描述文本的颜色.大小.字体等信息,或使用图 ...

  6. Sublime Text 前端开发常用扩展插件推荐

    Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...

  7. GMTC全球大前端技术大会-未来已来

    GMTC-2019北京 GMTC这次的大会的热词肯定是监控.性能,当然跨平台依然是热点,write once,run anywhere!,以下是自己参加的总结心得. 6.20上午 前端的演化 核心理念 ...

  8. webpack之loader实践

    初识前端模板概念的开发者,通常都使用过underscore的template方法,非常简单好用,支持赋值,条件判断,循环等,基本可以满足我们的需求. 在使用Webpack搭建开发环境的时候,如果要使用 ...

  9. 面试题HTML +CSS

    HTML+CSS部分1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他 ...

  10. jQuery语法总结及注意事项

    1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom ...

随机推荐

  1. POJ3461 KMP 模板题

    最近忙着考研复习,所以刷题少了.. 数据结构昨天重新学习了一下KMP算法,今天自己试着写了写,问题还不少,不过KMP算法总归是理解了,以前看v_JULY_v的博客,一头雾水,现在终于懂了他为什么要在算 ...

  2. Microsoft Azure 上的自定义数据和 Cloud-Init

     自定义数据是什么? 客户经常询问如何才能在配置Microsoft Azure 虚拟机时插入脚本或其他元数据.在其他云中,这个概念通常称为用户数据.MicrosoftAzure 中也有一项类似的功 ...

  3. IIS解决CPU和内存占用率过高的问题

    发现进程中的w3wp占用率过高. 经过查询,发现如下: w3wp.exe是在IIS(因特网信息服务器)与应用程序池相关联的一个进程,如果你有多个应用程序池,就会有对应的多个w3wp.exe的进程实例运 ...

  4. Shell脚本的颜色样式及属性控制

    首先看一下格式 echo -e "\033[字背景颜色:文字颜色m字符串\033[0m" 举例 echo -e "\033[41;36m 字体 \033[0m" ...

  5. js匹配字符串

    lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索 var str = 'Hello World' str.lastIndexOf('Hell ...

  6. [Tensorflow] Object Detection API - predict through your exclusive model

    开始预测 一.训练结果 From: Testing Custom Object Detector - TensorFlow Object Detection API Tutorial p.6 训练结果 ...

  7. netstat 在windows下和Linux下查看网络连接和端口占用

    假设忽然起个服务,告诉我8080端口被占用了,OK,我要去看一下是什么服务正在占用着,能不能杀 先假设我是在Windows下: 第一列: Proto 协议 第二列: 本地地址[ip+端口] 第三列:远 ...

  8. WebAPI认证与授权

    Web APi之认证(Authentication)及授权(Authorization)[一](十二) http://www.cnblogs.com/CreateMyself/p/4856133.ht ...

  9. InterView之C/CPP

    CPP 引用 什么是"引用"?申明和使用"引用"要注意哪些问题? 答:引用就是某个目标变量的别名(alias),对应用的操作与对变量直接操作效果完全相同.申明一 ...

  10. webapi返回不带引号的字符串,解决自动加双引号的问题

    返回类型改为HttpResponseMessage类型 [Route("api/TestControllers/test")] [HttpGet] public HttpRespo ...