html

html是一个裸体的人，css就是给这个裸体的人穿上衣服，JavaScript就是让这个人动起来

概述

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)

HTML文档

文档树

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别
  1. BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
  2. CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

有，用什么？

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

更多

Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

    1. 页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

    1. 刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

<meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com"/>

    1. 关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

    1. 描述

例如：cnblogs

    1. X-UA-Compatible

微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。

与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。更多

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Title

网页头部信息

Link

    1. css

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

    1. icon

< link rel="shortcut icon" href="image/favicon.ico">

Style

在页面中写样式

例如：
< style type="text/css" > 
.bb{ 
       
   } 
< /style> 

Script

    1. 引进文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

    1. 写js代码

< script type="text/javascript" > ... </script >

常用标签

标签一般分为两种：块级标签 和 行内标签

  • 行内 a、span、select 等
  • 块级div、h1、p 等

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p 和 br

p表示段落，默认段落之间是有间隔的！

br 是换行

a标签

< a href="http://www.autohome.com.cn"> </a>

1、target属性，_black表示在新的页面打开

2、锚

H 标签

H1

H2

H3

<!DOCTYPE html>
<html lang="en">
<head>
　　<!--<meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com"/>-->#5秒后自动跳转到url
　　<meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0">#边距为0
    <div style="height: 48px;background-color: #5e4b7c;"></div>
    <div>f</div>#块级标签
    <span>a</span>#行内标签

    <p>asdfasdfasdfasd<br/>fasdfasdf</p>#p段落,br换行
    <h1>白少凯</h1>
    <h6>小白少凯</h6>
    <!--跳转-->
    <a href="http://www.baidu.com" target="_blank">百度</a>#target重新打开一个页面
    <!--锚点-->
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <div id="i1" style="background-color: green;height: 900px;"></div>
    <div id="i2" style="background-color: red;height: 900px;"></div>
    <div id="i3" style="background-color: pink;height: 900px;"></div>
</body>
</html>

select 标签

   

Checkbox

  

redio

男 女 保密 

男 女 保密

password

 

button

 
<input type="button" value="提交" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
用form表单包裹，点submit会提交form表单里所有能提交的内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0">
    <div style="height: 48px;background-color: #5e4b7c;"></div>
    <div>
        <form>
            <h1>用户登录</h1>
            <p>用户名：<input type="text" /></p>
            <p>密码：<input type="password" /></p>
            <input type="button" value="提交" />
            <input type="submit" value="提交" />
            <input type="reset" value="重置" />
        </form>
    </div>

file

提交文件时： enctype='multipart/form-data' method='POST'

textarea

 

label

姓名： 婚否： 
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div> <label for="user">用户名：</label> <input id="user" type="text" /></div>
    <!--点击用户名，就会自动跳转到后面的文本框，input是自闭合-->
    <div><label for="password">密码：</label> <input id="password" type="password" /></div>
    <div>性别：
        <div>男 <input type="radio" name="geasdf" /></div>
        <!--选择框，加上name单选-->
        <div>女 <input type="radio" name="geasdf"/></div>
    </div>
    <div>
        爱好：男<input type="checkbox" />  女<input type="checkbox" />  海涛<input type="checkbox" />
        <!--复选框-->
    </div>
    <div>
        上传： <input type="file" />
    </div>
    <div>
        城市：
            <select>
                <option>上海</option>
                <option>北京</option>
                <option>广州</option>
                <option>沙河</option>
            </select>
             <select multiple size="10">
                <option>上海</option>
                <option>北京</option>
                <option>广州</option>
                <option>沙河</option>
            </select>
            <select multiple size="10">
                <optgroup label="河北">
                    <option>石家庄</option>
                    <option>保定</option>
                    <option>廊坊</option>
                    <option>邯郸</option>
                    <option>沙河</option>
                </optgroup>
                <optgroup label="河南">
                    <option>石家庄</option>
                    <option>保定</option>
                    <option>廊坊</option>
                    <option>邯郸</option>
                    <option>沙河</option>
                </optgroup>
            </select>
    </div>
    <div>
        简介：
        <textarea></textarea>
    </div>
</body>
</html>

ul ol dl

ul

  • ul.li
  • ul.li
  • ul.li

ol

  1. ol.li
  2. ol.li
  3. ol.li

dl

