tofacebook.com -专业IT技术社区 web前端之html Web程序 - tofacebook.com-专业IT技术社区
142°

web前端之html Web程序

标签:html

一、web服务的本质

import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.secd(b"<h1>Hello world!</h1>")
    conn.close()


浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

二、html介绍

1、特点
(1)超文本标记语言(HypertextMarkupLanguage, HTML)是一种用于创建网页的标记语言。
(2)本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
(3)网页文件的扩展名:.html或.htm

(4)HTML是一种标记语言(markuplanguage),它不是一种编程语言。
(5)HTML使用标签来描述网页。

2、html结构

<!DOCTYPE html>             <!--<!DOCTYPE html>声明为HTML5文档。-->
<html>                 <!--<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。-->
<head>                   <!--<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。-->
  <meta charset="UTF-8">         <!--声明编码
  <title>html格式</title>         <!--<title>、</title>定义了网页标题,在浏览器标题栏显示。-->
</head>
<body>                    <!--<body>、</body>之间的文本是可见的网页主体内容-->
</body>
</html>


3、html标签

(1)标签的语法:

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

(2)几个很重要的属性:

id:定义标签的唯一ID,HTML文档树中唯一

class:为html元素定义一个或多个类名(classname)(CSS样式类名)

style:规定元素的行内样式(CSS样式)


三、html常用标签

1、head内常用标签

<title></title>                #定义网页标题

<style></style>                #定义内部样式表

<script></script>            #定义JS代码或引入外部JS文件

<link/>                        #引入外部样式表文件

<meta/>                        #定义网页原信息


2、Meta标签

(1)Meta标签介绍:

<meta>元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。

<meta>标签位于文档的头部,不包含任何内容。

<meta>提供的信息是用户不可见的。


(2)meta标签的组成

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

    <!--2秒后跳转到对应的网址,注意引号-->

    <meta http-equiv="refresh" content="2;URL=https://www.baidu.com">

    <!--指定文档的编码类型-->

    <meta http-equiv="content-Type" charset=UTF8">

    <!--告诉IE以最高级模式渲染文档-->

    <meta http-equiv="x-ua-compatible" content="IE=edge">

#2.name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

    <meta name="description" content="北京Python网络学院">


四、body内常用标签

1、基本标签

<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>

2、特殊字符

内容         对应代码

空格         &nbsp;

>             &gt;

<             &lt;

&             &amp;

¥             &yen;

版权         &copy;

注册         &reg;


3、div标签和span标签


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

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


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

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

这两个元素是专门为定义CSS样式而生的。


p标签不能包含块级标签。


4、img标签


<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">


5、a标签(超链接标签)

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


<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

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

        绝对URL - 指向另一个站点(比如 href="http://www.jd.com)

        相对URL - 指当前站点中确切的路径(href="index.htm")

        锚URL - 指向页面中的锚(href="#top")


target:

        _blank表示在新标签页中打开目标网页

        _self表示在当前标签页中打开目标网页


6、列表


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 小写字母

        Ⅰ大写罗马

        ⅰ小写罗马


3.标题列表

<dl>

  <dt>标题1</dt>

  <dd>内容1</dd>

  <dt>标题2</dt>

  <dd>内容1</dd>

  <dd>内容2</dd>

</dl>


7、表格


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

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

表格的基本结构:


<table>
  <thead>
  <tr>
    <th>序号</th>                      <!--列表第一行显示:序号   姓名  爱好-->
    <th>姓名</th>
    <th>排行</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Wang</td>
    <td>大哥</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>二弟</td>
  </tr>
  </tbody>
</table>

属性:

        border: 表格边框.

        cellpadding: 内边距,内容与边框的间隙

        cellspacing: 外边距.,边框与边框的间隙

        width: 像素 百分比.(最好通过css来设置长宽)

        rowspan: 单元格竖跨多少行

        colspan: 单元格横跨多少列(即合并单元格)


8、form

(1)功能:

表单用于向服务器传输数据,从而实现用户与Web服务器的交互

表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。


(2)表单属性

accept-charset             规定在被提交表单中使用的字符集(默认:页面字符集)

action                     规定向何处提交表单的地址(URL)(提交页面)

autocomplete             规定浏览器应该自动完成表单(默认:开启)

enctype                     规定被提交数据的编码(默认:url-encoded)

method                     规定在提交表单时所用的 HTTP 方法(默认:GET)

name                     规定识别表单的名称(对于 DOM 使用:document.forms.name)

novalidate                 规定浏览器不验证表单。

target                     规定 action 属性中地址的目标(默认:_self)


(3)表单元素

基本概念:

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

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

表单工作原理:

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

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


9、input


type属性值              表现形式              对应代码

text                  单行输入文本         <input type=text" />

password              密码输入框             <input type="password"  />

date                  日期输入框             <input type="date" />

checkbox              复选框                 <input type="checkbox" checked="checked"  />

radio                  单选框                 <input type="radio"  />

submit                  提交按钮             <input type="submit" value="提交" />

reset                  重置按钮             <input type="reset" value="重置"  />

button                  普通按钮             <input type="button" value="普通按钮"  />

hidden                  隐藏输入框             <input type="hidden"  />

file                  文本选择框             <input type="file"  />


 属性说明:


name:表单提交时的“键”,注意和id的区别

value:表单提交时对应项的值

        type="button", "reset", "submit"时,为按钮上显示的文本年内容

        type="text","password","hidden"时,为输入框的初始值

        type="checkbox", "radio", "file",为输入相关联的值

checked:radio和checkbox默认被选中的项

readonly:text和password设置只读

disabled:所有input均适用


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <p>姓名:<input type="text" name="user"></p>
    <p>密码:<input type="password" name="pwd"></p>
    <p>爱好:<input type="checkbox" name="hobby" value="basketball" checked>篮球
             <input type="checkbox" name="hobby" value="football">足球
             <input type="checkbox" name="hobby" value="run">跑步
    </p>
    <p><input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
        <input type="radio" name="gender" value="other">其他
    </p>
    <p><input type="button" value="按钮"></p>
    <p><input type="reset"></p>
    <p>
        头像:<input type="file" name="picture">
    </p>
    <p><input type="hidden" name="tag" value="is_tag_type"></p>
    <p><input type="submit" value="确定" </p>
</form>
</body>
</html>


10、select标签


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


属性说明:

        multiple:布尔属性,设置后为多选,否则默认单选

        disabled:禁用

        selected:默认选中该项

        value:定义提交时的选项值

        size:显示的条数

        multiple:复选

11、label标签


定义:<label> 标签为 input 元素定义标注(标记)。

说明:

        label 元素不会向用户呈现任何特殊效果。

        <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>


12、textarea多行文本


<textarea name="memo" id="memo" cols="30" rows="10">    <!--name:名称|rows:行数|cols:列数|disabled:禁用-->
  默认内容
</textarea>


五、标签分类

1、块级标签

常用的块级元素:

   address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ul , li


2、内联标签

常用内联的元素:

  a , b , br , em , font , img , input , label , select , small , span , textarea


3、块级标签和内联标签的区别

块级标签具有以下特点:

(1)总是在新行上开始,占据一整行;

(2)高度,行高以及外边距和内边距都可控制;

(3)宽带始终是与浏览器宽度一样,与内容无关;

(4)它可以容纳内联标签和其他块标签。


内联标签的特点:

(1)和其他标签都在一行上;

(2)高,行高及外边距和内边距部分可改变;

(3)宽度只与内容有关;

(4)内联标签只能容纳文本或者其他内联标签。






web前端之html

标签:html

原文地址:http://blog.51cto.com/qidian510/2087013


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。