首页 > 其他分享 >HTML

HTML

时间:2023-08-02 17:08:36浏览次数:27  
标签:color 标签 height HTML background border 选择器

HTML

1. 块级标签

标题:
<h1>一级标题</h1>
div:
<div>这是一个div标签</div>
p:
<p>这是一个p标签,段落标签</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML块级标签</title>
</head>
<body>
标题:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
div:
<div>这是一个div标签</div>
p:
<p>这是一个p标签,段落标签</p>
table:表格
<table width="100%" border="1">
    <caption>表格的标题</caption>
    <!--表头-->
    <thead>
    <!--表头的行-->
    <tr>
        <!--每一行表头由多少个标题组成-->
        <th rowspan="2">组号</th>
        <th rowspan="2">姓名</th>
        <th rowspan="1" colspan="2">成绩</th>
    </tr>
    <tr>
        <th>JAVA</th>
        <th>HTML</th>
    </tr>
    </thead>
    <!--表格的主题-->
    <tbody>
    <!--表格的主题可能由多行数据组成-->
    <!--知识点:rowspan = "3" 表示列占用的范围
              colspan="1" 表示列占用的范围-->
    <tr>
        <th rowspan="3" colspan="1">第一组</th>
        <th>张三</th>
        <th>80</th>
        <th>90</th>
    </tr>
    <tr>
        <th>李四</th>
        <th>80</th>
        <th>90</th>
    </tr>
    <tr>
        <th>王五</th>
        <th>80</th>
        <th>90</th>
    </tr>
    </tbody>
</table>

</body>
</html>
  • 列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表项</title>
</head>
<body>
ul无序列表
<ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
</ul>
ol有序列表,type属性可以指定序号的类型:数字字母罗马数字
<ol type="A">
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
</ol>
</body>
</html>
  • 表单
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
</head>
<body>
<!--action="Test01.html" method="GET"
action表示请求要发送的地址,method表示请求的方式:GET、POST,POST需要服务器,GET请求支持本地资源访问-->
<form action="Test01.html" method="GET">
    <h1>欢迎使用XXX系统</h1>
    <div><!--这是一个行级标签-->
        <input type="text" name="username">
    </div>
    <div>
        <input type="text" name="password">
    </div>
    <div>
        <input type="submit" value="登录" >
    </div>
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5的块级标签</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;/*弹性布局*/
            flex-direction: row;/*所有子元素在一行中排列*/
        }
        aside{
            width: 200px;
            background: antiquewhite;
        }
        nav {
            background: #dddddd;
            border-bottom: 1px solid #ddd;
        }
        main {
            flex-grow: 1.5; /*根据空间的大小进行增长*/
            flex-shrink: 0.8; /*根据空间的大小进行缩放*/
            background: white;
            display: flex;
            flex-direction: column;
        }
        header {
            height: 50px;
            width: 100%;
            background-color: cornsilk;
            color: white;
        }
        section {
            flex-grow: 1.5; /*根据空间的大小进行增长*/
            flex-shrink: 0.8; /*根据空间的大小进行缩放*/
            display: flex;
            flex-direction: column;
        }
        article {
            flex-grow: 1.5; /*根据空间的大小进行增长*/
            flex-shrink: 0.8; /*根据空间的大小进行缩放*/
            background-color: pink;
        }
    </style>
</head>
<body>
<aside>侧边栏</aside>
<main>
    <header> <font color="black" size="10px">头部区域</font></header>
    <section>
        <nav>操作导航</nav>
        <article>
            独立内容区
            <h1 style="color: red">h5提供的块级元素全部是用在做布局的:</h1>
            <ul>
                <li>main(主要内容区)</li>
                <li>aside(侧边栏)</li>
                <li>header(头部区域)</li>
                <li>section(区域)</li>
                <li>article(独立内容区)</li>
                <li>nav(操作导航)</li>
                <li>footer</li>
            </ul>
        </article>
    </section>
    <footer>
        footer脚注:用于展示版权信息
    </footer>
