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

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

智能推荐

python opencv resize函数_python opencv 等比例调整（缩放）图片分辨率大小代码 cv2.resize()...-程序员宅基地

文章浏览阅读1.3k次。# -*- coding: utf-8 -*-"""@File : 200113_等比例调整图像分辨率大小.py@Time : 2020/1/13 13:38@Author : Dontla@Email : [email protected]@Software: PyCharm"""import cv2def img_resize(image):height, width = image...._opencv小图等比例缩放

【OFDM、OOK、PPM、QAM的BER仿真】绘制不同调制方案的误码率曲线研究（Matlab代码实现）-程序员宅基地

文章浏览阅读42次。对于这些调制技术的误码率（BER）研究是非常重要的，因为它们可以帮助我们了解在不同信道条件下系统的性能表现。通过以上步骤，您可以进行OFDM、OOK、PPM和QAM的误码率仿真研究，并绘制它们的误码率曲线，以便更好地了解它们在不同信道条件下的性能特点。针对这些调制技术的BER研究是非常重要的，可以帮助我们更好地了解这些技术在不同信道条件下的性能表现，从而指导系统设计和优化。6. 分析结果：根据误码率曲线的比较，分析每种调制方案在不同信噪比条件下的性能，包括其容忍的信道条件和适用的应用场景。_ber仿真

【已解决】Vue的Element框架，日期组件（el-date-picker）的@change事件，不会触发。_el-date-picker @change不触发-程序员宅基地

文章浏览阅读2.5w次，点赞3次，收藏3次。1、场景照抄官方的实例，绑定了 myData.Age 这个值。实际选择某个日期后，从 vuetool（开发工具）看，值已经更新了，但视图未更新。2、尝试绑定另一个值： myData，可以正常的触发 @change 方法。可能是：值绑定到子对象时，组件没有侦测到。3、解决使用 @blur 代替 @change 方法。再判断下 “值有没有更新” 即可。如有更好的方法，欢迎评论！..._el-date-picker @change不触发

PCL学习：滤波—Projectlnliers投影滤波_projectinliers-程序员宅基地

文章浏览阅读1.5k次，点赞2次，收藏8次。Projectlnliersclass pcl: : Projectlnliers< PointT >类 Projectlnliers 使用一个模型和一组的内点的索引，将内点投影到模型形成新的一个独立点云。关键成员函数 void setModelType(int model) 通过用户给定的参数设置使用的模型类型，参数 Model 为模型类型（见 mo..._projectinliers

未处理System.BadImageFormatException”类型的未经处理的异常在 xxxxxxx.exe 中发生_“system.badimageformatexception”类型的未经处理的异常在未知模块。 -程序员宅基地

文章浏览阅读2.4k次。“System.BadImageFormatException”类型的未经处理的异常在 xxxx.exe 中发生其他信息: 未能加载文件或程序集“xxxxxxx, Version=xxxxxx,xxxxxxx”或它的某一个依赖项。试图加载格式不正确的程序。此原因是由于 ” 目标程序的目标平台与依赖项的目标编译平台不一致导致，把所有的项目都修改到同一目标平台下（X86、X64或AnyCPU）进行编译，一般即可解决问题“。若果以上方式不能解决，可采用如下方式：右键选择配置管理器，在这里修改平台。_“system.badimageformatexception”类型的未经处理的异常在未知模块。中发生

PC移植安卓---2018/04/26_电脑软件移植安卓-程序员宅基地

文章浏览阅读2.4k次。记录一下碰到的问题：1.Assetbundle加载问题：原PC打包后的AssetBundle导入安卓工程后，加载会出问题。同时工程打包APK时,StreamingAssets中不能有中文。解决方案：（1）.加入PinYinConvert类，用于将中文转换为拼音（多音字可能会出错，例如空调转换为KongDiao||阿拉伯数字不支持，如Ⅰ、Ⅱ、Ⅲ、Ⅳ(IIII)、Ⅴ、Ⅵ、Ⅶ、Ⅷ、Ⅸ、Ⅹ..._电脑软件移植安卓

随便推点

聊聊线程之run方法_start 是同步还是异步-程序员宅基地

文章浏览阅读2.4k次。话不多说参考书籍汪文君补充知识：start是异步，run是同步，start的执行会经过JNI方法然后被任务执行调度器告知给系统内核分配时间片进行创建线程并执行，而直接调用run不经过本地方法就是普通对象执行实例方法。什么是线程？1.现在几乎百分之百的操作系统都支持多任务的执行，对计算机来说每一个人物就是一个进程（Process）,在每一个进程内部至少要有一个线程实在运行中，有时线..._start 是同步还是异步

制作非缘勿扰页面特效----JQuery_单击标题“非缘勿扰”,<dd>元素中有id属性的<span>的文本(主演、导演、标签、剧情-程序员宅基地

文章浏览阅读5.3k次，点赞9次，收藏34次。我主要用了层次选择器和属性选择器可以随意选择，方便简单为主大体CSS格式大家自行构造网页主体<body> <div class='main' > <div class='left'> <img src="images/pic.gif" /> <br/><br/> <img src="images/col.gif" alt="收藏本片"/&_单击标题“非缘勿扰”,元素中有id属性的的文本(主演、导演、标签、剧情

【Python】No module named ‘win32com‘，最简单的解决方法，适用windows、mac、linux_no module named 'win32com-程序员宅基地

文章浏览阅读2.2k次。完整的解决思路_no module named 'win32com

有了这6款浏览器插件，浏览器居然“活了”？！媳妇儿直呼“大开眼界”_浏览器插件助手-程序员宅基地

文章浏览阅读901次，点赞20次，收藏23次。浏览器是每台电脑的必装软件，去浏览器搜索资源和信息已经成为我们的日常，我媳妇儿原本也以为浏览器就是上网冲浪而已，哪有那么强大，但经过我的演示之后她惊呆了，直接给我竖起大拇指道：“原来浏览器还能这么用？大开眼界！今天来给大家介绍几款实用的浏览器插件，学会之后让你的浏览器“活过来”！_浏览器插件助手

NumPy科学数学库_数学中常用的环境有numpy-程序员宅基地

文章浏览阅读101次。NumPy是Python中最常用的科学数学计算库之一，它提供了高效的多维数组对象以及对这些数组进行操作的函数NumPy的核心是ndarray（N-dimensional array）对象，它是一个用于存储同类型数据的多维数组Numpy通常与SciPy（Scientific Python）和 Matplotlib（绘图库）一起使用，用于替代MatLabSciPy是一个开源的Python算法库和数学工具包；Matplotlib是Python语言及其Numpy的可视化操作界面'''_数学中常用的环境有numpy

dind（docker in docker）学习-程序员宅基地

文章浏览阅读1.1w次。docker in docker说白了，就是在docker容器内启动一个docker daemon，对外提供服务。优点在于：镜像和容器都在一个隔离的环境，保持操作者的干净环境。想到了再补充：）一：低版本启动及访问启动1.12.6-dinddocker run --privileged -d --name mydocker docker:1.12.6-dind在其他容器访问d..._dind