当前位置：首页 > 编程语言 > Html基础

Html基础

2021-06-18 06:04

阅读：661

标签：text   种类   去除   value   body   限制   scom   form表单   data   

 

 

什么是 HTML？

    HTML 是用来描述网页的一种语言。

    HTML 指的是超文本标记语言 (Hyper Text Markup Language)

    HTML 不是一种编程语言，而是一种标记语言 (markup language)

树形结构：

技术分享

 

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

    HTML 标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

    HTML 标签是由尖括号包围的关键词，比如

    HTML 标签通常是成对出现的，比如 和

    标签对中的第一个标签是开始标签，第二个标签是结束标签

    开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

    HTML 文档描述网页

    HTML 文档包含 HTML 标签和纯文本

    HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

注：html文件后缀是 .html

 

HTML标签

什么是标签

 

    是由一对尖括号包裹的单词构成 例如: *所有标签中的单词不可能以数字开头.

    标签不区分大小写. 和 . 推荐使用小写.

    标签分为两部分: 开始标签 和 结束标签. 两个标签之间的部分 我们叫做标签体.

    有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如:

    标签可以嵌套.但是不能交叉嵌套.

标签的属性

    通常是以键值对形式出现的. 例如 name="alex"

    属性只能出现在开始标签 或 自闭和标签中.

    属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"

    如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

 

头部标签

        由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standarsmode)，这就是二者最简单的区别。

      W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。

window.top.document.compatMode：

//BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 

//CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

    如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的

标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

这就是的作用。

META

为搜索引擎定义关键词:

为页面设置编码utf8格式

为网页定义描述内容:

定义网页作者:

每30秒中刷新当前页面:

1秒后跳转网页

Markup
http-equiv="refresh" content="1;URL=http://www.baidu.com">


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

LINK

ico图标链接

css链接

js链接

 

body标签

标题

标题，1最大-6最小

Markup
>标题一，最大


>

>标题二


>

>标题三


>

>标题四


>

>标题五


>

>标题六，最小


>


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

段落

表示一个段落

Markup
>此处是一个段落

>


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

链接

海瑞博客  给海瑞博客做链接

Markup
href="http://www.hairuinet.com">海瑞博客>


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

图片

 

img 表示创建一个图片对象

src 表示图片的路径 

width 图片的宽度

height 图片的高度

alt 图片加载失败显示信息

title鼠标悬浮时的提示信息

Markup
以下为图片信息：src="../zb_users/upload/2017/01/logo.png" width="150" height="70" />


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

换行

Markup
换行
>我是换行内容


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

注释

Markup
>我是标题一


>


>我是段落

>


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

加粗

Markup
>aaa>
>aaa>


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

斜体

Markup
>海瑞>


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

去除线

Markup
>去除线>
>aaa>


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

水平线


Markup
>


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

上角标

Markup
2>3>


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

下角标

Markup
H>2>O


#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
 

 

块级标签：


      内联标签：

      block（块）元素的特点

       总是在新行上开始；

       宽度缺省是它的容器的100%，除非设定一个宽度。

       它可以容纳内联元素和其他块元素

      inline元素的特点

      和其他元素都在一行上；

      宽度就是它的文字或图片的宽度，不可改变

      内联元素只能容纳文本或者其他内联元素

       

      特殊字符 更多

       大于<小于 &gt；空格&quot；商标©  注册®

      超链接标签

      href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

      target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

      name: 定义一个页面的书签.

      用于跳转 href : #id.（锚）

      Markup
      ">首页>

       style="height: 10000px">
      
>
      href="#top">返回首页>
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

      下拉选择框

      value 值

      selected 默认选择项

      cols:    文本域默认有多少列

      rows:    文本域默认有多少行

       

      size  选项个数

      multiple 多选 

      Markup
      >
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

      文本域

      name:    表单提交项的键.

      cols:    文本域默认有多少列

      rows:    文本域默认有多少行

      Markup
      >
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

      列表标签

      有序列表

      Markup
        >
    
      1. >1

        2. 
>
    
      2. >2

        3. 
>
    
      3. >3

        4. 