</main>
</body>
</html>

结果

HTML_html

2. 行级标签

  • input
    input标签表示输入的意思,凡是可以填写内容或者可以点击的标签都是输入
    input标签具有type属性
    type=text文本输入框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<body>
<form action="Form.html" method="get">
    <div>
        <label>账号:</label>
        <input type="text" name="username">
    </div>
    <div>
        <label>密码:</label>
        <input type="password" name="password">
    </div>
    <div>
        <!--checked属性用于单选按钮和复选框时,只要在标签上出现,那么这个标签
            就应该展示选中状态。(设置默认选中),如果一个单选按钮组中的所有单选按钮均存在checked属性
            时,只有最后一个有效果-->
        <!--radio用于单选-->
        <label>性别:</label>
        <input type="radio" name="sex" value="M" checked>男
        <input type="radio" name="sex" value="F">女
        <input type="radio" name="sex" value="O">其他
    </div>
    <div>
        <!--checkbox用于多选,checked可以作用与多选时都会生效-->
        <label>爱好:</label>
        <input type="checkbox" name="hobble" value="0" checked>唱歌
        <input type="checkbox" name="hobble" value="1" checked>跳舞
        <input type="checkbox" name="hobble" value="2">打篮球
        <input type="checkbox" name="hobble" value="3">RAP
    </div>
    <div>
        <!--label 多行文本-->
        <label>评论:</label>
        <textarea rows="15" cols="100">
label多行文本
name属性除了用来采集数据之外,还可以用来对元素进行分组
作为单选按钮的时候,只有同一个组内的单选按钮才会有单选的效果
单选按钮没有value值,如果需要,那么我们可以手动的配置value属性
checked属性用于单选按钮和复选框时,只要在标签上出现,那么这个标签
就应该展示选中状态。(设置默认选中),如果一个单选按钮组中的所有单选按钮均存在checked属性
时,只有最后一个有效果
radio用于单选,checkbox用于多选,checked可以作用与多选时都会生效
input type= "file",用于文件上传
img图像标签
文件的数据采集不能通过name属性进行,那么属性采集的数据只是
文件的名字,文件数据需要通过JavaScript脚本来获取
option表示下拉列表的选项,如果没有给定value值,那么value值
就是option标签的文本内容
<span style="color: red ; font-size: 30px">9.9</span>
        </textarea>
    </div>
    <div>
        <label>头像:</label>
        <img src="img/001.jpg" height="80" width="60" title="证件照" alt="加载错误时显示的信息">
    </div>
    <!--文件的数据采集不能通过name属性进行,那么属性采集的数据只是
            文件的名字,文件数据需要通过JavaScript脚本来获取-->
    <div>
        <label>file:</label>
        <input type="file">
    </div>
    <div>
        <label>下拉选择框:</label>
        <select name="city" id="">
            <option value="">请选择</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">杭州</option>
            <option value="4">成都</option>
        </select>
    </div>
    <div>
        <input type="submit" value="注册">
    </div>
    <div>
        这本书的价格是<span style="color: red ; font-size: 30px">9.9</span>
    </div>
    <div>
        <label>a标签:</label>
        <a href="https://www.baidu.com"></a>
        <a href="Form.html">去自己编写的页面</a>
        <!--锚连接中的锚表示定位,定位的时候只能是#+id的值-->
        <a href="BlockLable.html#p">锚连接</a>
    </div>
</form>
</body>
</html>

结果:

HTML_html_02

