HTML(一)

目录

引入

HTTP与socket之间的关系

  • B/S架构：基于socket的TCP协议

  • 网页请求页面知识：

    HTTP_REQUEST HTTP请求 ​ HTTP_RESPONSE HTTP响应

     

  • web端组成：

    html 一堆标签组成的内容，基础的排版 ​ css 描述标签的样式，渲染 ​ js/jp 动态效果

HTML

概念

HyperText Markup Language ：超文本标记语言

超文本：音频，视频，图片称为超文本

标记：所有的内容都在标签中

 <这就是一个标签> ，由<>包裹起来

【作用】HTML是负责描述文档语义的语言

【注意】HTML是一种标记语言，它没有编译这一过程，而是由浏览器直接解析执行。

HTML常用术语

  • 网页：由各种标签组成的一个页面

  • 主页：又叫首页，是一个网站的其实页面或者导航页面

  • 标记：又叫标签，<p>为开始标记，</p>为结束标记；每个标签都有自己特殊的语义

  • 元素：<p>为开始标记</p>从开始到结束就是一个元素

  • 属性：标签的辅助信息

HTML的语法规范

1.所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>

2.所有的标记都必须小写。所有的标记都必须关闭。

  • 双边标记：<span></span>

  • 单边标记：<br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” />

3.所有的属性值必须加引号。<h1 id="head"></h1>

4.所有的属性必须有值。<input type="radio" checked="checked" />

HTML的语法特征

对换行不敏感，对tab不敏感

HTML的逻辑在于标签的使用，而不是依靠缩进和空格甚至换行。

空白折叠

HTML中，将回车、空格、tab等接叠成一个空格。如果要设置多个空格，需手动设置空格：&nbsp,

标签要严格封闭

双边标记：双闭合标记<html></html> ​ 单边标记：单闭合标记<meta />

HTML标签的分类

除了以是否封闭区分双边标记,单边标记外，还可以分为： 内联标签：又叫行内标签，占行内一部分，不带换行效果 块级标签：占一行，自带换行效果

内联元素

内联元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建。

 和其他内联元素从左到右在一行显示
 不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
 内联元素的宽高是由本身内容的大小决定（文字、图片等）
 内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）

块级元素

块级元素是指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建。

 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
 可以直接控制宽度、高度以及盒子模型的相关css属性
 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
 在不设置高度的情况下，块级元素的高度是它本身内容的高度

HTML结构

【pycharm中】输入以下代码，可以自动生成基本结构：

 # 输入 html:5 ，然后按下tab键，自动加载以下结构
 <!doctype html>  # 告诉浏览器，该文档的规范
 <html lang="en">  # 选择en浏览器页面可以显示是否翻译，也可以换成zh-cn，表示中文
 <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 </head>
 <body>
 ​
 </body>
 </html>

文档声明头

一个标准的HTML网页都是以一个<!DOCTYPE html> 开头

这就是文档声明头DocType Declaration，简称DTD，是告诉浏览器文档的HTML使用的是哪一种规范。

常见的声明格式

【HTML 5】

<!DOCTYPE html>

【HTML 4.01 Strict】

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font），不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

【HTML 4.01 Transitional】

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

【HTML 4.01 Frameset】

该 DTD 等同于 HTML 4.01 Transitional，且允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
 "http://www.w3.org/TR/html4/frameset.dtd">

　　

博文引用：https://www.cnblogs.com/Eva-J/articles/11229995.html

 

posted @ 2019-08-10 08:30  Aries-X  阅读(200)  评论(0)  编辑  收藏  举报