码迷,mamicode.com
首页 > Web开发 > 详细

HTML

时间:2018-11-14 19:06:19      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:下拉   标题   family   顺序   建议   格式   展示   合作   表示   

HTML-20181114

 

一、HTMLCSS的关系

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现

3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。例如:

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>Html和CSS的关系</title>

        <style type="text/css">

        h1{

        front-size:10px;     #窗口文字大小的变化

        color:#930;          #窗口文字的颜色变化

        text-align:center;   #窗口文字位置的居中

 

        }

        </style>

    </head>

    <body>

        <h1>Hello World!</h1>

    </body>

</html>

 

二、网页的构成

标题标签<h1></h1>

段落标签<p></p>

图片img标签<img src=”wangzhi.img”>

 

 

三、标签的语法

1、标签由英文的<>括起来,<html>就是一个标签;

2、标签一般是成对出现的,分为开始标签和结束标签;并且结束标签比开始标签多了个/;

3、标签和标签之间可以进行嵌套,但是先后顺序必须保持一致;

4、HTML的标签不区分大小写,建议小写;

 

 

四、HTML文件基本格式

一个HTML文件有着自己固定的格式:

<html>

<head>...</head>

<body>...</body>

</html>

1<html> </html>称为根标签,所有的网页标签都在根标签中;

2<head>标签用于定义文档的头部;它是所有元素的容器。头部元素包括:<title><script><style><link><meta>等;

3、在<body></body>之间的内容时网页中需要表现出来的内容,包括<h1><p><a><img>都包含在其中。

 

五、认识head标签

关于head标签的作用:文档头部中描述了文档的各种属性和信息,绝大部分的文档头部包含的数据是不会真正展示出来,下面标签可以用于head部分:

<head>

    <title>...</title>

    <meta>

    <link>

    <style>...</style>

    <script>...</script>

</head>

 

<title>标签:在<title></title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title

 

六、HTML代码注释和标签的用途

代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。第812行就是注释。

 

标签的用途:学习网页制作时,常常会听到一个词,语义化。做语义化就是明白每个标签的用途(在什么情况下使用此标签合理),比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中需要强调的文本,就可以使用em 标签表示强调等等。语义化的好处:更容易被搜索引擎收录;更容易让屏幕阅读器读出网页的内容。

 

HTML

标签:下拉   标题   family   顺序   建议   格式   展示   合作   表示   

原文地址:https://www.cnblogs.com/pqcxmu/p/9959164.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!