JavaScript

  • 在JS中,存在内置对象document,这个对象是浏览器赋予的,直接可以拿来使用,表示文档
  • JS所有的语法支撑是ES来定义的 ES目前使用的最多的是ES6,在ES6中有许多新特性
  • 在ES6中var定义的变量属于全局变量,使用let定义的变量属于局部变量
  • 为什么会使用var或者let来定义变量呢?
  • 因为JavaScript是一门弱类型的脚本语言,所谓的弱类型表示所有的变量没有类型之分。 例如 定义了一个变量 let a =1; 此时的变量a类型为数字,但是我们也可以再给塔赋一 个布尔值 a = true; 这就是弱类型语言的特征。一个变量具体到底是什么类型,需要看 具体赋的什么值

浏览器在解释执行HTML代码的时候,有可能要执行HTML中的脚本语言,只要HTML中存在脚本语言。

为了解析HTML文档,浏览器提供了一个window对象,这个对象是一个复合对象,里面里面包含了很多其他的对象。这些对象主要用于处理页面的中元素以及元素的行为。

window对象中的所有变量都是全局变量,在使用的使用可以省略window,直接使用window中 的变量 let elementById =

window.document.getElementById("username"); 
let element =document.getElementById("username");

在浏览器的窗口的控制台记录

element console.log(element) console.log(element.value)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
<div>
    <div>
        <label>账号:</label>
        <input type="text" id="username"  value="admin">
    </div>
    <div>
        密码:
        <input type="password" id="password">
    </div>
    <div>
        <input type="button" value="登录" id="loginBtn">
    </div>
</div>
</body>
<script type="text/javascript">

    let loginBtn =document.getElementById("loginBtn");

    loginBtn.onclick = function () {
        let usernameEl = document.getElementById("username");
        let username = usernameEl.value;
        let passwordEl = document.getElementById("password");
        let password = passwordEl.value;
        console.log(username + "\t" + password)
    }
</script>

</html>

CSS

层叠样式表,CSS主要用来告诉浏览器元素应该怎样呈现

1. CSS选择器

  • 基本选择器
    ID选择器 类选择器 标签选择器
  • 高级选择器
    层级选择器(子代选择器 后代选择器)

选择器的语法:

ID选择器 => #ID值{}

类选择器 => .类名{}

标签选择器 => 标签名{}

<body>
    <div>
        <input type="text" id="p">
    </div>
    <div>
        <input type="password" class="password">
    </div>
</body>
/*ID选择器*/
#p{
    background-color: cornsilk;
}
/*类选择器*/
.password{
    height: 20px;
    width: 200px;
}
/*标签选择器*/
body{
    width: 100%;
    height: 100%;
    background-color: pink;
}

2.CSS样式的编写方式

  • 行内样式
  • 内部样式
  • 外部样式(需要使用link 引入css)
<link rel="stylesheet" href="../css/chooser.css">

子代选择器和后代选择器:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>子代选择器与后代选择器</title>
        <style>
            /*后代选择器,表示body下所有的input标签*/
            body input{
                background-color: red;
            }
            /*子代选择器,表示body标签下一级的input标签*/
            /*body > input{*/
            /*    background-color: black;*/
            /*}*/
        </style>
    </head>
    <body>
        <input type="text" name="" id="">
        <div>
            <input type="text" name="username" class="username">
            <div>
                <span style="color: deepskyblue">这是一个文本</span>
                <input type="text">
            </div>
        </div>
        <div>
            <input type="text" name="password" class="password">
        </div>
    </body>
</html>

3. CSS样式的属性

1. 通用的样式属性

  • 宽度和高度

width:200px;

height:100px;

  • 外边距margin

元素与元素之间的距离,外边距有4个方向:上下左右 外边距设置属性的时候必须从上边距开始,满足顺时针旋转的规则,依次为每个方向设置边距

height: 100px;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
/*
margin: 20px 30px 40px 50px;
*/

结果:

HTML_html_03

  • 内边距padding
/*padding-top: 10px;*/
/*padding-right: 11px;*/
/*padding-bottom: 12px;*/
/*padding-left: 13px;*/
padding: 10px 11px 12px 13px;

结果:

HTML_html_04

  • 边框border
    边框宽度: border-width
    边框线条类型:border-style
    边框线条颜色:border-color
    复合属性:width style color,顺序可以随意调整
    边框也有4边,因为也可以专门为其中一边进行设置:
    border-top、border-right、border-bottom、border-left
    圆角设计:border-radius
/*border-width: 10px;*/
/*border-style: double;*/
/*border-color: deepskyblue;*/
border: deepskyblue  double 10px;
.ee{
    border-width: 1px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

结果:

HTML_html_05

  • 字体font
    字体类型 font-family
    字体大小 font-size
    字体风格 font-style
    字体重量 font-weight
    字体的复合属性有要求: 风格->重量->大小->类型 或者 重量->风格->大小->类型。
<style>
.font{
    /* font-family: 楷体,serif;
    font-size: 30px;
    font-style: italic;
    font-weight: bold;*/
    font: italic bold 30px 新宋体;
}
</style>
<body>
    <div class="font">
        <h2>这是一个标题</h2>
        <lable>
            字体类型 font-family
            字体大小 font-size
            字体风格 font-style
            字体重量 font-weight
            字体的复合属性有要求: 风格->重量->大小->类型  或者 重量->风格->大小->类型。
        </lable>
    </div>
</body>
  • 文本text
    文本颜色 color
    文本首行缩进 text-indent
    文本行高 line-height:行高可以让文本垂直居中
    文本装饰 text-decoration: 上划线、中横线、下划线
    文本对齐方式 text-align: 居左、居右、居中、两端对齐
<div class="p">
    文本颜色 color 文本首行缩进 text-indent 文本行高  line-height:行高可以让文本垂直居中 文本装饰 text-decoration: 上划线、中横线、下划线 文本对齐方式 text-align: 居左、居右、居中、两端对齐
</div>
<div class="p2">
    文字居中对齐
</div>
<style>
.p{
    width:500px;
    height: 200px;
    font-size: 20px;/*字体大小*/
    color: #00167b;
    text-indent: 2em;/*缩进两个字符*/
    border:2px double cornflowerblue;/*边框*/
}
.p2{
    width: 200px;
    height: 40px;
    border: 1px solid black;
    font-family: 楷体, serif;
    line-height: 40px;/*行高和元素的高度一致时,内容垂直居中*/
    text-align: justify;/*两端对齐,必须配合text-align-last: justify;使用*/
    text-align-last: justify;
    /*overline内容上方的线*/
    /*line-through中间穿过的线*/
    /*underline下划线*/
    text-decoration: underline;
}
</style>
  • 背景background
    背景颜色:background-color
    背景图片:background-image
    背景大小:background-size
    背景位置:background-position
    背景是否可重复:background-repeat
html,body{
    width: 100%;
    height: 100%;
    margin: 0;
}
body{
    background-color: darkgrey;
    background-image: url("../img/002.gif");
    background-repeat: repeat;/*背景图片是否重复*/
    /*
    background-position: 100px 30px;!*背景图片的位置*!
    */
    /*
    background-size: 100% 100%;
    */
    /*背景图片的大小*/
}
  • 浮动float
    元素一旦进行浮动,就不再占用原来的位置空间,因为元素之间的摆放存在层级关系,相当于脱离了当前层级。如果浮动后,还想要元素依然占用父元素的空间,那么需要对浮动进行清除
    可以使用伪类样式来清除浮动
    伪类样式的定义就是使用双冒号来表示伪类
    ::after 表示在渲染CSS样式的最后要使用的样式
    ::before 表示在渲染CSS样式之前要使用的样式
    伪类样式的编写: 选择器::伪类的名称{}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动</title>
        <style>
            input{
                float: left;
            }
            input:last-child {
                float: right;
            }
            div::after{
                content: ""; /*渲染样式的时候要加上一个空白字符串*/
                display: block;/*这个content指定的内容需要以块级元素的方式呈现*/
                clear: both; /*清除div内的元素浮动,清除的时候,因为元素已经浮动了指定的位置,清除之后不回还原,只是将元素再拉回了当前层级*/
            }
        </style>
    </head>
    <body>
        <div>
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
    </body>
</html>
  • 定位position
    元素的定位方式:static(流式定位、默认)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)
    参照物:
    relative:参照物是自身
    absolute:向上逐层查找具有定位的父元素,如果没找到,就回以body标签进行定位,绝对定位的元素脱离了当前父容器的空间,层级已经发生了变化
    拥有定位的元素可以通过z-index来调整元素的层级,值越大,层级越高。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>元素的定位</title>
        <style>
            #d1,
            #d2,
            #d3{
                width: 200px;
                height: 100px;
            }
            #d1{
                background-color: red;
                position: relative;/*相对定位*/
                left: 100px;/*相对自身的位置,偏离左边100个px*/
                top: 100px;
                z-index: 1;
            }
            #d2{
                background-color: blue;
                position: absolute;/*绝对定位*/
                left: 0;
                top: 0;
            }
            #d3{
                background-color: pink;
                position: fixed;/*固定窗口*/
                top: 20%;
                right: 10px;
            }
            .box{
                margin: 0;
                position: relative;
            }
            html{
                width: 100%;
                height: 100%;
            }
            body{
                height: 300%;
            }

        </style>
    </head>
    <body>
        <div class="box">
            <div id="d1"></div>
            <div id="d2"></div>
            <div id="d3"></div>
        </div>
    </body>
