html初探

最新推荐文章于 2024-11-16 19:06:08 发布
最新推荐文章于 2024-11-16 19:06:08 发布
阅读量176 收藏
点赞数
文章标签： 操作系统 javascript python ViewUI
原文链接：http://www.cnblogs.com/uglyliu/p/6388803.html
版权

HTML

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

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

标准模板：

1
2
3
4
5
6
7
8
9
10
<! DOCTYPE  html>     #标准规范
< html  lang="en">
< head >                  #html头
     < meta  charset="UTF-8">      #字符编码
     < title >Title</ title >        #页面头部显示内容
</ head >
< body >
         < p >主体内容</ p >         #页面内容主体
</ body >
</ html >

 

Doctype标准

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

有和无的区别

  • BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
  • CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

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

有，用什么？

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

 

<head>页面头部

meta(metadata information)

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

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

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

刷新和跳转

1
2
3
<  meta  http-equiv=“Refresh” Content=“30″>        30秒刷新
 
<  meta  http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

关键词

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

描述

1
例如：cnblogs

X-UA-Compatible

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

微软的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 模式）显示该网页

title 标签

网页头部信息

link 标签

1
2
3
4
5
<!--css-->
<  link  rel="stylesheet" type="text/css" href="css/common.css" >
 
<!--icon-->
<  link  rel="shortcut icon" href="image/favicon.ico">

style 标签

在页面中写样式

1
2
3
4
5
6
例如：
<  style  type="text/css" >
.bb{
      
    }
< / style >

script 标签

1
2
3
4
5
<!--引进文件-->
<  script  type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </ script  >
 
<!--写js代码-->
<  script  type="text/javascript" > ... </ script  >

 

<body>页面主体

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

  • a、span、select 等
  • div、h1、p 等

特殊符号

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

p和br 标签

1
2
< p >段落</ p >         <!--p表示段落，默认段落之间是有间隔的！-->
< br />                 <!--br是换行-->

a 标签

超链接：

1
2
3
< a  href="http://www.baidu.com" target="_blank">点我</ a >
 
href表示跳转的地址，target="_blank"表示新窗口打开，默认为当前页

锚：

1
2
3
4
5
6
7
8
9
10
11
< body >
     < a  href="#1">第一章</ a >< br />
     < a  href="#2">第二章</ a >< br />
     < a  href="#3">第三章</ a >< br />
     < a  href="#4">第四章</ a >< br />
 
     < div  id="1" style="height: 600px;">第一章的内容</ div >
     < div  id="2" style="height: 600px;">第二章的内容</ div >
     < div  id="3" style="height: 600px;">第三章的内容</ div >
     < div  id="4" style="height: 600px;">第四章的内容</ div >
</ body >

h 标签

标题h1、h2、h3、h4、h5、h6、h7表示不同的大小

span 标签

行内标签-白板

div 标签

块级标签-白板，可以加属性然后可以变身

 

form 标签

form相当于一个表单，配合input标签submit可以把表单的内容提交到指定位置，提交内容以字典的形式提交{‘user’：xx,'email':xx,'pwd':xx},key值为name属性值

1
2
< form  action="http://localhost:8888/index" method="post" >
</ form >

action表示提交动作，把数据提交到指定的路径，methon指定提交类型，默认为get

post与get的区别：

method默认为get类型，数据会包含在html的头部进行提交，表现形式是点击提交后会在外部url路径上查看提交到的数据表单内容，效果如下

1
http: / / localhost: 8888 / index?user = lianzhilei&email = James % 40123.com &pwd = 123123

method如果指定为post类型的话，数据会包含在html的body内进行提交，从外部看不出来里面的信息

两者 没有谁安全之说，因为抓包都能抓到

 

input 系列标签

text、password 用户输入框

1
2
3
4
5
6
7
8
9
10
< body >
     < form  action="http://localhost:8888/index" method="post" >
         < span >用户：</ span >< input  type="text" name="user">< br  />
         < span >邮箱：</ span >< input  type="text" name="email">< br  />
         < span >密码：</ span >< input  type="password" name="pwd">< br  />
 
         < input  type="button" value="不能提交">
         < input  type="submit" value="提交">
     </ form >
</ body >

配合使用的tornado脚本（数据提交地址）

复制代码 
#!/usr/bin/env python
# -*- coding:utf-8 -*-
#-Author-Lian

import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        print("get")
        u = self.get_argument("user")
        e = self.get_argument("email")
        p = self.get_argument("pwd")
        print(u,e,p)

    def post(self,*args,**kwargs):
        print("post")
        u = self.get_argument("user")
        e = self.get_argument("email")
        p = self.get_argument("pwd")
        print(u,e,p)

