sql初学者指南_Web设计初学者指南:第1部分_daique1908的博客-程序员宝宝

技术标签: python  java  web  html5  html  

sql初学者指南

在整个系列中,您将学习如何使用最新的Web设计技术(HTML5和CSS3)创建网站。 本系列针对的是那些以前对网页设计知识绝对为零的人。


此系列中也可用:

  1. Web设计初学者指南:第1部分
  2. Web设计初学者指南:第2部分
  3. Web设计初学者指南:第3部分

现代网络浏览器

当我们要使用最新的标准(HTML5和CSS3)创建网页时,我们需要一个能够理解最新网络技术的现代化网络浏览器。

低于IE8的Microsoft Internet Explorer浏览器版本根本不会削减。 如果您使用的是IE7或更低版​​本,请下载下面的一种网络浏览器。

如果您已经在使用其他网络浏览器,请检查其是否符合以下最低要求,以获得最佳性能。

“为什么需要特定的浏览器?” 你可能会问。 嗯,由于HTML5相对较新,因此较旧的浏览器无法理解如何阅读代码并将其正确地转换为网页。


文本编辑器

HTML文件只是带有.html扩展名的文本文件,因此您不需要任何专业或昂贵的软件(例如Dreamweaver)来创建它们。 实际上,您的计算机已预装了软件,您可以在– Windows上的“记事本”或Mac上的“ TextEdit”(以“纯文本模式”)中编写网页。

尽管计算机上预装的软件可以运行 ,但远非最佳。 如果您使用Windows或Mac上的TextWrangler ,我建议下载Notepad ++ 。 这两个程序都是完全免费的,并提供了许多对Web开发人员有用的功能,例如语法突出显示,选项卡式文件编辑和行号。

对于Mac用户,我强烈建议购买TextMateCodaEspresso 。 Windows用户,请尝试使用E-TextEditor


HTML简介

互联网上的每个网站都是用超文本标记语言(HTML)编写的。 随着Web变得更加主流以及网站发现自己需要新功能,HTML语言已经增长并扩展了多年。

HTML语言由万维网联盟 (W3C)维护,最新规范当前为HTML 5,该语言已为该语言添加了许多新功能,并有助于为更具交互性和功能丰富的网页铺平道路。

一个简单HTML页面如下所示:

<!doctype html> 
	<html> 
	  <head> 
	    <title>Hello, World!</title> 
	  </head> 
	  <body> 
	    <p>Hello, and welcome to my website.</p> 
	  </body> 
	</html>

在网络浏览器中打开时,以上代码将创建以下网站:

HTML是一种非常简单的语言。 您只需在内容中插入“标签”即可概述应如何在网络浏览器中显示每一位内容。

例如,您可以在页面中插入标签,从中开始新的文本段落,使文本成为文档中的标题,插入图像,指向网站上其他页面或Internet上其他页面的链接等。

HTML标签包装在<>尖括号内。 查看前面的示例,您将看到每个“标签”都是一对。 我们在顶部是<html>,在底部是</ html>。

<html>通知Web浏览器,标记对中的所有内容都是HTML代码。 </ html>标签告诉浏览器HTML内容已结束。 最后一个标签中的“斜杠”将其表示为“关闭”标签。


注意: <!doctype html>行必须包含在任何HTML5的顶部,这样它才被视为“有效”代码。 此行告诉Web浏览器页面其余部分的“文档类型”,换句话说,标记了文档HTML版本,以便浏览器可以正确呈现该文档。


紧随其后的<head>…</ head>部分是您放置有关网页的信息的信息,该信息不会显示在主页本身中,但会保留有关浏览器页面的元数据。

在<head>部分中,有文本“ Hello,World!”。 包裹在<title>…</ title>标记内。

<title>字面包含当前网页的标题,网络浏览器使用该标题来命名窗口/标签:

在<head>部分之后,我们有<body>。 这是放置网页实际内容的位置。 在正文中,我们有一个<p>标记,其中带有一些欢迎文本。

<p>在页面上标记一个段落。 例如:

<p>Once upon a time in a land far, far away there lived a princess who lived happily ever after.</p> 
 
	<p>The End.</p>

标记两段文字。 如果要在浏览器中查看,我们将看到以下内容:

您可能想知道为什么我们需要这些<p>和</ p>标记来显示一个段落。 好吧,如果我们没有,就这样编写网页:

Once upon a time in a land far, far away there lived a princess who lived happily ever after. 
 
	The End.

该页面在浏览器中将如下所示:

如您所见,浏览器将忽略我们在文件中进行的任何格式化。 我们可以编写示例网页,如下所示,它将在浏览器中显示该网页:

