【云+社区年度征文】--简单网页基础介绍

原创

用户8051519

修改于 2020-12-03 14:52:49

8660

文章被收录于专栏：html语法html语法

简单网页基础介绍

1.HTML简单理解：

HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”，它实际上是专门用来编写网页的一种编程语言，网页的构成基础就是HTML的语句。

先了解一下简单的网页构成：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
</body>
</html>

解析：

<!DOCTYPE html>：声明为 HTML5 文档

<html>：元素是 HTML 页面的根元素

<head>：元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

<title>：元素描述了文档的标题

<body>：元素包含了可见的页面内容

<h1>：元素定义一个大标题

<p> ：元素定义一个段落

提示：

1.多数标签都是成对出现，其中别标签因为只有单一功能。

2.网页文档的后缀名为 .html或 .htm 两种后缀名都可以使用,初学者不用去纠结。刻意去了解的话，点击：[地址直达](https://www.cnblogs.com/foever-lee/p/10166388.html)

2.内部样式表和内联样式表的区别

内部样式表：

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style type="text/css"> hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");} 
 </style>
 </head>

内联样式:

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距.

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

3.dreamweaver常用代码注释

一、色彩属性：

1.色彩属性：

color=#RRGGBB;前景色，参考色彩对照表

bgcolor=#RRGGBB;背景色

2.样式属性：

font-size：字体大小

color：字体颜色

font-family：字体

font-weight：字体加粗

background-color:背景颜色

text-align:文本对齐方式

width:宽

height:高

border:边框

border-color:边框颜色

border-left:#左边框

border-left-left:左边框颜色

background-image:背景图片

background-color:背景颜色

background-repeat:背景图片重复方式

margin:边缘距离，0px auto 可以加上一个div绝对居中z-index

a:hover{}定义鼠标经过衔接字体时的属性，如颜色等

a:link{}定义连接文字被点击过的颜色

body{}:定义body样式

p{}定义p标签样式

二、行为动作

onclick:鼠标点击

onmouseocver:鼠标经过

onmouseout:鼠标移走

onload:打开某某时载入某某

onunload:关闭某某时弹出某某

三、基本属性

colspan=""单元格跨越多列

rowspan=""单元格跨越多行

align=""对齐方式

border=""边框宽度

bgcolor=""背景颜色

bordercolor=""边框颜色

bordercolorlight=""边框明亮颜色

bordercolordark=""边框淡面颜色

cellpadding=""内容与边框的距离（默认2）

cellspacing=""单元格间的距离（默认2）

4.CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明,并用花括号包括声明。

例：下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
h1 {color:red; font-size:14px;}
<title>标题</title>
</head>
<body>
<h1>这个标题颜色为红色，字体大小为14px</h1>
</body>
</html>

5.CSS 选择器

1.元素选择器(标签选择器)

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器，元素选择器又叫标签选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}

h1 {color:blue;}

2.ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

代码展示如下：

<!doctype html>
<html>
<title>这里是一个标题！</title>
<head>
<meta charset="utf-8">
<style type="text/css"> 
#red {color:red;}/*定义第一个id选择器的颜色为红色*/
#green {color:green;}/*定义第二个id选择器的颜色为绿色*/
 </style>
 </head>
 <body>
 <p id="red">这个段落是红色。</p>/*id 属性为 red 的 p 元素显示为红色*/
 <p id="green">这个段落是绿色。</p>/* id 属性为 green 的 p 元素显示为绿色*/
 </body>
 </html>

注意：id 属性只能在每个 HTML 文档中出现一次。

3.类选择器

类选择器实例如下：

.center {text-align: center}

在 CSS 中，类选择器以一个点号显示：所有拥有 center 类的 HTML 元素均为居中。

代码展示如下：

<!doctype html>
<html>
<title>这里是一个标题！</title>
<head>
<meta charset="utf-8">
<style type="text/css"> 
.center {text-align: center}
 </style>
 </head>
 <body>
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
 </body>
 </html>

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

和 id 一样，class 也可被用作派生选择器：

.fancy td {
    color: #f60;
    background: #666;
    }/*类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
    （名为 fancy 的更大的元素可能是一个表格或者一个 div）*/

元素也可以基于它们的类而被选择：

td.fancy {
    color: #f60;
    background: #666;
    }

3.通配符选择器

在CSS中，使用 * 代表所有的标签或元素，它叫做通配符选择器。

比如：* { color : red; } 这里就把所有元素的字体设置为红色。

*会匹配所有的元素，因此针对所有元素的设置可以使用*来完成。

例子如下：

*{margin:0px; padding:0px;}/*这里是设置所有元素的外边距margin和内边距padding都为0。*/

以上就是本人对简单网页的基本介绍了，又错误的地方还希望大家指出来，大佬可以滑过！

分享一篇自己的故事给大家：

今年对我来说是非常特别的一年，虽然对明天充满着期待，但还有一丝忧伤。考研国家线公布前，由于疫情的原因呆在家，让我的注意力都在关注这方面的消息，心情比较忧郁，父母也常常会跟我提起这个事，让我不知道如何回应。现实是未知多变的，定出的目标计划随时都可能遭遇问题。认认真真的准备这么长时间，直接一场考试可以否定自己，也可成就自己。当时心情可谓是跌宕起伏，那种感觉真的不希望再有。黎明的曙光总会到来，想了想当初考研的自己，调整好心态，抱着坚定的信念去查分数，过线了。那是真的，不是梦。

成绩出来后的那晚，我很久才入睡。并不是过线的原因，而是我考试前的那种自信哪里去了？翻来覆去，终于想通过了：磨砥刻厉，业精于勤。自己的付出和回报是成正比的。那晚之后重新找回自我，迸发出了对研究生学习的激情和生活的向往。我深知考研阶段生活的不易，二战的我更加珍惜复试的机会。拂去焦躁，放平心态，通过自己的努力顺利通过了复试。

九月，我期盼已久的研究生生活开始了。在学习上有导师的指导，同学们的帮助，生活中有辅导员耐心的答疑，研究生生活好不惬意。令我印象最深的是老师经常提到的“研究”一词，研究性的学习能大大增强学习的自主性，让学习不是被动的接受知识，而是有充分的理由，自己去获取知识，真正的变“要我学”为“我要学”。这让我对研究生的学习有了新的认识和态度，今后对研究生的学习和生活做出规划，找到自己的研究方向。师兄、师姐又发表了一篇论文，找到一份高薪的工作，这些事经常都能听到同学们聊起。他们的成功，不是一蹴而就的，整天泡实验室看文献、做笔记、找资料，把平时的时间都排的很满，过的很充实。看到师兄、师姐取得的成绩，也让我非常注重时间观念，注重学习效率。

其实，每个人心中都有一座山峰，雕刻着理想、信念、追求、抱负；每个人心中都有一片森林，承载着收获、芬芳、失意、磨砺。一个人，若要获得成功，必须拿出勇气，付出努力、拼搏、奋斗。找到自己的兴趣，确定长远的目标，从而决定自己的发展。在日常学习中找到自己的研究方向，努力学习应有的必备知识，才能真正实现研究生以及人生的宏伟价值。

磨砥刻厉，业精于勤。致远方，致努力的自己！

本人在专业方面并不擅长，所以选择考研。无论是做老师还是考公务员，以后想多一个求职选择的机会！

以上就是我的分享，如果觉得不错，请给我点一个大大的赞！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

html

登录后参与评论

0 条评论

热度