HTML5快速设计网页_用html5做一个简单网页-程序员宅基地

技术标签： .NET全栈开发技术 HTML

HTML5快速设计网页

一、认识web开发和软件安装

二、使用HTML/HTML5搭建页面骨架

一、认识web开发和软件安装

1、认识网页：商城网页比较经典，比如京东，淘宝、小米商城还有锤子官网等有图片、文字还有一些多媒体组合而成的。我们还需要善于观察然后模仿成自己的

2、网站：由多个网页组织在一起而成的，网页和网页之间是有联系的。就像蜘蛛网一样织成一张大网

3、用户眼中的网页：

4、前端开发者眼中的网页：

5、web开发者看到的密密麻麻的标签是如何变成用户看到的页面的呢？

就是浏览器都遵循W3C标准，web标准构成：

结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。最重要
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript

6、做网页之前准备好自己的开发工具，我使用的是HBuilder

网页开发工具众多，有DW，sublime（轻量级的），scode，webstorm（付费），HBuilder（轻量级，建议使用不带X的版本）还有记事本，选择自己用的顺手的就行，还有firework和photoshop等作为辅助
安装浏览器，必须安装Google（开发者调试很友好），火狐、Safari等可以选择性安装，建议安装用于测试

7、查看浏览器占有的市场份额（知晓）

查看网站： http://tongji.baidu.com/data/browser

8、浏览器内核：

（1）Trident(IE内核)

国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。

代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。

Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。

（2）Gecko(firefox)

Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。可惜这几年已经没落了，比如打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。

（3） webkit(Safari)

Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。

现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了），苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。

代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

（4） Chromium/Blink(chrome)

在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。

大部分国产浏览器最新版都采用Blink内核。二次开发

（5） Presto(Opera)

Presto（已经废弃）是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

二、使用HTML/HTML5搭建页面骨架

1、HTML简介：HyperText Markup Language超文本标记语言，用HTML将内容用网页显示

2、HTML基本骨架或构成：头部+躯干

3、用HBuilder创建一个网页

打开HBuilder——>文件新建一个未web项目——>在新建的web项目新建一个HTML文件——>!+tab键自动生成骨架

1. html: 5
2. !

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	
</body>
</html>

4、HTML常用标签（时刻记住标签语义化，就是对内容的描述）：

（1）、H标签：标题标签（h1--h6）1号/大标题到6号标题，<h1>标题1</h1>，<h2>标题2</h2>

（2）、P标签：段落标签，<p>段落</p> ，属于行内块元素

（3）、hr标签：在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签

（4）、br标签：在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

（5）、a标签：超链接，将页面组织在一起形成网站，<a href="#">超链接（放文本、图片不能当容器使用）</a>，字体颜色默认是蓝颜色的

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

说明：

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式

（6）、无序列表：无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>

注意：

1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。

（7）、有序列表：有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>

（8）、自定义列表：定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>

（9）、table表单标签：语法格式

<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>

说明：

1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>标签，他就像一个容器，可以容纳所有的元素

表格结构：

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所示：

<thead></thead>：用于定义表格的头部。

必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。

位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

表格标题：caption 元素定义表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上

<table>
<caption>我是表格标题</caption>
</table>

表格属性：

合并单元格：

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除。

公式：删除的个数 = 合并的个数 - 1

合并的顺序先上先左

（10）、img图片插入标签：<img src="图片路径" alt="图片描述" />

<!--图片插入标签-->
		<img src="img/aspnet-224-001.jpg" alt="ASP开发学习"  />

（11）、表单：目的是为了收集用户信息。

格式：

<form method=“方法” action=“”>

<input type="" name="" value="" />

.............

</form>

在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件：

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input标签：type属性取值

input标签type新增属性：邮箱：email ；日期date、month、week、color颜色，将这心input放入fieldset标签中

input新增属性：

autocomplete：自动记录，使用条件：在form表单中使用指定name，必须要有提交按钮

label标签：

label 标签为 input 元素定义标注（标签）。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

表单域：在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称"> 
各种表单控件
</form>

常用属性：

Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method 用于设置表单数据的提交方式，其取值为get或post。
name 用于指定表单的名称，以区分同一个页面中的多个表单。

注意：每个表单都应该有自己表单域。

（12）、下拉菜单，语法格式：

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

注意：

<select></select>中至少应包含一对<option></option>。

在option 中定义selected =" selected "时，当前项即为默认选中项。

5、语义化：

动态加载下拉列表，起到提示的作用：datalist标签，和input结合使用

查阅文档：

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/

本文链接：https://blog.csdn.net/y20_20/article/details/93381413

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

