内容概要:

  • HTML介绍
  • 常用标签介绍

一. HTML介绍

web服务的本质

#!/usr/bin/env python3
# _*_ coding:utf- _*_
import socket sk = socket.socket() sk.bind(("127.0.0.1", ))
sk.listen() while True:
conn, addr = sk.accept()
data = conn.recv()
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"<h1>Hello world!</hi>")
conn.close()

浏览器作为socket client,访问socket server

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

HTML是什么?

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

HTML文档结构

HTML的结构:

  • 声明部分:主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
  • head部分:将页面的一些额外信息告诉服务器。不会显示在页面上。
  • body部分:我们所写的代码必须放在此标签內。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title> # 网页标题,在浏览器标题栏显示
</head>
<body>
  网页主题内容
</body>
</html>

HTML标题格式

  • HTML标签是由尖括号包围的关键字,如<html>, <div>等
  • HTML标签通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束。结束标签会有斜线。
  • 也有一部分标签是单独呈现的,比如:<br/>、<hr/>、<img src="1.jpg" />等。
  • 标签里面可以有若干属性,也可以不带属性。

标签的语法:

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

几个很重要的属性:

  • id:定义标签的唯一ID,HTML文档树中唯一标示,不能重复
  • class:为html元素定义一个或多个类名(classname)(CSS样式类名),可以重复
  • style:规定元素的行内样式(CSS样式)
html注释: <!--注释内容-->

二. HTML常用标签

前端学习【第一篇】: HTML内容的更多相关文章

  1. LINQ to XML LINQ学习第一篇

    LINQ to XML LINQ学习第一篇 1.LINQ to XML类 以下的代码演示了如何使用LINQ to XML来快速创建一个xml: public static void CreateDoc ...

  2. 从.Net到Java学习第一篇——开篇

    以前我常说,公司用什么技术我就学什么.可是对于java,我曾经一度以为“学java是不可能的,这辈子不可能学java的.”结果,一遇到公司转java,我就不得不跑路了,于是乎,回头一看N家公司交过社保 ...

  3. Java并发包下锁学习第一篇:介绍及学习安排

    Java并发包下锁学习第一篇:介绍及学习安排 在Java并发编程中,实现锁的方式有两种,分别是:可以使用同步锁(synchronized关键字的锁),还有lock接口下的锁.从今天起,凯哥将带领大家一 ...

  4. JVM学习第一篇思考:一个Java代码是怎么运行起来的-上篇

    JVM学习第一篇思考:一个Java代码是怎么运行起来的-上篇 作为一个使用Java语言开发的程序员,我们都知道,要想运行Java程序至少需要安装JRE(安装JDK也没问题).我们也知道我们Java程序 ...

  5. Golang学习-第一篇 Golang的简单介绍及Windows环境下安装、部署

    序言 这是本人博客园第一篇文章,写的不到位之处,希望各位看客们谅解. 本人一直从事.NET的开发工作,最近在学习Golang,所以想着之前学习的过程中都没怎么好好的将学习过程记录下来.深感惋惜! 现在 ...

  6. Python学习第一篇

    好久没有来博客园了,今天开始写自己学习Python和Hadoop的学习笔记吧.今天写第一篇,Python学习,其他的环境部署都不说了,可以参考其他的博客. 今天根据MachineLearning里面的 ...

  7. Android基础学习第一篇—Project目录结构

    写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...

  8. ImageJ 学习第一篇

    ImageJ是世界上最快的纯Java的图像处理程序.它可以过滤一个2048x2048的图像在0.1秒内(*).这是每秒40万像素!ImageJ的扩展通过使用内置的文本编辑器和Java编译器的Image ...

  9. Java图像处理最快技术:ImageJ 学习第一篇

    ImageJ是世界上最快的纯Java的图像处理程序. 它能够过滤一个2048x2048的图像在0.1秒内(*). 这是每秒40万像素!ImageJ的扩展通过使用内置的文本编辑器和Java编译器的Ima ...

  10. Spring MVC 学习第一篇

    很好的MVC 参考blog:http://jinnianshilongnian.iteye.com/blog/1752171 MVC: 概念:是一种设计模式,并没有引入新的技术,只是把我们开发的结构组 ...

随机推荐

  1. Vertica变化Local时间到GMT时间

    在Vertica的数据库的使用过程中碰到这么一种场景.程序从不同一时候区的集群中收集数据写入同一张表,然后我们须要把这些数据依照GMT时间来显示. 此时我们能够通过Vertica提供TIME ZONE ...

  2. Android Intent传递对象摘要

    效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaG9uZ3NoZW5ncGVuZw==/font/5a6L5L2T/fontsize/400/fil ...

  3. 图片处理拓展篇 : 图片转字符画(ascii)

    首先要明确思路, 图片是由像素组成的, 不同的像素有不同的颜色(rgb), 那么既然我们要转化为字符画, 最直接的办法就是利用字符串来替代像素, 也就是用不同的字符串来代表不同的像素. 另外图片一般来 ...

  4. SICP 1.9-1.10

    1.9 2^102^162^16 2n2^(n)2的(n-1)层次方(每一层都是2次方) 比如 h(4) = 2^(2^(2^2)) = 2^16

  5. 零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」

    原文:零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blen ...

  6. Mac App Store应用签名和pkg签名(必须签名后才能销售)

    App签名 只有用苹果颁发的证书签名的应用才能在App Store上进行销售,所以我们开发的应用必须打上签名. 签名有两种方式,一是使用Xcode,在配置里面设置签名,编译出来的app就有了签名:二是 ...

  7. Auto updater for my side loaded UWP apps

    原文: Auto updater for my side loaded UWP apps As I described before, i have a few tasks to solve for ...

  8. ef 查询总结

    1.Linq 查询两张表:a表和b表,要得到的数据是a表数据b表没有 例如:a表有5条数据1,2,3,4,5:b表有2条数据1,3:那么就用dataGridView1输出2,4,5:link语句要怎么 ...

  9. LINQ学习笔记(二)

    上一篇是根据百度百科写的随便,同时也纠正我对LINQ的看法,因为首次接触LINQ是使用EF对数据库数据的操作. 所以误以为它操作数据库的一种新手段. LINQ语言集成查询是一组技术的名称,这些技术建立 ...

  10. DBShop 电子商务网店系统

    DBShop 电子商务网店系统,采用业界知名框架 ZendFramework 2 开发而成. 下面为功能简介 1.在线更新:在线系统更新和在线模板安装与更新,简单.方便.快捷,省却了手动更新的繁琐步骤 ...