zoukankan      html  css  js  c++  java
  • 网页开发(HTML 基础)

    网页的标准是W3C,目前模式是HTML、CSS和JavaScript。

    HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言

    CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS

    HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为

    HTML 标签

    1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`、`<p>`都是标签。
    2. HTML中标签**通常**都是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个`/`,如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。
    3. 标签之间是可以嵌套的。例如:div标签里面嵌套p标签的话,那么`</p>`必须放在`</div>`的前面。
    4. HTML标签不区分大小写,`<h1>`和`<H1>`是一样的,但是我们通常建议使用小写,因为大部分程序员都以小写为准。


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html>

    <!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。

    1. <html></html> 称为根标签,所有的网页标签都在<html></html>中。
    2. <head></head> 标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title><script><style><link><meta>等标签,头部标签在下一节中会有详细介绍。
    3. <body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在<body>标签中的内容(图中淡绿色部分内容)最终会在浏览器中显示出来。

    HTML文档包含了HTML标签及文本内容,不同的标签在浏览器上会显示出不同的效果,所以我们需要记住最常见的标签的特性



    head标签

    
    

    我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端)的等。 以下标签是可以用在head标签中的:

     
    <head lang='en'>
        <title>标题信息</title>
        <meta charset='utf-8'>
        <link>
        <style type='text/css'></style>
        <script type='text/javascript'></script>
    </head>
    
    

    title标签

    <title>标签:在<title></title>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。t

    <!DOCTYPE HTML>
    <html>
        <head>
            <title>蒂法</title>
        </head>
        <body></body>
    </html>

     

    meta标签

    
    

    Meta标签介绍:

    
    

    元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。

    
    

    标签位于文档的头部,不包含任何内容。

    
    

    提供的信息是用户不可见的。 meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

    
    

    常用的meta标签:

    
    
    1. http-equiv属性
    
    

    它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

     
    
    
    <!--重定向 2秒后跳转到对应的网址,注意分号-->
    <meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
    <!--指定文档的内容类型和编码类型 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <!--告诉IE浏览器以最高级模式渲染当前网页-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    
    
    1. name属性

    主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="拉拉">

    其他标签

    <!--标题-->
    <title>路飞学城</title>
    <!--icon图标(网站的图标)-->
    <link rel="icon" href="fav.ico">
    <!--定义内部样式表-->
    <style></style>
    <!--引入外部样式表文件-->
    <link rel="stylesheet" href="mystyle.css">
    <!--定义JavaScript代码或引入JavaScript文件-->
    <script src="myscript.js"></script>
    
    
    
    
    
    testHTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <!--指定文档的内容类型和编码类型 -->
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <!--重定向 2秒后跳转到对应的网址,注意分号-->
        <!--<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">-->
    
        <!--标题-->
        <title>蒂法</title>
        <!--icon图标(网站的图标)-->
        <link rel="icon" href="juhua.png">
    </head>
    <body>
    <h1>海燕</h1>
            <p>在苍茫的大海上,</p>
            <p>狂风卷集着乌云。</p>
            <p>在乌云和大海之间,</p>
            <p>海燕像黑色的闪电,</p>
            <p>在高傲地飞翔。</p>
            <h1>一级标题</h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <h4>四级标题</h4>
            <h5>五级标题</h5>
            <h6>六级标题</h6>
        <!--定义JavaScript代码或引入JavaScript文件-->
        <script src="myscript.js"></script>
        </body>
    </body>
    </html>
    
    
    




  • 相关阅读:
    centos8重置root密码
    Mysql查询某列最长字符串记录
    ssm连接mysql出现Connections could not be acquired from the underlying database 问题
    spring-基于xml配置Bean
    WinForm控件命名缩写
    SQL Server 将一张表的某个字段更新到另一张表中
    SQL Server 取出指定字符后字符串(用于分割)
    小白学CMD下运行MySQL
    Bootstrap3.0和bootstrap2.x的区别
    有关js弹出提示框几种方法
  • 原文地址:https://www.cnblogs.com/mjiu/p/9149802.html
Copyright © 2011-2022 走看看