计算机毕业设计Java疫情防控医用品管理(系统+源码+mysql数据库+Lw文档）_疫情防护用品销售管理系统论文-程序员宅基地

文章浏览阅读467次。计算机毕业设计Java疫情防控医用品管理(系统+源码+mysql数据库+Lw文档）springboot基于SpringBoot的婚庆策划系统的设计与实现。JSP健身俱乐部网站设计与实现sqlserver和mysql。JSP网上测试系统的研究与设计sqlserver。ssm基于SpringMvC的流浪狗领养系统。ssm基于Vue.js的音乐播放器设计与实现。ssm校园流浪猫图鉴管理系统的设计与实现。_疫情防护用品销售管理系统论文

android插件化开发打包，Android项目开发如何设计整体架构-程序员宅基地

文章浏览阅读988次，点赞28次，收藏28次。最后小编想说：不论以后选择什么方向发展，目前重要的是把Android方面的技术学好，毕竟其实对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！这里附上我整理的几十套腾讯、字节跳动，京东，小米，头条、阿里、美团等公司19年的Android面试题。把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。由于篇幅有限，这里以图片的形式给大家展示一小部分。

基于单片机数码管秒表控制系统设计-程序员宅基地

文章浏览阅读600次，点赞11次，收藏6次。*单片机设计介绍，基于单片机数码管秒表控制系统设计。

Python小程序之验证码图片生成_小程序图片验证码后端生成-程序员宅基地

文章浏览阅读235次。python小程序之验证码图片的生成定义随机字母的生成函数定义随机颜色生成函数，采用RGB格式，生成一个元组调用Image，生成画布，填充底色为白色调用画笔函数Draw，传入画布对象填充画布的每一个色块，作为背景在画布上控制间距，填上每一个字在最后的图上进行模糊操作代码# 生成一个随机的二维码小程序from PIL import Image,ImageDraw,ImageF..._小程序图片验证码后端生成

思科自防御网络安全方案典型配置_思科设备怎么ranga)服务器区域独立防护;-程序员宅基地

文章浏览阅读2.2k次。 1. 用户需求分析客户规模：客户有一个总部，具有一定规模的园区网络；一个分支机构，约有20－50名员工；用户有很多移动办公用户客户需求：组建安全可靠的总部和分支LAN和WAN；总部和分支的终端需要提供安全防护，并实现网络准入控制，未来实现对VPN用户的网络准入检查；需要提供IPSEC/SSLVPN接入；在内部各主要部门间，及内外网络间进_思科设备怎么ranga)服务器区域独立防护;

苹果账号迁移流程_apple 账号迁移-程序员宅基地

文章浏览阅读445次。4、转移账号生成的 p8 文件（证书文件）1、转移苹果账号的 teamID。2、接受苹果账号的 teamID。5、接受账号生成的 p8 文件。3、转移应用的 AppID。_apple 账号迁移

随便推点

深度学习中优化方法之动量——momentum、Nesterov Momentum、AdaGrad、Adadelta、RMSprop、Adam_momentum seg-程序员宅基地

文章浏览阅读1k次。https://blog.csdn.net/u012328159/article/details/80311892_momentum seg

动态数据生成静态html页_监听数据变更自动生成静态html-程序员宅基地

文章浏览阅读816次。主要的原理就是替换模板里的特殊字符。 1、静态模板页面 template.html，主要是定义了一些特殊字符，用来被替换。 HTML code DOCTYPE HT_监听数据变更自动生成静态html

预防按钮的多次点击恶意刷新-程序员宅基地

文章浏览阅读494次。今日在做一个新闻系统的评论时. 想到了预防"提交"按钮的多次点击的问提 (prevent multiple clicks of a submit button in ASP.NET). 以前碰到此类问提总是用重定位页面来解决. 这次我想找到一个一劳永逸的办法. 通过查讯Google,找到了一些代码,挑选一些较好的修改了一下。public void pa

sokcs5软件dante配置指南_dante 代理配置pam用户名密码模式-程序员宅基地

文章浏览阅读4.7k次。近来公司业务有需要做socks5代理的需求，研究了一下，主要的开源实现有2个:dante http://www.inet.no/dante/ss5 http://ss5.sourceforge.net/比较了一下，还是比较倾向于dante,因为看到有人这样评价ss5：Project has an incredibly poor source code quality. Th_dante 代理配置pam用户名密码模式

Excel vba 求助。_vba countifs 源码-程序员宅基地

文章浏览阅读809次。在excel vba 中用到countifs 函数，但用来统计带有特殊符号* 时总是统计chu_vba countifs 源码

web前端基础——实现动画效果_web前端实现图片动画效果-程序员宅基地

文章浏览阅读2.6k次。当两个效果之间变换时，可以使用transition过渡属性，但是有多个效果来回变换时，就需要使用动画效果,且动画过程可控（重复播放，画面暂停，最终画面等）文章目录1、简介2、实现步骤3、复合属性animation4、动画属性1、简介动画的本质是快速切换大量图片在人脑中形成的具有连续性的画面构成动画的最小单元：帧或者动画帧2、实现步骤定义动画@keyframes 动画名称{ from{} to{}}@keyframes 动画名称{ 0%{} 10%{} 20%{} 50._web前端实现图片动画效果