<!doctype html><html><head><title>Hello, World!</title></head><body><p>Hello, and welcome to my website</p></body></html>

浏览器仅对HTML标记告诉它的操作感兴趣。 它将忽略您包含在文档中的任何空格(多余的空格,制表符,换行等)。


创建一个简单的网页

现在您了解了HTML的基本知识,让我们制作我们的第一个网页! 上图是此页面最终的外观。

在计算机上的某个位置创建一个新文件夹,并将其命名为“ html-from-scratch”。 使用您喜欢的文本编辑器,创建一个新的空白文件,并将其另存为“ my-first-webpage.html”。

在文件中输入以下内容:

<!doctype html> 
	<html> 
	  <head> 
	    <title>HTML From Scratch</title> 
	  </head> 
	  <body> 
	    <!-- content goes here --> 
	  </body> 
	</html>

上面是基本HTML 5文件布局。 我们已经在第一行声明了文档类型,打开了<html>和<head>标签,并将“ HTML From Scratch”设置为页面的标题。 然后,我们关闭头部并打开身体。

在第7行,我们添加了评论。 使用注释将多余的信息保留在您的代码中,这些信息不会显示在您的网页中。 通过在<!-和->标记内包装文本来标记注释。

最后,我们关闭打开的body和html标签以完成文档。


标头

从源代码中删除<!-内容在这里->行,然后键入以下内容:

<header> 
	  <h1>HTML From Scratch</h1> 
	</header>

<header>标记是HTML5中引入的新元素,用于标记和构建网页的“ header”部分。 标头是网页的顶部,通常是网站的名称。

在HTML5之前,我们使用<div id =“ header”>和</ div>(或类似的东西),但是在学习最新标准时,我不会详细介绍HTML的旧规范。

重要说明: <header>不应与<head>混淆。 它们都是完全不同的标签。

在标题内,我们包含一个<h1>标记。 H1用于标记页面上的主要标题(在本例中为我们网站的名称)。 HTML包含从1-6的标题标签,其中<h1>是页面上直至<h6>的最大,最重要的标题。


导航

接下来,我们将标记网站的导航菜单。 在结束</ header>之后,键入以下内容:

<nav> 
	  <ul> 
	    <li>Home</li> 
	    <li>Nettuts</li> 
	    <li>Google</li> 
	  </ul> 
	</nav>

这部分代码可能看起来有些吓人,但让我们对其进行分解。 上面的块标记了一个导航区域(<nav>),该区域包含具有三个列表项(<li>)的无序列表(<ul>)。

<nav>是一个新HTML5元素,用于标记网站上的导航区域。 通常,它用于保存网站的主导航菜单,但是由于我们现在仅创建一个网页,因此仅链接到Nettuts和Google。 <ul>创建一个项目符号列表,每个<li>项目(列表项目)是列表中的一个新项目符号。

保存文件,然后在网络浏览器中打开“ my-first-webpage.html”。 您应该看到以下内容:

如您所见,<title>标签正常工作,<h1>标签在页面顶部显示一个大标题,并且我们的项目符号导航列表正确显示。

您可能会注意到,我们的导航列表目前存在一个问题:这些项目不是超级链接,因此它们不可单击。 要解决此问题,请将三个列表项(<li>)更改为:

<li> 
	  <a href="my-first-webpage.html">Home</a> 
	</li> 
 
	<li> 
	  <a href="http://net.tutsplus.com">Nettuts</a> 
	</li> 
 
	<li> 
	  <a href="http://www.google.com">Google</a> 
	</li>

在每个<li>列表项中,我们已将文本设置为超链接。 <a>标记创建一个锚点-指向您网站上另一个页面或Internet上另一个位置的超链接。

为了使anchor标签实际链接到某处,我们为它提供了要链接到“ href”参数内部的地址。 参数位于开始标记(<a href=""> ... </a>)内。