</html>

2. 列表样式

列表样式类型:list-style-type:disc(实心圆)、circle(空心圆)、square(正方形)、decimal(数字)

列表样式位置:list-style-position:inside(内部)、outside(外部)

列表样式的图片:list-style-image:url();

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表样式list</title>
        <style>
            ol{
                /*list-style-type: disc;实心圆*/
                /*list-style-type: circle;空心圆*/
                list-style-type: square;/*正方形*/
                /*list-style-type: decimal;数字*/
                list-style-position: inside;/*列表样式的位置*/
                list-style-image: url("../img/002.gif");
            }
        </style>
    </head>
    <body>
        <div>
            <ol>
                <li>第一项</li>
                <li>第二项</li>
                <li>第三项</li>
                <li>第四项</li>
            </ol>
        </div>
    </body>
</html>

3. 超链接伪样式

超链接的伪样式有四种:点击前,鼠标单击,鼠标悬浮,鼠标单击后

link->visited->hover->active

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>超链接的伪样式</title>
        <style>
            a:link{
                color: antiquewhite;
            }
            a:visited{
                color: blue;
            }
            a:hover{
                color: pink;
            }
            a:active{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="https://www.baidu.com">www.baidu.com</a>
        </div>
    </body>
</html>

4. CSS3新增的样式属性

1 文本阴影

<h1>这是标题</h1>
h1{
    text-align: center;
    text-shadow: 2px 1px 1px #da1e1e;
    background-color: black;
    color: white;
}

2 盒子阴影

<div class="box"></div>
.box{
    width: 400px;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 3px 2px 10px black;
}

3 关键帧动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .block{
            width: 50px;
            height: 50px;
            background-color: red;
            position: relative;
            animation: move 10s infinite;
        }
        @keyframes move {
            0%{。.
                top: 0;
                left: 0;
            }
            25%{
                top: 0;
                left: 400px;
            }
            50%{
                top: 200px;
                left: 400px;
            }
            75%{
                top: 200px;
                left: 0;
            }
            100%{
                top: 0;
                left: 0;
            }
        }
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>

4 渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景色</title>
    <style>
        .box1{
            height: 20px;
            /*线性渐变*/
            background-image: linear-gradient(to right, #9c8484, red);
        }

        .box2{
            width: 200px;
            height: 200px;
            /*径向渐变*/
            background-image: radial-gradient(yellow, red, blue);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

4.45 字体图标

CSS3可以让我们自己定义字体图标。目前用的比较多的就是font-awesome 字体

标签:color,标签,height,HTML,background,border,选择器
From: https://blog.51cto.com/u_15098423/6940096

相关文章

  • HTML | HTML全局属性
    全局属性是所有HTML元素共有的属性;它们可以用于所有元素,即使属性可能对某些元素不起作用。我们可以在所有的HTML元素,甚至是在标准里没有指定的元素上指定全局属性。这意味着任何非标准元素仍必须能够允许应用这些属性,即使使用这些元素意味着文档不再是HTML5兼容的。例如,虽......
  • HTML | meta元信息
    HTML<meta>元素表示那些不能由其他HTML元相关(meta-related)元素表示的元数据信息。如:<base>、<link>、<script>、<style>或<title>。配置字符编码<metacharset="utf-8">针对IE浏览器的兼容性配置。<metahttp-equiv="X-UA-Compatible"con......
  • js去掉html中所有的标签、空格和回车换行符只保留文本
    replaceText(val){if(val!=null&&val!=""){varre1=newRegExp("<.+?>|&.+?;","g");//匹配html标签的正则表达式,"g"是搜索匹配多个符合的内容varmsg=val.replace(re1,"");//执行替换成空字符msg=......
  • html details 去除三角
    /*隐藏默认三角chromeSafari*/details::-webkit-details-marker{display:none;}/*隐藏默认三角Firefox*/details::-moz-list-bullet{font-size:0px;}summary{list-style:none;/*部分老版浏览器需要这样写*/}  ......
  • HTML | HTML框架标签
    标签名功能和语义属性单/双标签iframe框架(在网页中嵌入其他文件)name:框架名字,可以与target属性配合。width:框架的宽。height:框架的高度。frameborder:是否显示边框,值:0或者1。双iframe标签的实际应用:在网页中嵌入广告。与超链接或表单的targe......
  • vue 通过css 给html元素增加前缀红色星号
    <el-form-item>前面增加红色星号要为<el-form-item>的label增加红色星号,你可以使用CSS中的伪元素::after或::before来实现。下面是如何在样式中添加红色星号的示例:<el-form-itemclass="red-label"label="物流商信息"></el-form-item><stylescopedlang="scss"......
  • 渗透-01:DNS原理和HTML字符编码-HTML实体编码
    一、DNS概念DNS(DomainNameSystem的缩写)就是根据域名查出IP地址(常用)DNS分类:正向解析:已知域名解析IP反向解析:已知IP解析对应的域名二、查询过程工具软件dig可以显示整个查询过程[root@node01~]#digbaidu.com;<<>>DiG9.11.4-P2-RedHat-9.11.4-26.P2.el7_9.13<<......
  • requests-html基础使用
    Requests-HTML是一个基于Python的库,它是在Requests库的基础上构建的,并使用了PyQuery库来实现HTML解析。它提供了一个简单的方法来解析HTML文档并提取信息。 以下是使用Requests-HTML的步骤: 1.安装Requests-HTML库:`pipinstallrequests-html` 2.导入RequestsHTML库:`fro......
  • requests-html高级用法
    以下是一些Requests-HTML的高级用法: 1.使用`Session()`对象: 如果要保持会话状态并在多个请求之间共享Cookie和其他信息,可以使用`Session()`对象: ``` session=HTMLSession() r=session.get('https://www.example.com') #dosomething r=session.get('......
  • HTML
    HTML详解初始HTMLHTMLHyperTextMarkupLanguage(超文本标记语言)W3C标准W3CWorldWideWebConsortium(万维网联盟)W3C标准包括结构化标准语言(HTML、XML)表现标准语言(CSS)行为标准(DOM/ECMAScript)<!--DOCTYPE:告诉浏览器,我们要是使用什么规范--><!DO......