HTML 初识

WEB服务本质


# coding=utf-8import socket

def main():    sock = socket.socket()    sock.bind((‘127.0.0.1‘,8800))    sock.listen(5)

while True:        conn,addr = sock.accept()        print(‘from conn:‘,conn)

while 1:            receive = conn.recv(1024)            print(receive.decode(‘utf8‘))            f = open(‘html1.html‘,‘r‘)            se = f.read()            conn.send((‘HTTP/1.1 201 OK\r\n\r\n%s‘%se).encode(‘utf8‘))        conn.close()

if __name__ == ‘__main__‘:    main()

html 是什么?

1. 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。一套规则,浏览器认识的规则

2. 浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容。但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性)

3. 静态网页文件扩展名:.html 或 .htm

html不是什么?

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

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

html结构:

<!DOCTYPE html>告诉浏览器使用什么样的html或者XHTML来解析html文档<html>     HTML文件声明开始
        <head>
                    <meta charset="UTF-8"/>
                    <title>网页标题</tile>
        </head>
        <body>
                     文件体
        </body>
</html>

  <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档,在它们之间是文档的头部<head>和主体<body>。

  <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。

  <title></title>定义网页标题,在浏览器标题栏显示。

  <body></body>之间的文本是可见的网页主体内容

html标签格式:

标签的语法:

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

常用标签:

<!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前。此标签可告知浏览器使用哪种html或XHTML规范。

作用:声明文档的解析类型,避免浏览器的怪异模式。

document.compatMode:

  1. BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
  2. CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用,但如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat。

<head>内常用标签

<meta>标签

meta介绍:

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

  和关键词。
  <meta>标签位于文档的头部,不包含任何内容。
  <meta>提供的信息是用户不可见的

meta标签的组成:

  meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数

  值,这些不同的参数值就实现了不同的网页功能。

  (1)name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是

     便于搜索引擎机器人查找信息和分类信息用的。     

<meta name="keyword" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩机构是由一个很老的男孩创建的">

  (2)http-equiv属性:

<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号,分别在秒数的前面和网址的后面)

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

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

非meta标签:

 <title>oldboy</title>
 <link rel="icon" href="http://www.jd.com/favicon.ico">
 <link rel="stylesheet" href="css.css">
 <script src="hello.js"></script>

<body>内常用标签

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

<hn>: n的取值范围是1~6;从大到小,用来表示标题
<p>: 段落标签.包裹的内容被换行,并且也上下内容之间有一行空白
<b>or <strong>: 加粗标签
<strike>: 为文字加上一条中线
<em>: 文字变成斜体
<sup> and <sub>上角标 和 下角标
<br>: 换行
<hr>: 水平线
特殊字符:
            &lt; &gt;&quot;&copy;&reg;

<div> 和<span>

<div></div> : <div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.

<span></span>: <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

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

  所谓块元素,是以另一行开始渲染的元素,行内元素则不需要另起一行。如果单独在网页中插

入这两个元素,不会对页面产生任何影响。

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

图形标签:<img>

src: 要显示图片的路径
alt: 图片没有加载成功时的提示
title: 鼠标悬浮时的提示信息
width: 图片的宽
height: 图片的高(宽高两个属性只用一个会自动等比缩放)

超链接标签(锚标签):<a></a>

什么是超链接?

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

什么是URL?
URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分:为协议:http://、ftp://等
第2部分:为站点地址:可以是域名或IP地址
第3部分:为页面在站点中的目录:stu
第4部分:为页面名称,例如 index.html
各部分之间用“/”符号隔开。
<a href="" target="_blank" >click</a>

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

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

列表标签:

<ul>: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表
         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题
         <dd> 列表项

表格标签:<table>

表格的概念:

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

<table>
            <tr>
                    <td>标题</td>
                    <td>标题</td>
            </tr>

            <tr>
                    <td>标题</td>
                    <td>标题</td>
            </tr>

            <tr>
                    <td>标题</td>
                    <td>标题</td>
            </tr>
</table>                

属性:

<tr>: 表行

<th>: table head cell

<td>: table data cell

  border: 表格边框

  cellpadding: 内边框

  cellspacing: 外边框

  width: 像素 百分比

  rowspan: 单元格竖跨多少行(纵向合并单元格)

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

时间: 2024-12-05 20:14:52

HTML 初识的相关文章

初识Python,望君多多关照

在学习Python之前,我们接触过数据结构和网页制作.前者让我们学习如何把C语言运用的更加整齐规范,而后者让我们亲身学习如何运用所学,制作一个静态网页.通过这些课程的学习,让我对C语言产生了比较大的压力,以至于对编程.对这学期的Python课程都有一种如临大敌的感觉. 但是真的学习了这门课程,体会了编码过程中的一些固定运用方法和套路之后,也许过程中对这门课程隐隐约约产生了一点点朦胧的感觉,仿佛他也并没有想象中的那么困难,起码现在的学习让我认为,他可能没有C语言那么繁琐和麻烦.当然,以一个初学者的