在我们的网页上,“主页”链接转到当前页面(“ my-first-webpage.html”),“ Nettuts”链接到Nettuts(http://net.tutsplus.com),而“ Google”链接转到您猜对了,Google。


主要内容

在</ header>标记之后,键入以下内容:

<section> 
	  <p>This is the main content for my website.<br /> 
	  Here is some stuff about me:</p> 
 
	  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> 
	</section>

<section>标记也是HTML5中的新功能(我们曾经使用<div id =“ content”>之类的东西),并在网页上按字面意义创建了内容的“部分”。 在这种情况下,我们使用<section>标记内容所在页面的主要部分。

在内部,我们有两个包含随机文本的段落。 请注意,在第一段中,我们有一个<br />标签。 这是换行符; 换句话说,其后的文本将在同一行中换行显示。

<br />标签很特殊,因为它没有结束标签。 取而代之的是,在标记的末尾包含右斜杠('/')。 这是因为换行符不包含任何内容,它纯粹是出于美学目的而存在,否则我们将编写<br> </br>有点没有意义。

其他一些标签也是自动关闭的,例如<img />和<hr />,我们将在后面介绍。


图片

在“ html-from-scratch”文件夹中,创建一个名为“ images”的新文件夹。 将下面的图像保存到该文件夹​​中(右键单击,将图像另存为):

现在,回到网站的主要内容中,在</ section>标记之前,输入以下内容以在我们的页面上插入图片:

<img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/076_beginnerWebDesign/part1/images/envato-stock.jpg" alt="Envato Stock Image" />

<img />标记与锚标记一样,是自动关闭的,并接受其大部分内容作为开始标记中的参数。

src =“ ...”代表“源”(图像的路径)。 该图像可以存储在Internet上的其他位置,也可以存储在网页的本地位置。 在这里,我们设置了标签以显示保存在图像目录中的图像。

alt =“ ...”包含“替代文本”,如果图像无法加载,将显示该文本。 您通常在此处简要描述图像。

现在看一下页面。 该图像应显示:


侧边栏

接下来,让我们标记网页的侧边栏。 在结束</ section>标记输入以下内容:

<aside> 
	  <hr /><h2>Sidebar</h2> 
	  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas:</p> 
	  <ul> 
	    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
	    <li>Aliquam tincidunt mauris eu risus.</li> 
	    <li>Vestibulum auctor dapibus neque.</li> 
	  </ul> 
	</aside>

<aside>是一个HTML5标记,用于标记网页的一部分,该部分位于主要内容的旁边,例如侧边栏,其中包含的信息内容比该页面的主要部分少。

在侧边栏内,我们有一个标题为“侧边栏”的第三级标题(H3),一个包含一些随机占位符文本的段落,然后是一个包含3个项目的无序列表。

看一下您的页面,您应该在我们放在<section>标签中的内容正下方看到以上内容。 不用担心侧边栏实际上还不是侧边栏,这是HTML的设计方式。 不久之后会更多。


页脚

在我们网站底部的页脚中,将包含一个小的版权声明。 一些网站的页脚和其他详细信息(例如站点地图)更进一步。

<footer> 
	  <p> 
	    Copyright &copy; Your Name 2010.<br /> 
	    Part of a tutorial for <a href="http://net.tutsplus.com">Nettuts+</a>. 
	  </p> 
	</footer>

<footer>也是HTML5中引入的新标签。 您现在可能已经掌握了这一点,应该注意,我们在页脚中添加了一个段落,其中包含我们的版权声明和换行符,然后是指向Nettuts的链接。

注意:请参阅“&copy;” 在我们的页脚中? 那是一个HTML实体。 在浏览器中呈现时,此实体将显示版权符号()。

在Wikipedia上阅读有关HTML字符实体的更多信息


在第2部分

到此结束本系列的第一部分。 在很短的时间内,您已经取得了很多成就! 您已经学到了许多基本HTML标记,并对第一个网页进行了手工编码。

在下一部分中,我们将学习如何使用HTML的犯罪伙伴CSS,以使网页看起来更好,并将上面的基本无样式页面变成我们的最终产品:

翻译自: https://code.tutsplus.com/tutorials/the-beginners-guide-to-web-design-part-1--pre-8944

sql初学者指南

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/daique1908/article/details/106937464

智能推荐

PC-Dmis 二次开发 |(二):VB基本语法_CoomCon的博客-程序员宝宝_pcdmis二次开发

VB常用定义解释:dim a! '定义单精度Single型变量adim [email protected] '定义Currence型变量adim a# '定义双精度Double型变量adim a$ '定义a为字符串tringdim a% '定义a为整型变量integerdim a&amp; '定义a为长整型变量long...

【数据分析】pandas 时间序列-降采样_♚人间海的博客-程序员宝宝_pandas 降采样

PeriodIndex可把分段的时间段合并成一个字段periods=pd.PeriodIndex(year=data[“year”],month=data[“month”],day=data[“day”],hour=data[“hour”],freq=“H”)时间段降采样data = df.set_index(periods).resample(“10D”).mean()不同城市pm2.5...

EI:南土所褚海燕组发现农业土壤微生物核心菌群能够提升土壤生态功能_刘永鑫Adam的博客-程序员宝宝

农业土壤微生物核心菌群能够提升土壤生态功能Abundance of kinless hubs within soil microbial networks are associated ...

‘vue‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件_君之虞的博客-程序员宝宝_vue' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

npm config list 查看一下npm 的配置信息,下图这个一般是npm 按照vue-cli的时候 安装缺失 你可以看看 C:\Users\admin\AppData\Roaming\npm 下 是否有 vue.cmd如果没有:1.重新卸载 npm uninstall vue-cli -g2.重新 npm install -g @vue/cli然后把这个路径添加的系统环境变量的path里面,如下图:最后在来检查一波:...

[论文解读]ICML 2019|EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks_一碗白开水一的博客-程序员宝宝_mbcconv

题目:EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks作者:GOOGLE Mingxing Tan Quoc V. LeMotivation:作者认为网络的扩展是对效果有很大帮助的,但是人们一直没有找到一个有效的扩展方法,作者发现在网络扩展时,通过平衡网络的深度、宽度、像素大小之间的关系来建模,...

【算法011】找出1000以内的所有完数_丘色果的博客-程序员宝宝

一个数如果恰好等于它的因子之和,这个数就称为 "完数 "。例如6=1+2+3.package com.example.chyer.demo;import java.util.Scanner;public class Test { public static void main(String[] args) { for (int i = 1; i &lt;= ...

随便推点

vscode可以结合mingw_vscode加MinGw三步搭建c/c++调试环境_weixin_39528029的博客-程序员宝宝

vscode加MinGw三步搭建c/c++调试环境step1:安装vscode、MinGw1.1 vscod常规安装:https://code.visualstudio.com/1.2 MinGw安装:1.3 下载链接:http://www.mingw.org/注意:将页面下拉,在左侧的 popular content栏,点击download/installer,会自动下载1.4 双击下载文件后安...

PTA7-4 后缀式求值 (25分) (题目 + 代码 + 详细注释 + 坑点分析)_呆码农梦中识bug,程序员哭求加工资的博客-程序员宝宝

我们人类习惯于书写“中缀式”,如3 + 5 * 2,其值为13。 (p.s. 为什么人类习惯中缀式呢?是因为中缀式比后缀式好用么?)而计算机更加习惯“后缀式”(也叫“逆波兰式”,Reverse Polish Notation)。上述中缀式对应的后缀式是:3 5 2 * +现在,请对输入的后缀式进行求值。输入格式:在一行中输入一个后缀式,运算数和运算符之间用空格分隔,运算数长度不超过6位,运算符仅有+ - * /四种。输出格式:在一行中输出后缀式的值,保留一位小数。输入样例:...

KMP算法和next数组k=next[k]难点心得_myh火習的博客-程序员宝宝

最近在看字符串模式匹配KMP算法,不涉及优化,非小白科普帖.KMP算法的关键:    1.求模式串next数组    2.计算后移步数    3.字符串比较难度依次降低.求模式串next数组建议看下https://www.zhihu.com/question/21474082.这里对文中图2进行一下修改,并解释下代码中的k=next[k].接原文,图中前两行表示next[q]=k,模式串前q个字符...

2021-01-13_-ypchen的博客-程序员宝宝

#pragma once#include &lt;stdlib.h&gt;#include &lt;stdio.h&gt;#include &lt;pthread.h&gt;#include &lt;unistd.h&gt;#include &lt;errno.h&gt;#include &lt;sys/types.h&gt;#include &lt;sys/stat.h&gt;class CThread{public: typedef void(*threadFun_t)(v...

Access根据出生日期计算年龄_Access处理数据_weixin_39710561的博客-程序员宝宝

Access数据库常用函数如图所示,可根据实际计算需求采用。一、数值分组1、IIF函数语法如下:IIF (表达式,表达式成立时返回的值,表达式不成立时返回的值)。例如:SELECT用户 ID,年龄,IIF(年龄&lt;=20,"20岁及其以下",IIF(年龄&lt;=30,"21-30岁",IIF(年龄&lt;=40,"31-40岁","40岁以上"))) AS年龄分组FROM用户明细;2、CHO...

4G/5G多卡聚合路由设备多链路图传技术巩固安防监控行业_Multipath712的博客-程序员宝宝

智慧安防之核心是以AI技术为支撑,经过将传感器、视频监控点等数据源的关键物理信息经过传输网络集成到一个综合系统上,再由综合系统分析信息数据,进行信息反馈,使得其所辖制的安防领域可以被动态实时的监控,进一步达到预测威胁并及时响应的目的。这其中,智慧安防由于在传统安防摄像头的边缘端、IT系统所在的云端等核心环节引入了人工智能、大数据等技术,使得其在传统安防技术之上有了质的突破,让安防行业变得更加的智能化、人性化,因此才实现了“传统”到“智慧”的升级,被冠于智慧安防之名。传统安防与人工智能、大数据等技术的结合最后

推荐文章

热门文章

相关标签