dt河北省
dd邯郸
石家庄
山西省
太原
平遥
 
 

table

1 2 3
1 2 3
1 2 3


1
123
1 2 3
1 2 3
1 2 3
1 3 3
3 3
3 3
3 3 3

colspan

rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="img/1.png "alt="我是图片" title="把鼠标拿走">
    <ul>
        <li>alex</li>
        <li>alex1</li>
        <li>alex2</li>
    </ul>
    <ol>
        <li>eric</li>
        <li>eric1</li>
        <li>eric2</li>
    </ol>
    <dl>
        <dt>江苏</dt>
        <dd>南京</dd>
        <dd>苏州</dd>
    </dl>
    <table border="1">
        <thead>
            <tr>
                <th>a</th>
                <th>b</th>
                <th>c</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>12</td>
                <td><a href="http://www.baidu.com">删除</a>|<a href="#">修改</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td colspan="2">12</td>
                <!--<td><a href="http://www.baidu.com">删除</a>|<a href="#">修改</a></td>-->
            </tr>
            <tr>
                <td>1</td>
                <td>12</td>
                <td><a href="http://www.baidu.com">删除</a>|<a href="#">修改</a></td>
            </tr>
        </tbody>
    </table>

</body>
</html>

fieldset

登录

用户名：

密码：

 

form 表单

action是发送的url

method有get和post

post是把提交的内容放到请求内容中发过去

右击检查，network，在form data中能看到用户名密码

上传文件必须加enctype="multipart/form-data"把文件一块一块的上传

placeholder="请输入用户名"

radio checked=‘checked’默认选上

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


    <div>
        <form action="http://192.168.12.90:8000/index/" method="POST" enctype="multipart/form-data">#上传文件必须加enctype
            <h1>用户登录</h1>
            <input type="file" name="upload" />
　　　　　　　#必须有name，这样是以字典的形式发送过去
            <p>用户名：<input type="text" name="username" value="root" placeholder="请输入用户名" /></p>
            <p>密码：<input type="password" name="pwd" value="root" /></p>#value是默认值

            <div>性别：
                <div>男 <input type="radio" name="geasdf" value="1"  /></div>#value就是收到的值
                <div>女 <input type="radio" name="geasdf" value="0" checked="checked"/></div>
            </div>
            <div>
                爱好：男 <input type="checkbox" name="hobby" value="11" checked="checked" />
                     女  <input type="checkbox" name="hobby" value="22" checked="checked"/>
                    海涛 <input type="checkbox" name="hobby" value="海涛"/>
            </div>
             <select name="city1">
                <option value="88">上海</option>
                <option value="89" selected="selected">北京</option>
                <option value="uu">广州</option>
                <option value="sh">沙河</option>
             </select>
            <select name="city2" multiple>#复选
                <option value="88">上海</option>
                <option value="89" selected="selected">北京</option>
                <option value="uu" selected="selected">广州</option>
                <option value="sh">沙河</option>
             </select>

            <textarea name="memo" placeholder="鸡汤...">来杯鸡汤...</textarea>


            <input type="button" value="按钮" />
            <input type="submit" value="提交" />
            <input type="reset" value="重置" />
        </form>
    </div>
    <div>
        asdkfj;alskdjf;a
        <p></p>
        <div>YARN是Hadoop集群的资源管理系统。Hadoop2.0对MapReduce框架做了彻底的设计重构。YARN的基本设计思想是将MRv1中的JobTracker拆分成了两个独立的服务：一个**全局的资源管理器ResourceManager**和**每个应用程序特有的ApplicationMaste.</div>
    </div>
    <div>
        <h1>用户登录</h1>
        <p>用户名：<input type="text" /></p>
        <p>密码：<input type="password" /></p>
        <input type="button" value="提交" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </div>
</body>
</html>

几种默认值



 

文件:enctype='multipart/form-data' method='POST'

image标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="img/1.png">

</body>
</html>

作业

要求：
第一个页面：协议，选择【我同意】进入注册页面 
第二个页面：用户名、密码、重复密码、省份（下拉菜单）、性别、爱好（多选），使用label来修饰。

对于路径：

  • / 网站根目录
  • ./ 当前目录(相当于什么也不加)
  • ../ 父母路
  • ../../ 父目录的父目录
 

 

 



【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hongpeng0209/p/6290697.html