HTML基础语句

用户名:

密码:       

web服务的本质

Web的原理

  1. --> 浏览器地址栏输入URL
  2. --> 浏览器往服务端发消息
  3. --> 服务端接收消息
  4. --> 服务端回消息(从文件中读取数据)
  5. --> 浏览器收到消息(按照一个约定好的规则展示出来)
import socket

'''
简单的socket网页
'''
sk=socket.socket()
sk.bind(('127.0.0.1',9000))
sk.listen()
while 1:
    conn,addr=sk.accept()
    conn.recv(9999)
    conn.send(b"HTTP/1.1 200 OK\r\ncontent-type: text/html; charset=utf-8\r\n\r\n")  # 标准的开头
    b"

Hello world!

" with open('code','rb')as f : # 可以从文件读取代码发送到网页上 msg = f.read() conn.send(msg)

 

 

HTML介绍:

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 文档,并以网页的形式显示出它们。

 

 文档结构

DOCTYPE html><html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级title>
head>
<body>

body>
html>

 

  • 声明为HTML5文档。
  • 、是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
  • 、定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
  • 定义了网页标题,在浏览器标题栏显示。
  • 、之间的文本是可见的网页主体内容。

 HTML基础语句_第1张图片

注意:对于中文网页需要使用  声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 

 

 

HTML注释


 

常用标签介绍

head内常用标签

标签 意义
定义网页标题
定义内部样式表
定义JS代码或引入外部JS文件
引入外部样式表文件
定义网页原信息

Meta标签

Meta标签介绍:

meta标签相当于淘宝宝贝的名字,有很多关键字,只不过meta标签不是给用户看的,而是为了在搜索的时被识别到

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

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

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






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


 

body内的常用标签

基本标签(块级标签和内联标签)

<b>加粗b>
<i>斜体i>
<u>下划线u>
<s>删除s>

<p>段落标签p>

<h1>标题1h1>
<h2>标题2h2>
<h3>标题3h3>
<h4>标题4h4>
<h5>标题5h5>
<h6>标题6h6>


<br>

<hr>

 

常用特殊字符

内容 对应代码
空格  
> >
< <
& &
¥ ¥
版权 ©
注册 ®

HTML特殊字符编码对照表

特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码
Α Α Α Β Β Β Γ Γ Γ
Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ
Η Η Η Θ Θ Θ Ι Ι Ι
Κ Κ Κ Λ Λ Λ Μ Μ Μ
Ν Ν Ν Ξ Ξ Ξ Ο Ο Ο
Π Π Π Ρ Ρ Ρ Σ Σ Σ
Τ Τ Τ Υ Υ Υ Φ Φ Φ
Χ Χ Χ Ψ Ψ Ψ Ω Ω Ω
α α α β β β γ γ γ
δ δ δ ε ε ε ζ ζ ζ
η η η θ θ θ ι ι ι
κ κ κ λ λ λ μ μ μ
ν ν ν ξ ξ ξ ο ο ο
π π π ρ ρ ρ ς ς ς
σ σ σ τ τ τ υ υ υ
φ φ φ χ χ χ ψ ψ ψ
ω ω ω ϑ ϑ ϑ ϒ ϒ ϒ
ϖ ϖ ϖ
      ¡ ¡ ¡
¢ ¢ ¢ £ £ £ ¤ ¤ ¤
¥ ¥ ¥ ¦ ¦ ¦ § § §
¨ ¨ ¨ © © © ª ª ª
« « « ¬ ¬ ¬ ­ ­ ­
® ® ® ¯ ¯ ¯ ° ° °
± ± ± ² ² ² ³ ³ ³
´ ´ ´ µ µ µ " " "
< < < > > > '   '
 

div标签和span标签

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

块级元素与行内元素的区别:
  所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

注意:

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

img标签

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

 

 

a标签

超链接标签

相当于插入连接

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

  什么是URL

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

  • 绝对URL - 指向另一个站点(比如 href="http://www.baidu.com)
  • 相对URL - 指当前站点中确切的路径(href="index.htm")
  • 锚URL - 指向页面中的锚(href="#top")

 

target:

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

列表

相当于博客园的有序编号和无序编号

1.无序列表

  • 第一项
  • 第二项

type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)

2.有序列表

  1. 第一项
  2. 第二项

type属性:

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

3.标题列表

复制代码
标题1
内容1
标题2
内容1
内容2
复制代码

表格

一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:

复制代码
序号 姓名 爱好
1 liubei 刘备
2 zhangfei 张飞
复制代码

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.(最好通过css来设置长宽)
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列(即合并单元格)

from

功能:

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

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

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

表单属性

 

属性 描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。

 

表单元素

基本概念:
HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理:
访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息。

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),
]
Django接收上传文件代码

 

 

input

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

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

 属性说明:

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

 

select标签

属性说明:

  • multiple:布尔属性,设置后为多选,否则默认单选
  • disabled:禁用
  • selected:默认选中该项
  • value:定义提交时的选项值
<form action="" method="post">
  <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>

 

 

label 标签

定义:

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

textarea多行文本

属性说明:

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

 

 

 

HTML标签大全

点击跳转

 

转载于:https://www.cnblogs.com/qq752059037/p/9760869.html

你可能感兴趣的:(HTML基础语句)