html介绍

梦想的初衷 提交于 2019-12-01 08:14:56

1 HTML介绍

1.1 web服务的本质

import socket
server = socket.socket()

server.bind(('127.0.0.1',8080))
server.listen(5)

conn,addr = server.accept()
data = conn.recv(1024)

conn.send(b'HTTP/1.1 200 OK\r\n\r\n')

conn.send(b'<h1>Hellow world!</h1>')
conn.close()

过程:浏览器发出请求——>HTTP协议——>服务端接收请求——>服务端返回响应——>服务端把HTML 文件内容发送给浏览器——>浏览器进而渲染页面。

1.2 HTML是什么?

  • 超文本标记语言(Hypertext Markup Language,HTML)是一种用于创建网页的标记语言。
  • 本质上是浏览器可识别的规则,我们在写页面的时候要遵循html的规则,浏览器就会根据规则来渲染我们的页面,对于不同的浏览器来说可能对于同一个标签有不同的解释,这个是兼容性的问题。
  • 网页文件的扩展名:name.html 或者 name.htm

1.3 HTML 不是什么?

HTML 是一种标记语言(markup language),他不是一种编程语言。

html使用标签来描述网页。

1.4 html文档结构

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset='utf-8'>
        <title>标题栏</title>
    </head>
    <body>
        
    </body>
</html>
  1. ==<!DOCTYPE html>==(声明为HTML5文档)告诉浏览器应该用什么版本的html解析。
  2. ====是文档的开始标记和结束标记的标记。是html页面的跟元素,在他们之间的是文档的头部(head)和主体(body)。在其中间的标签如==lang = "en"==表示是那个国家的语言。==lang="zh"==表示中文。en表示英文。
  3. ====表示编码格式是utf8,必须要声明,否则会出现乱码,另外还有GBK编码格式等。
  4. ====定义了网页的标题,在浏览器标题栏上显示。
  5. ====在其中的文本是可见的网页主体内容。

