zoukankan      html  css  js  c++  java
  • HTML第一讲

    HTML标记区分

    HTML即超文本标记语言(HtyperText Markup Language),其作用就是将编辑的内容在屏幕上显示。文件的后缀为.HTML。

    在HTML中成对出现的叫做双标记(譬如:<p></p>,<a></a>等等;其中<p>称为开始标记,</p>称为结束标记),而有些标记单独出现,譬如(<br />,<hr />),等这些称为单标记

    (而在网页中单标记比较少)

    CSS

    CSS(Cascading Style Sheets),即层叠样式表。其作用就是给网页的显示增加色彩的效果,美化网页。文件的后缀为.CSS。

    JavaScript

    JavaScript又称为脚本。为网页添加动态效果。原生的JavaScript现在很少人在用,大多数人现在使用的是jQuery。文件的后缀为.JS或者.JQ

    一个HTML该怎么写

    首先在head中定义样式,或者脚本。title 表示显示的网页名字。body 又称为主体部分,显示在网页中的内容都在body中编写。

    下面是代码:第一个网页hello  word

    1 <!doctype html>
    2 <html>
    3 <head>
    4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    5 <title>注册</title>
    6 </head>
    7 <body>
    8      <p>hello word</p>
    9 </body>

    定义CSS样式

    CSS样式的定义规则有三种

    1.内联CSS样式

    格式:

    <标记名 style=" ;"></标记名>  其中多个样式使用;分隔开

      内联式顾名思义就是在标记名内部使用。下面举例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p style="font-size: 18pt;color:#FF0000;">hello word</p>
        <p style="font-size: 18pt;color:#00FF00;">hello word</p>
        <p style="font-size: 18pt;color:#0000FF;">hello word</p>
    </body>
    </html>

    2.内嵌CSS样式

    格式

    <style type="css/text" ></style>

    内联样式要在head 标记内部添加。与上一种方式相比,此方法可以简化代码。以减少代码量,通过比较不难发现如果同时定义的内联式要写三遍,而下列方式只需要修改特定格式。

    下面举例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            p{
                font-size: 18pt;
                color:#FF0000;
            }
            .p1{
                color:#00FF00;
            }
            #p2{
                color: #0000FF;
            }
        </style>
    </head>
    <body>
        <p>hello word</p>
        <p class="p1">hello word</p>
        <p id="p2">hello word</p>
    </body>
    </html>

    3.引用外部独立的.CSS样式文件

    格式:

    <link type="text/css" rel="stylesheet" href=""/>

    此定义方式需要在head中定义一个外部的CSS文件,你需要先定义好外部CSS样式表,然后通过link标记引用进来。与上面的方式相比,如果定义的样式过多会显得头部定义比较冗余,通过引用外部的样式表减少冗余性。

    下面举例:

    CSS文件中代码

     1 p{
     2     font-size: 18pt;
     3     color:#FF0000;
     4 }
     5 .p1{
     6     color:#00FF00;
     7 }
     8 #p2{
     9     color: #0000FF;
    10 }

    HTML中的代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <link rel="stylesheet" type="text/css" href="ceshi.css" />
     7 
     8 </head>
     9 <body>
    10     <p >hello word</p>
    11     <p class="p1">hello word</p>
    12     <p id="p2">hello word</p>
    13 </body>
    14 </html>


    引用外部样式还有第二种方法

    在style开头使用@import引用外部样式表(样式代码就是上面的在这就不写了)

    下面是案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            @import "ceshi.css";
        </style>
    
    </head>
    <body>
        <p >hello word</p>
        <p class="p1">hello word</p>
        <p id="p2">hello word</p>
    </body>
    </html>
  • 相关阅读:
    k8s service的DNS名称解析之CoreDNS
    k8s service负载均衡实现之iptables
    k8s 将项目暴露到互联网访问
    k8s 日志按体现分类与采集思路
    k8s ingressd的http对外暴露网站
    k8s 容器交付流程和项目部署流程
    k8s ingress使用DaemonSet部署
    Google Base与科学家数据共享 (Nature Vol 438|24 November 2005)
    总结:rdf:ID和rdf:about的区别(转载)
    一个元搜索引擎
  • 原文地址:https://www.cnblogs.com/j839035067/p/6576388.html
Copyright © 2011-2022 走看看