整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
移动端中我们经常碰到横屏竖屏的问题，那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。
竖屏引用
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
页开发设计是在面试创新实验室时面试官给的二面试题，让自己设计实现一个简单的网页。所以我决定来做一个邀请函网页，并将开发过程写在博客上供有需要的朋友们查看。
网页开发工具有很多，我使用的是对新手较为友好的Dreamweaver，其优点在于简便、直观、功能丰富，简称为“傻瓜化”。下载请点击这里。
1.1 创建首个HTML5页面
在准备好的开发工具中，首先输入第一行HTML代码，如下：
<!doctype html>
接下来，我们需要为页面构建最基本的结构框架。首先要建立最外侧的围“围墙”，来囊括整个页面，这需要使用到< html >标签，后续所有页面内容都卸载这对标签之内。而围墙之内又分为“头”和“身体”两部分，分别用< head >和< body >标签来指定。
<html> <head> </head> <body> </body> </html>
< head >类似“身份证”，里面需要两项基本信息，一项是“名字”和“语言”。
正如每个人都有一个名字，< head >中唯一必须的元素就是< title >，即页面的标题。此外，还需要标注“语言”来使浏览器正确解读我们的页面而不会出现乱码
<head> <meta charset="UTF-8"> <title>HTML5学习邀请函</title> </head>
< body >标签中则包含了所有要呈现给浏览者的内容信息。
<head> Let's Learn HTML5 </head>
.
1.2 增加必要的页面元素
为了对页面内容加以充实，我们使用标题标签。在HTML的各种标签中，标题标签有六个，按从大到小的层次结构为< h1 >到< h6 >。在这里我们就用< h1 >。
<body> <h1>Let's Learn HTML5</h1> </body>
接着要添加说明文字。说明文字放在段落标签< p >里。
<body> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> </body>
最后是添加按钮。按钮的实质是文本链接，单击后跳转到某个URL。链接的标签为< a >，跳转的URL可以用该标签的href属性来指定，单击跳转到href所指”界面。
<body> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href="invite.php">邀您参加</a> </body>
1.3 页面中看不见的代码
页面中加入区块，可以将各种标签放入不同的内容区域中，可以是页面结构变得井井有条，便于后续的页面美化。而此次使用的就是通用区块< div >。修改代码如下：
<body> <div> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href="invite.php">邀您参加</a> </div> </body>
此外，区块还可以进行命名，我们以便直接对应到这个区块。添加一个id属性，命名为container：
<div id="container"> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href="invite.php">邀您参加</a> </div>
2.1 添加页面背景
背景图片要放置在和 index.html相同的路径下。css样式代码可以指定各种页面元素的呈现形式，但是在创建css样式代码之前，还需要在头部创建style元素来作为样式的容器。
<head> <meta charset="utf-8"> <title>HTML5学习邀请函</title> <style type="text/css"></style> </head>
添加背景需要创建background样式：
<style type="text/css">
body{background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)}
</style>
这是网页的预览图，有没有发现什么问题？网页背景图片没有和网页的大小相匹配，出现了两张或好多张图片一起填充网页背景的情况。这是因为图片分辨率和浏览器的显示分辨率不同，因此要使图片根据浏览器的分辨率进行缩放。这就需要设置background属性在横向和纵向上的属性，使其充满全屏。
<style type="text/css">
html,body{height: 100%;}
body{
background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center;
background-size:cover;
}
</style>
想要改变字体颜色的话，需要使用color属性：
html,body{
height: 100%;
color: #ffffff;
}
2.2 调整区域位置
调整区域位置在网页设计中很重要，就想写微信推文，一个好的排版总能让人心情愉悦想要继续读下去，网页也一样，不能总是把东西都堆在一块，或者所有页面千篇一律。
在这个页面上，我想让内容居中显示，于是通过设置container这个容器（就是前面的id为container的div），使其宽度为100%，即横向充满整个屏幕，然后设置其中的文字居中：
#container{
width: 100%;
text-align: center;
}
*在创建css样式时，id类型的选择器需要使用“#”来定义。
之后需要变成垂直居中，先对container的父级，即页面的body做些属性定义，然后通过改变top属性来实现：
body{
background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center;
background-size:cover;
margin: 0;
padding: 0;
position: relative;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
}
要控制container的top属性，就要使container的定位方式为“绝对定位”，而这又需要body（container的父级）为“相对定位”。
top: 50%;使得container的顶部位于整个页面的50%位置。
不过要使得内容区块整体居中，还要使container向上移动其高度的一半。但问题在于container的高度是随着后续的字体、按钮样式而不断动态变化的值，所以不可以直接设置确定值，需要设置transform属性，设置其translateY的数值，使其在Y轴上移动-50%，即向上移动其高度的一半而无需声明container具体多高。代码如下：
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
-ms-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-o-transfrom:translateY(-50%);
}
这里多次重复定义是因为，不同浏览器对于transform属性的支持并不相同，为了使得页面在各种浏览器下都能够正常显示不得不这么做。
2.3 调整字体和字号
考虑到不同电脑上字体库的问题，可能同一个字在不同电脑上显示不同或生僻字不能显示，需要设置font-family属性为sans-serif，即系统默认的无衬线字体;
html,body{
height: 100%;
color: #ffffff;
font-family: sans-serif;
}
接下来要调整文字大小，将h1标题的字号设置为了更大的54像素，并且小写变大写：
h1{
font-size: 54px;
text-transform: uppercase;
margin-bottom: 20px;
}
设置说明文字的样式，使段落文字字号更大，且拉开距离，代码如下：
p{
font-size: 21px;
margin-bottom: 40px;
}
?后记：对于大部分转行的人来说，找机会把自己的基础知识补齐，边工作边补基础知识，真心很重要。"我们相信人人都可以成为一个IT大神，现在开始，选择一条阳光大道，助你入门，学习的路上不再迷茫。这里是北京尚学堂，初学者转行到IT行业的聚集地。"
天是2022年第一天，站在2022年的开始回首整个2021年并没有发现自己有很大的进步。2022年一定要行动起来，丰富自己。
2022年给自己定几个目标：
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等 HTML历史上有如下版本： ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 ②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 ③HTML 3.2：1997年1月14日，W3C推荐标准。 ④HTML 4.0：1997年12月18日，W3C推荐标准。 ⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 ⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持 `
HTML 标记标签通常被称为 HTML 标签 (HTML tag) <标签>内容</标签>
HTML 元素包含了开始标签与结束标签，元素的内容是开始标签与结束标签之间的内容，元素属性是 HTML 元素提供的附加信息。
<!DOCTYPE html> 声明为 HTML5 文档<html> 元素是 HTML 页面的根元素<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。<title> 元素描述了文档的标题，浏览器标签名，通常放到head里面<body> 元素包含了可见的页面内容块级元素只能出现在 <body> 元素内。
格式
默认情况下，块级元素会新起一行。
内容模型
一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。 HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别 (en-US)代替。”块级“类别大致相当于 HTML5 中的流内容 (en-US)类别，而”行内“类别相当于 HTML5 中的措辞内容 (en-US)类别，不过除了这两个还有其他类别。
标签与描述
标签名 | 描述 |
address | 联系方式信息 |
article (HTML5) | 文章内容 |
aside (HTML5) | 伴随内容 |
blockquote | 块引用 |
dd | 定义列表中定义条目描述 |
div | 定义列表中定义条目描述 |
dl | 文章内容 |
fieldset | 表单元素分组 |
figcaption (HTML5) | 图文信息组标题 |
figure (HTML5) | 可附标题内容元素 |
footer (HTML5) | 区段尾或页尾 |
form | 表单 |
h1~h6 | 标题 |
header (HTML5) | 页头 |
hgroup (HTML5) | 标题组 |
hr | 分割线 |
nav (HTML5) | 导航 |
noframes | 针对不支持框架的用户的替代内容 |
noscript | 针对不支持客户端脚本的用户的替代内容 |
ol | 有序列表 |
p | 段落 |
section (HTML5) | 一个页面区段 |
table | 表格 |
tbody | 表格中的主体内容 |
td | 表格中的单元 |
tfoot | 表格中的表注内容（脚注） |
th | 表格中的表头单元格 |
thead | 表格中的表头内容 |
time | 日期/时间 |
tr | 表格中的行 |
ul | 无序列表 |
行内元素
一般情况下，行内元素只能包含数据和其他行内元素。
格式
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
标签与描述
标签名 | 描述 |
a | 锚 |
abbr | 缩写 |
acronym | 只取首字母的缩写 |
b | 粗体 |
bdo | 文字方向 |
big | 大号文本 |
br | 简单的折行 |
button | 按钮 (push button) |
cite | 引用(citation) |
code | 计算机代码文本 |
command | 命令按钮 |
dfn | 项目 |
del | 被删除文本 |
em | 强调文本 |
embed | 外部交互内容或插件 |
i | 斜体字 |
img | 图像 |
input | 输入控件 |
kbd | 键盘文本 |
label | input 元素的标注 |
map | 图像映射 |
mark | 有记号的文本 |
objec | 内嵌对象 |
progress | 任何类型的任务的进度 |
q | 短的引用 |
samp | 计算机代码样本 |
select | 选择列表（下拉列表） |
small | 小号文本 |
span | 文档中的节 |
strong | 强调文本 |
sub | 下标文本 |
sup | 上标文本 |
textarea | 多行的文本输入控件 |
time | 日期/时间 |
tt | 打字机文本 |
var | 文本的变量部分 |
video | 视频 |
wbr | 可能的换行符 |
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
格式 默认情况下，行内元素不会以新行开始，能够识别宽高
标签与描述
标签名 | 描述 |
img | 图片 |
input | 输入框 |
textarea | 多行文本 |
meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。
常用的meta标签：
<meta charset="UTF-8" ><meta name="keywords" content="关键词" /><meta name="description" content="页面描述内容" /><meta http-equiv="refresh" content="0;url=" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">移除的元素有
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。 语义化的优点如下：
参考上文
参考上文
head 标签用于定义文档的头部，它是所有头部元素的容器。 head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分：base, link, meta, script, style, title 其中 title 定义文档的标题，它是 head 部分中唯一必需的元素。
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚? JavaScript 脚本的解析。它必须声明在HTML?档的第??。 浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是CSS1Compat）：
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加
两者区别：
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
*请认真填写需求信息，我们会在24小时内与您取得联系。