1.5 HTML标签的格式

  • HTML标签是由尖括号包围的关键字,如,
    等。
  • HTML标签通常是成对出现,比如是
    ,第一个标签是开始,第二个标签是结束。一般结束标签都会有一个/斜线。
  • 也有一部分是单独出现的标签比如:

    等。
  • 标签里面可以有若干属性,也可以不带属性。
  • 标签的语法

    • 填充内容标签名>

    重要的属性

    • id:定义标签的唯一ID,HTML文档树中的唯一。
    • class:为html元素定义一个或者多个类名(classname)(class样式类名)
    • style:规定元素的行内样式(css样式)

    1.6HTML 注释

    <!--注释内容-->

    1.7 标签<!DOCTYPE>

    • <!DOCTYPE>声明必须是HTML文档的第一行,位于标签最前面。
    • <!DOCTYPE>声明不是HTML标签,它是指示web浏览器关于页面使用那个HTML版本进行编辑的指令。

    2 HTML常用标签

    2.1head内常用的标签

    标签 含义
    定义网页的标题
    定义内部的样式表(css)
    定义JS代码或者引入外部的JS文件
    引入外部样式表文件或者网站图标
    定义网页原信息

    link的用法

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

    script的用法

     <!--方法一-->
    <script src="a.js"></script>
    
    
    
     <!--方法二-->
    <script>
    alert("窝窝头,一块钱4个,嘿嘿")<!--页面提醒    alert-->
    </script>
    
    
    
    

    meta标签介绍

    • ====元素可提供有关页面的原信息(meta-information),针对搜索引擎和更新频度的描述和关键词。
    • ====标签位于文档的头部,不包含任何信息。
    • ====提供的信息用户是看不见的。

    meta标签的组成:meta标签一共有俩个属性,他们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网络功能。

    1. http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,可以帮助正确的显示页面的内容,与之相对应的属性值为content ,content中的内容其实就是各个参数的变量值。

      <!--        指定文档的编码类型-->
          <meta http-equiv="content-type" charset="UTF-8">
      <!--    2秒后跳转到对应的网址-->
          <meta http-equiv="refresh" content="2,URL=https://www.cnblogs.com/SkyOceanchen/">
      <!--    告诉IE浏览器用最高级模式进行渲染文档-->
          <meta http-equiv="x-ua-compatible" content="IE=edge">
    2. name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

      <meta name="keywords" content="meta用法,meta属性,meta跳转"><meta name="description" content="豆瓣酱瓣豆">

    2.2特殊字符

    内容 对应代码
    空格 &nbsp;
    > &gt;
    < &lt;
    & &amp;
    ¥ &yen;
    版权© &copy;
    注册® &reg;

    2.3 body内常用的标签

    基本标签

    <b>加粗</b>
       <i>斜体</i>
       <u>下划线</u>
       <s>删除线</s>
       
       <p>
           段落标签
       </p>
       
       <h1>标题1</h1>
       <h2>标题2</h2>
       <h3>标题3</h3>
       <h4>标题4</h4>
       <h5>标题5</h5>
       <h6>标题6</h6>
       
       
       <!--换行-->
       <br>
       
       <!--水平线-->
       <hr>

    div标签和span标签

    div标签用来定义一个块级元素,并无实际的意义,主要通过css样式为其赋予不同的表现。

    span标签用来定义内联(行内元素),并无实际的意义,主要通过css样式为其赋予不同的表现。

    块级元素和行内元素的区别:

    所谓的块级元素,就是以另外起一行开始渲染的元素,行内元素则不需要另外起一行,如果单独在网页中插入这俩个元素,不会对页面产生任何的影响。

    这俩个元素都是专门为定义css样式而生成的。

    注意

    关于标签嵌套:通常块级元素可以包含内联元素或者某些块级元素,但是内联元素不能包含块级元素,它只能包含其他的内联元素。

    p标签不能包含块级标签,p标签也不能包含p标签

    img标签

       <img src="图片路径" alt="图片未加载成功的时候的提示" title="鼠标悬浮的时候提供的信息" width="宽度" height="高度">
       <!--
       当不用宽和高的时候就是原来的大小
       当宽和高俩个属性只用一个的时候会自动等比放大和缩小
       -->

    a标签

    超链接标签

    所谓的超链接标签是指从一个网页指向一个目标的连接关系,这个目标可以是另外一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件,一个文件,甚至是一个应用程序。

       什么是URL?
       URL是统一资源定位器(uniform resource locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。
       
       url举例:
       http://www.sohu.com/stu/intro.html
       https://www.cnblogs.com/SkyOceanchen/
       
       
       
       url的组成:
       第一部分:为协议:http://、ftp:\\等
       第二部分:为站点地址:可以是域名或IP地址
       第三部分:为页面在站点中的目录:stu
       第四部分:为页面名称,如intro.html
       
       各个部分之间用"/"符号隔开。
       
       
       
       <a href="https://www.cnblogs.com/SkyOceanchen/" target="_blank">点击</a>

    href属性指定目标网址。该地址可能有几种类型:

    • 绝对URL — 指向另外一个站点(比如 href = "http://www/jd.com")
    • 相对URL—指当前站点中确切的路径(href="index.htm")
    • 锚点URL—指向页面中的锚 (href="#top"),一般是定义的id

      target:

    • _blank表示在新标签中打开目标网址
    • _self表示在当前网页中打开目标网页

    2.4列表

    1. 无序列表

      <ul type = "disc">
          <li>爱你呦</li>
          <li>窝窝头</li>
      </ul>
      

      type属性

      • disc(实心圆、默认值)
      • circle(空心圆圈)
      • square(实心方块)
      • none(没有样式)
    2. 有序列表

      <ol type="1" start="2">
          <li>摸摸哒</li>
          <li>嘿嘿</li>
      </ol>

      type属性:

      • 1 数字列表、默认
      • A大写字母
      • a小写字母
      • I大写的罗马
      • i小写的罗马
    3. 标题列表

      <dl>                               定义列表(definition list)
                <dt>标题1</dt>
           <dd>内容1</dd>
                <dt>标题2</dt>
           <dt>内容2</dt>
            </dl>
      标题1
      内容1
      标题2
      内容2

    2.5表格

      1. 表格是一个二维数据空间,一个表格由若干行组成,一个又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其他的表格等内容。

        表格里面最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。

        表格的结构:

      <table>
          <thead>
              <tr>
                  <th>序号</th>
                  <th>姓名</th>
                  <th>爱好</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>chen</td>
                  <td>拉呱</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>sky</td>
                  <td>长大</td>
              </tr>
          </tbody>
      </table>      
    属性 描述
    border pixels 规定表格边框的宽度。
    cellpadding pixels
    %
    规定单元边沿与其内容之间的空白。
    cellspacing pixels
    %
    规定单元格之间的空白。
    rowspan pixels 单元格竖跨多少行
    colspan pixels 单元格横跨多少行(即合并单元行)
    width %
    pixels
    规定表格的宽度。像素 百分比.(最好通过css来设置长宽)
    frame void
    above
    below
    hsides
    lhs
    rhs
    vsides
    box
    border
    规定外侧边框的哪个部分是可见的。
    rules none
    groups
    rows
    cols
    all
    规定内侧边框的哪个部分是可见的。
    summary text 规定表格的摘要。
    align left
    center
    right
    不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
    bgcolor rgb(x,x,x)
    #xxxxxx
    colorname
    不赞成使用。请使用样式代替。规定表格的背景颜色。

    3 表单

    功能

    基本概念:

    ​ HTML 表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。

    表单一般用来收集用户的输入信息。

    表单工作原理:

    访问者在浏览器中有表单的网页的时候,可填写必需的信息,然后按某一个按钮进行提交,这些信息通过Internet传送到服务器上。

    服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误,当数据完整并且无误后,服务器会反馈一个输入完成的信息。

    # Django接收上传文件代码
    from django.conf.urls import url
    from django.shortcuts import HttpResponse
    
    
    def upload(request):
        print("request.GET:", request.GET)
        print("request.POST:", request.POST)
    
        if request.FILES:
            filename = request.FILES["file"].name
            with open(filename, 'wb') as f:
                for chunk in request.FILES['file'].chunks():
                    f.write(chunk)
                return HttpResponse('上传成功')
        return HttpResponse("收到了!")
    
    urlpatterns = [
        url(r'^upload/', upload),
    ]

    3.1 input

    input—元素会根据不同的type属性,变化为多种形态

    type属性值 表现形式 对应代码
    text 单行输入文本 <input type = "text">
    password 密码输入框 <input type="password">
    date 日期输入框 <input date="date">
    checkbox 复选框 <input type="checkbox">
    radio 单选框 <input type="radio">
    submit 提交按钮 <input type="submit" value="提交">
    reset 重置按钮 <input type="reset" value="重置">
    button 普通按钮 <input type="普通按钮" >
    file 文本输入框 <input type="file">
    hidden 隐藏输入框 <input type="hidden">

    属性说明:

    • name:表单提交时候的“键”,注意和id的区别
    • value:表单提交时候对应项的值
      • type="button","reset","submit"的时候,为按钮上显示的文本内容。
      • type="text","password","hidden"的时候,为输入框的初始数值。
      • type="check","radio","file",为输入相关联的数值。
    • checked:radio和checkbox默认被选中的项
    • readonly:text和password设置只读。
    • disabled:所有的input都适用,禁用

    3.2 select标签

    <form action="" method="">
        <select name="city" id="city">
            <option value="1">北京</option>
            <option selected="selected" value="2">上海</option>
            <option value = "3">广州</option>
            <option value="4">深圳</option>
        </select>
    </form>

    属性说明:

    • multiple:布尔属性,设置后可以多选,否则默认单选
    • disabled:禁止使用
    • selected:默认选择该项
    • value:定义提交时的选项值
    • action:提交的目的网页
    • method:提交的方式:get/post等

    3.3label标签

    定义<label>标签为iput元素定义标注。

    说明:

    1. lable元素不会向用户呈现任何特殊效果
    2. lable标签的for属性值应当与相关原属的id属性值相同。
    <form action="">
        <lable for="username">用户名</lable>
        <input type="text" id="username" name="username">
    </form>
    

    3.4textarea多行文本

    <textarea name="memo" id="medo" cols="30" rows="10" placeholder="请介绍自己"></textarea>
    

    属性说明:

    • name:名称
    • rows:行数
    • cols:列数
    • disable:禁用
    • placeholder : 提示输入内容(半隐藏)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>
    <form action="1011表单.html" method="post">
    
        <div>
            <label>姓名</label>
            <input type="text" name="username" value="请输入姓名">
            解释 <input type="text" name="salk" value="解释无法写入" readonly="readonly">
        </div>
        <div>
            密码:<input type="password" name="pwd" value="">
        </div>
        <div>
        日期:<input type="date" name="date" value="请输入时间">
        </div>
        <div>
            性别:<input type="radio" name="sex" value="1" checked="checked"> 男
            <input type="radio" name="sex" value="0"> 女
        </div>
        <div>
            <input type="checkbox" name="hobby" value="sing"> 唱歌
            <input type="checkbox" name="hobby" value="dance" checked> 跳舞
            <input type="checkbox" name="hobby" value="love" disabled> 撩妹
        </div>
        <p><input type="file" name="file" value="上传文件哦"></p>
    
        <div>
            隐藏输入框<input type="hidden" value="隐藏输入框">
        </div>
        <select name="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4" selected="selected">深圳</option>
        </select>
        <br>
        <select name="date" multiple="multiple">
            <option value="1">1996</option>
            <option value="2">05</option>
            <option value="3">27</option>
            <option value="4">12</option>
        </select>
        <br>
        <br>
        <textarea name="memo" cols="30" rows="10" placeholder="请介绍自己"></textarea>
    
        <div>
            <input type="submit" name="submit" value="登陆">
            <input type="reset" name="reset" value="重置">
            <input type="button" name="button" value="普通按键">
        </div>
    </form>
    </body>
    </html>
    

    标签的总结:

    块级元素:块级大多为结构性标记
    
      <h1>...</h1>  标题一级
    
      <h2>...</h2>  标题二级
    
      <h3>...</h3>  标题三级
    
      <h4>...</h4>  标题四级
    
      <h5>...</h5>  标题五级
    
      <h6>...</h6>  标题六级
    
      <hr>  水平分割线
    
      <p>...</p>  段落
    
      <ul>...</ul>  无序列表
    
      <ol>...</ol>  有序列表
    
      <dl>...</dl>  定义列表
    
      <table>...</table>  表格
    
      <form>...</form>  表单
    
      <div>...</div>
    
    行内元素:行内大多为描述性标记
    
      <span>...</span>
    
      <a>...</a>  链接
    
      <br>  换行
    
      <b>...</b>  加粗
    
      <strong>...</strong>  加粗
    
      <img >  图片
    
      <i>...</i>  斜体
    
      <em>...</em>  斜体
    
      <del>...</del>  删除线
    
      <u>...</u>  下划线
    
      <input>...</input>  文本框
    
      <textarea>...</textarea>  多行文本
    
      <select>...</select>  下拉列表
    

    ·块级元素

    1.总是从新的一行开始

    2.高度、宽度都是可控的

    3.宽度没有设置时,默认为100%

    4.块级元素中可以包含块级元素和行内元素

    ·行内元素

    1.和其他元素都在一行

    2.高度、宽度以及内边距都是不可控的

    3.宽高就是内容的高度,不可以改变

    4.行内元素只能行内元素,不能包含块级元素

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!