application = tornado.web.Application([
    (r"/index", MainHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()
复制代码

页面效果：

点击提交后tornado脚本显示效果如下：

1
2
post
lianzhilei James@123.com 123123

radio、checkbox 单选与多选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< body >
     < form  action="http://localhost:8888/index" method="post">
         < div >
             < p >性别：</ p >
             男： < input  type="radio" name="gender" value="1" />
             女： < input  type="radio" name="gender" value="2" />
             < p >爱好：</ p >
             篮球： < input  type="checkbox" name="favor" value="1" />
             足球： < input  type="checkbox" name="favor" value="2" />
             排球： < input  type="checkbox" name="favor" value="3" />
         </ div >
         < input  type="submit" value="提交" />
         < input  type="reset" value="重置" />
     </ form >

name表示提交字典里的key值，value为值，type=reset可以重置选项

显示效果：

file 上传文件

1
2
3
4
5
6
7
8
< form  enctype="multipart/form-data">
         < div >
             < p >上传文件：</ p >
             < input  type="file" name="fname">
         </ div >
         < input  type="submit" value="提交" />
         < input  type="reset" value="重置" />
</ form >

上传文件时要添加enctype="multipart/form-data"参数

textarea 多行输入

1
2
3
4
5
< form  action="http://localhost:8888/index" method="post">
         < textarea  name="linearea">默认数据</ textarea >
         < input  type="submit" value="提交" />
         < input  type="reset" value="重置" />
</ form >

name指定key值，默认数据写中间即可

select 下拉框

1
2
3
4
5
6
7
8
9
10
11
< form  action="http://localhost:8888/index" method="post">
         < select  name="city" size="2" multiple="multiple">
             < option  value="1">北京</ option >
             < option  value="2">上海</ option >
             < option  value="3">南京</ option >
             < option  value="4" selected="selected">邯郸</ option >
         </ select >
         < br  />
         < input  type="submit" value="提交" />
         < input  type="reset" value="重置" />
</ form >

city为提交表单的key值，value是提交值，size指定显示的个数，mothod表示可以多选

img 图片标签

1
2
3
< a  href="https://www.baidu.com">
         < img  src="i.png" title="大帅锅" style="height: 300px;width: 220px;" alt="索隆">
</ a >

和a标签结合点击图片直接跳转，title指定鼠标放到图片后显示的内容，style定义宽高，alt指定图片不存在时的显示信息　　

 

ul、ol、dl 列表标签

复制代码 
    <ul>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
    </ul>

    <ol>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
    </ol>

    <dl>
        <dt>qwe</dt>
        <dd>qwe</dd>
        <dd>qwe</dd>
        <dt>qwe</dt>
    </dl>
复制代码

显示效果：

 

table 列表

简单单元格

复制代码 
<table border="1">
    <thead>
    <tr>
        <td>主机名</td>
        <td>IP</td>
        <td>详情</td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>localhost</td>
        <td>127.0.0.1</td>
        <td>
            <a href="test3.html">点击</a>
        </td>
    </tr>
    <tr>
        <td>localhost</td>
        <td>127.0.0.1</td>
        <td>点击</td>
    </tr>
    </tbody>
复制代码

合并单元格

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <td>表头1</td>
        <td>表头2</td>
        <td>表头3</td>
        <td>表头4</td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td colspan="2">1</td>
        <!--<td>2</td>-->
        <td>3</td>
        <td>4</td>
    </tr>
       <tr>
        <td>1</td>
        <td>2</td>
        <td rowspan="2">3</td>
        <td>4</td>
    </tr>
        <tr>
        <!--<td>1</td>-->
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
        <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    </tbody>
</table>
</body>
</html>
复制代码

 

label 标签

1
2
< label  for="username">用户名</ label >
< input  id="username" type="text" name="user" />

点击文字使其关联的标签获取光标

转载大神:http://www.cnblogs.com/lianzhilei/p/6038646.html

转载于:https://www.cnblogs.com/uglyliu/p/6388803.html

weixin_30268921
关注
后台返回的文本包含标签时候解析为html代码
weixin_44606457的博客
08-06 8006
str："<p>亲爱的250。</p><p>你好。</p><p><br/></p><img src="https://api.goto128.com/upload/goods_20190611142820045_3476.jpg" alt />"
HTML与CSS二三事
weixin_34019929的博客
08-08 183
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。 浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！ 如下图： HTML页面主体格式如下： 1 <!DOCTYPE html> 2...
1_2_3_4_5 Html-Css
weixin_30949361的博客
02-11 296
--------------------------------------------------------------------------------- HTML骨架 <HTML> <head> <title></title> </head> ...
前端jQuery向后台发送POST请求并接收后台返回的数据(C#)
任玉腾的博客
06-27 7105
function yanzheng() { var fwzx = $("#fuwuzhongxin").val(); $.post('yanzheng.aspx', fwzx, function (data) { document.getElementById("fwzxname").innerHTML
HTML meta标签总结,HTML5 head meta属性整理
码飞_CC的博客
10-08 1186
移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析HTML代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;!-- 使用 HTML5 doctype，不区分大小写 --&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;zh-cmn-Hans&amp;quot;&
Dreamweaver入门实践：学生视角的HTML初探
资源摘要信息: "myweb.zip_Dreamweaver_html_dreamweaver_html学生" 文件是一个压缩包，包含了学生初学者使用Dreamweaver软件制作的HTML文件。这个资源的标题和描述表明了作者是一个刚开始学习Dreamweaver和HTML的...
基于Html的家具设计源码初探与实现
09-28
该项目为家具设计领域的Html前端源码，整合了275个文件，涵盖73个PNG图片、61个JPG图片、57个Java源码、37个WOFF2字体、23个HTML页面、7个XML文件、5个CSS样式表、3个JavaScript脚本以及2个Git忽略文件和2个EOT字体...
初探JavaScript与HTML的交互之美：Hello World实例详解
06-28
在Web开发的浩瀚宇宙中，JavaScript与HTML的结合犹如星辰间的引力，共同塑造着网页的动态面貌。今天，我们将通过经典的“Hello, World!”示例，揭开这两者间神秘的面纱，探索它们如何协同工作，点亮编程旅程的第一盏...
代码构建初探：如何继续使用html与css开发小程序
03-29
@1棵拼搏的寂静草 vscode 自带修改文件的语言，files.associations，直接 wxml 指向 html，wxss 指向 css 就好了。 @linshuai webstorm 设置一下 html 关联. wxml 格式文件，一样可以像 html 一样使用 emmet   正文...
HTML5实现页面切换激活的PageVisibility API使用初探
12-14
HTMl5 推出了一个很“特别”的 API Page Visibility ，之所以说它特别，是因为这个 API 关注的是一个很少人留意的功能 —— 浏览器标签( tab ) 是否被激活。这里必须解释一下，这个“激活”，指的是这个标签是否正被...
对后端返回的 html 标签不识别的解决办法
weixin_30470643的博客
09-12 2640
问题：后端返回的数据中包含了 html 标签（比如：<br/>)，展现到页面的时候无法正确识别转化， 解决：比如： <span dangerouslySetInnerHTML={{ __html: data //后端返回的数据 }}></span> 转载于:https://www.cnblog...
DOCTYPE
lulalahappy123的专栏
07-12 630
DOCTYPE 书写方式不同有什么区别，（不同长串）；还有XML XHTML HTML有什么区别？ XHTML 是更严谨更纯净的 HTML 版本 XHTML 是 HTML 与 XML（扩展标记语言）的结合物。 XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。 XML 是一种标记化语言，其中所有的东西都要被正确的标记，以产生形式良好的文档。 XM
前端处理后台返回带格式的文本之textarea标签使用技巧
大董的博客
08-03 6725
页面的布局排版一般都是前端工程师在页面中使用div、p标签等进行预先的设计排版，但是有时候有些带格式的文本内容是后台返回的，这就需要前端按照后台返回的格式化文本进行展示，如果这个时候还用div、p标签进行内容的包裹，就会使后台返回的文本内容丢失。这时候我们就可以使用textarea标签作为格式文本的内容包裹。 标签定义一个多行的文本输入控件。但是我们可以利用它的disable和readonly
html基本使用
weixin_34357962的博客
09-18 116
作为自己的html字典，常用的罗列的一下。。。逻辑架构图：基本作用：HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引...
遇到前端数据传后台乱码 解决不了的另外一种方式
宁致
05-25 929
前端   encodeURI(key)后台   String names=URLDecoder.decode(key, "UTF-8");
Html基础详解
weixin_30314631的博客
01-26 115
　　HTML是（Hyper Text Mark-up Language）超文本标记语言，是因特网上应用最为广泛的一种网络传输协议，所有的www文件都必须要遵守这个标准。这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户可以“看懂的”格式，呈现给用户！ HTML文档格式如下： <!DOCTYPE html> <html lang="en">...
Udp协议Socket编程
最新发布
欢迎来到阿熊的blog~~
11-16 847
Udp协议Socket编程。
统一端点管理（UEM）
ITmoster的博客
11-14 555
Endpoint Central是统一端点管理解决方案提供高度自动化和集成的 UEM 工具，可显著减少工作负载，使 IT 团队能够快速排除故障，提高生产力和安全性，并降低成本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值