HTML5教程

HTML

本文主要是介绍HTML，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录
  • 前端简介
    • 什么是前端?什么是后端?
    • 知识脉络
  • HTTP协议
    • 简介
    • HTTP协议四大特性
    • HTTP协议数据格式
    • HTTP协议响应状态码
  • HTML
    • 简介
    • HTML文档结构
    • HTML标签的分类
    • HTML注释语法
  • 标签的两大重要参数
  • head内常见标签
  • body内标签
    • body基本标签
    • body内特殊符号
    • body内常见标签
      • 1.布局标签
      • 2.图片标签
      • 3.链接标签
      • 4.列表标签
      • 5.表格标签

前端简介

什么是前端?什么是后端?

前端：任何与用户直接打交道的界面都可以称之为前端。eg:淘宝页面，游戏页面，操作页面。

后端：不直接与用户打交道的用于执行真正业务逻辑的代码。eg:python代码，java代码，c++代码。

知识脉络

知识点： HTML CSS JavaScript jQuery(框架) Bootstrap(框架)
只要学习前端看到要学'前端三剑客'>>>:HTML CSS JavaScript
比喻说明:HTML:网页的骨架；CSS:网页的样式；JavaScript:网页的动态效果

img

HTTP协议

简介

我们自己写的TCP服务端与浏览器之间通信了，但是浏览器不识别服务端数据。不同的服务端数据的组织策略千差万别，但是浏览器却需要做到能够统一处理，最佳的解决措施是统一规定一个标准“HTTP协议”。

HTTP协议规定了服务端与浏览器之间的数据交互格式及其他事项。

如果服务端遵循HTTP协议，就可以被浏览器正常访问并展示内容。
如果服务端不遵循HTTP协议，浏览器就不会正常访问和展示，但是不影响服务端。

HTTP协议四大特性

1.基于请求、响应
    服务端永远不会主动给客户端发消息,必须是客户端先请求服务端被动响应.
2.基于TCP/IP作用于应用层之上的协议
    应用层协议:HTTP HTTPS FTP ...
3.无状态
    服务端不保存客户端状态(纵使见她千百遍，我都当她如初见).
4.短链接
    不保持客户端与服务端之间的链接导通，补充:websocket(长连接) 主要用于加好友聊天等业务.

img

HTTP协议数据格式

请求格式:客户端给服务端发送消息应该遵循的数据格式

1.请求首行(请求方法 协议版本)
2.请求头(一大堆k:v键值对)
3.(换行不能省略)
4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有

响应格式:服务端给客户端发送消息应该遵循的数据格式

1.响应首行(响应状态码 协议版本)
2.响应头(一大堆k:v键值对)
3.(换行不能省略)
4.响应体(给浏览器展示给用户看的页面内容)

HTTP协议响应状态码

用数字来表示一串中文意思(简化理解)。

1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
2XX:200 OK  表示请求成功 服务端给出了响应
3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX:403请求不合法(权限不够)	404请求资源不存在
5XX:都是服务端错误  与客户端无关(代码bug、机房炸了...)
在工作中还会自定义状态码(因为默认的不够),自定义状态码一般都是从10000开始

HTML

简介

HTML---超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言，不是一种编程语言，HTML使用标签来描述网页。

本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

网页文件的扩展名：.html或.htm。

HTML文档结构

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

</body>
</html>
  1. <!DOCTYPE html>声明为HTML5文档。
  2. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
  3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据,给浏览器看的数据
  4. <title>、</title>定义了网页标题，在浏览器标题栏显示。
  5. <body>、</body>之间的文本是可见的网页主体内容。给用户看的数据

img

HTML标签的分类

  1. 双标签：有头有尾，内容写在中间

    <h1>内容</h1>   
<p>内容</p>

  2. 自闭合标签:单标签

    <img/>	
<link />
<br />

HTML注释语法

<!--单行注释-->
<!--
  多行注
-->
'''html由于标签非常的多 所以可以通过注释区分页面区域'''

补充知识：在pycharm中编写html

1.在pycharm中的html文件内，标签只需要写表名称，然后按Tab自动补全即可
2.在pycharm中的html文件里，注释的快捷键也是ctrl+？
3.html标签其实没有缩进的概念，因为我们写python缩进习惯了，可以让代码更加美观
4.如何打开html标签，右键选择打开方式，在pycharm中html文件右上角有浏览器图标快捷方式点击即可（前提是安装了该浏览器）

img

标签的两大重要参数

  1. id
    类似于身份证号,同一个html页面上标签的id值不允许重复,用于精确查找某个标签(因为一个html页面上相同标签名的标签太多).

  2. class
    类似于面向对象知识,可以将多个标签归为一类,分类查找(范围查找一次性多个).

head内常见标签

head标签内编写的标签一般都是给浏览器看的，用户看不到。

标签 作用
title 控制网页小标题
style 内部支持编写css代码
link 引入外部css文件+
script 内部支持编写js代码，也可以通过src属性引入外部js文件
meta 功能非常多，keywords:搜索引擎查询关键字；description:用于展示页面搜索结果的文本描述

正常的业务逻辑HTML，CSS，JS都会分不同的文件存储，用于解耦合。

body内标签

body基本标签

1.标题系列
	h1~h6(1到6级标题)
2.字体系列
	<i>斜体</i>
    <b>加粗</b>
    <u>下划线</u>
    <s>删除线</s>
3.文本段落
	<p>段落</p>
4.其他
	hr	水平分割线
	br	换行符

body内特殊符号

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

img

body内常见标签

标签的类别：块儿级标签，行内标签。

块儿级标签:h1~h6 p	div
		默认独占浏览器一行内 
行内标签:s i u b span
		自身内部文本多大就占多大
标签之间支持嵌套(最好是布局类相关标签参与),块儿级标签可以嵌套任意标签,行内标签只能嵌套行内标签.

1.布局标签

div---用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span---用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
页面的编写首先就是先用布局标签占位,之后填充内容即可.

2.图片标签

<img src='111.jpg' title='美女图片' alt='这是一直美女图片' height='200px' width='200px'/>
属性 值和作用
img 图片标签
src 图片路径
title 鼠标悬浮自动展示提示信息
alt 当图片无法正常展示自动提示的信息
height 自定义图片高度
width 自定义图片宽度

ps:height和width调整一个另外一个自适应调节,单位是px(像素).

3.链接标签

<a href="https://www.sogo.com" target="_self">click me</a>
属性 值和作用
a 超链接标签
href 点击跳转到位置，可以写网址，也可以写标签id值
target 控制是否当前页跳转，默认_self当前页，设置_blank新建页

4.列表标签

无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

type属性：

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）

无序列表是使用频率最高的列表标签，页面上只有是有规则排列的横向或者竖向内容，几乎使用的都是无序列表。

5.表格标签

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

表格的基本结构：

<table border="1px" cellpadding="2px" >
    <thead>
        <tr>  <!--tr表示一行-->
            <th>编号</th>  <!--th加粗文本-->
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>  <!--表头字段-->
    <tbody>
        <tr>
            <td>1</td>  <!--td普通文本-->
            <td>jason</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>tony</td>
            <td>28</td>
        </tr>
        <tr>
            <td>3</td>
            <td>kevin</td>
            <td>38</td>
        </tr>
    </tbody>  <!--表单数据-->
</table>

属性:

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

img

这篇关于HTML的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航