初识数组排序!!!!

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初识数组排序</title> <!--调试成功--> <style type="text/css"> *{ padding:0; margin: 0; } li,ul{ list-style: none; } #p

初识操作系统和linux

初识操作系统和linux 1.计算机系统由硬件系统和软件系统两大部分组成:是一种能接收和存储信息,并按照存储在其内部的程序对海量数据进行自动.高速地处理,然后把处理结果输出的现代化智能电子设备. 2.世界上第一台计算机是1946年诞生在美国宾州大学. 3.冯·诺依曼体系结构:1946年数学家冯·诺依曼于提出计算机硬件系统由运算器.控制器.存储器.输入设备.输出设备.摩根定律:当价格不变时,集成电路上可容纳的元器件的数目,约每隔18-24个月便会增加一倍,性能也将提升一倍.现在计算机技术进本很难遵

JAVA 初识类加载机制 第13节

JAVA 初识类加载机制 第13节 从这章开始,我们就进入虚拟机类加载机制的学习了.那么什么是类加载呢?当我们写完一个Java类的时候,并不是直接就可以运行的,它还要编译成.class文件,再由虚拟机解释给当前的操作系统去执行.这些过程都是我们看不见的,我们能看见的也就是一个.class文件.既然虚拟机要解释这些.class文件给当前的操作系统听,那么他怎么获得这些.class文件呢?虚拟机获得这些.class文件的过程就是类加载了. 所以,总结来说就是:虚拟机将.class文件从磁盘或者其他地

初识React

原文地址:北云软件-初识React 专注于UI 在MVC分层设计模式中,react常被拿来实现视图层(V).React不依赖于技术栈的其他部分,因此可以方便的在现有项目中尝试用它来实现一个小特性. 虚拟DOM React从DOM中抽象出来,给出一种更简洁的编程模型,且性能表现更好.能够通过NodeJS实现服务端渲染,通过React Native开发原生app. 数据流React实现单向.响应式数据流,减少boilerplate且比传统数据绑定更容易理解. 简洁的组件React的组件都实现了一个r

泛型的几种类型以及初识webform

今天学习的可以分为两类吧,但是学习的都是比较抽象的,不太容易掌握吧.首先我们大部分时间学习了泛型,泛型的委托,泛型接口以及枚举器,迭代器,扩展方法:最后简单的认识了webform,实现了一个简单的功能. 一.泛型 定义:泛型(generic)可以软糖多个类型共享一组代码,泛型允许我们声明类型参数化.可以用不同的类型进行实例化,说白了,就是可以用类型占位符,创建具体类型致命的真实概念.C#中提供了五种泛型,类,结构,接口,委托和方法.下面举例说明可能更容易理解, class MyStack<T>

最新计算机技术与管理科学应用专家——初识ERB

ERB管理系统:英文全称Enterprise Resource and Behavior,英文简称:ERB,中文名全称:企业资源与行为管理系统.ERB是由理文企业管理顾问有限公司首席管理师,现任商翼ERB企业管理系统项目总监吴志华先生,于2010年9月首先提出的.ERB不再单以供应链管理作为系统应用的基础,而是以企业行为与企业资源规划的最佳结合作为系统应用设计的核心基础,强调企业行为的规划.执行.监督与追溯,强调企业管理水平与员工素养的持续提升:提供企业行为与企业资源管理最佳结合的整体应用解决方

[OpenGL]环境搭建以及OpenGL初识

想往游戏行业发展的话,经常被提及到的就是OpenGL和DirectX,这两者听起来感觉是一门挺高深的技术,今天我也开始摸索学习OpenGL,那么OpenGL到底是什么?它和DirectX有什么区别和联系? OpenGL初识 OpenGL只是一套图形函数库 DirectX包含图形.声音.输入.网络等模块. 但就图形而论,DirectX的图形库性能不如OpenGL,OpenGL稳定,可以跨平台使用,DirectX只支持Windows平台,所以OpenGL还是有它的优势!OpenGL ES是OpenG

初识git

初识git 1 安装git 最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和Windows这几大平台上正常运行了. 要使用Git,第一步当然是安装Git了.根据你当前使用的平台来阅读下面的文字: 1.1 在Linux上安装Git 首先,你可以试着输入git,看看系统有没有安装Git: ``` $ git The program 'git' is curren

初识linux文件管理

初识linux文件管理 1.文件系统与目录结构 文件系统从根目录 下开始,用"/". 以. 开头的文件为隐藏文件,路径分隔用/表示.文件系统的层级结构是LSB(linux standard base),遵循文件系统层级标准(FHS ) 文件命名规则:   文件名最长255个字节,包括路径名在内共4095个字节 蓝色–> 目录 绿色–> 可执行文件 红色–> 压缩文件 浅蓝色–> 链接文件 灰色–> 除了斜杠和NUL, 所有字符都有效,但不推荐使用特殊字符,