>
    
      4. >4

        5. 
>
        

      
>
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

      无序列表

      Markup
        >
    
      • >1

        • 
>
    
      • >2

        • 
>
    
      • >3

        • 
>
    
      • >4

        • 
>
        

      
>
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

      自定义列表

      Markup
      >
    
      >标题1

      
>
        
      >内容1

      
>
        
      >内容2

      
>
    
      >标题2

      
>
        
      >内容1

      
>
        
      >内容2

      
>
      

      
>
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

      表格

      table 表格起始标签

      tr 行

      th 列标题 

      td 列

      border 表格边框属性值

      width 宽度

      cellpadding 内宽度

      cellspacing 外宽度

      rowspan 行合并

      colspan 列合并

      Markup
      border="2px" width="100" cellpadding="10px" cellspacing="10px" > > > > > > > > > > > > > > > > > >
      rowspan="2">1 >2 >3
      >b >c
      >x >y >z
      colspan="3">g
      > 
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

       

      表单标签

      表单用于向服务器传输数据。

            表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

            表单还可以包含textarea、select、fieldset和 label 元素。

      1.表单属性

      　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

             action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

             method: 表单的提交方式 post/get 默认取值 就是 get（信封）

                      get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

                      post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

                      get/post是常见的两种请求方式.

      2.表单元素

      action 数据提交地址 method是提交方法post/get enctype是上传服务器方式

      Markup
      action="http://127.0.0.1:8000/regest" method="POST" enctype="multipart/form-data">

      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

      服务器接收到信息格式为字典格式

      post/get: {name:[‘value‘],name1:[‘value1‘,‘value2‘]}

      上传的文件在另一个迭代器中。也是字典格式。

       标签的属性和对应值   必须放在form标签中才有意义           

      type

          text 文本输入框 name 属性是对服务器查看的 placeholder 是未选中输入框提示的默认信息

      Markup
      >账号：type="text" name="user" placeholder="姓名或手机号">
      
>
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

          password 密码输入框，输入内容隐藏 属性同text

      Markup
      >密码：type="password" name="pasw" placeholder="输入密码">
      
>
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

          checkbox 复选框   name 为了同种类型 value 是选中后发送服务器的值 checked 是默认选中

      Markup
      >爱好：type="checkbox" name="hobby" value="lol" checked>LOL
        type="checkbox" name="hobby" value="cf">CF
        type="checkbox" name="hobby" value="wow">WOW
      
>
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

          radio 单选框 name是定义同名称只能选中一个 value是选中发送服务器的值

      Markup
      >性别:type="radio" name="sex" value="1" checked>男
        type="radio" name="sex" value="0">女
      
>
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

          file 文件上传 name 需要填写 服务器才有值 form表单需要加上属性enctype="multipart/form-data"

      Markup
      >type="file" name="filename">
      
>
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

          submit 提交按钮，点击自动提交  value 是按钮显示值

      Markup
      >type="submit" value="注册">
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

          button 按钮，需要配合js触发功能  

      Markup
      >type="button" value="注册">
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

          reset 重置按钮 将填写内容清除掉

      Markup
      >type="reset" value="重填">
      
>
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

      readonly: 只读. text 和 password

       disabled: 对所用input都好使.

      服务端写文件代码

      Python
      def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, ‘wb‘)
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse(‘ok‘)
      

#本段代码来自 海瑞博客http://www.hairuinet.com/Html/Css/Js/20170161/index.html
       

       

       

       

      Html基础

      标签：text   种类   去除   value   body   限制   scom   form表单   data   

      原文地址：http://www.cnblogs.com/xuaijun/p/7263062.html

      上一篇：关于jquery validate 的问题

      下一篇：js学习总结----初步了解node

      文章来自：搜素材网的编程语言模块，转载请注明文章出处。
      文章标题：Html基础
      文章链接：http://soscw.com/essay/95360.html

      评论

      亲，登录后才可以留言！

      热门文章

      推荐文章

      最新文章

      置顶文章

      关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |
      搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。
      特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：点击这里给我发消息
      Copyright © 2024 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1