前端知识--------HTML内容

HTML介绍

　　1、web服务本质　

import socket

sk = socket.socket()

sk.bind(('127.o.o.1',8080))

sk.listen()

while 1:

    conn,addr = sk.accept()

    data = conn.recv(4000)

    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')

    conn.send(b'<h1>Hello World!'</h1>)

    conn.close()

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

　　2、HTML是什么？

　　　　超文本标记语言（HTML）是一种用于创建网页的标记语言

　　　　HTML不是一种编程语言。

　　3、HTML文档结构

　　　　最基本的HTML文档：

<!DOCTYPE html>

<html lang = 'zh-CN'>

<head>

    <meta charset = 'utf-8'>

    <title>百度一下</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>之间的文本是可见的网页主体内容。

　　　　注意：对于中文网页需要使用<meta charset=‘utf-8’>生命编码，否则会出现乱码。

　　4、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样式）

　　5、HTML注释

　　6、<!DOCTYPE>标签

　　　　<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。

　　　　<!DOCTYPE>声明不是HTML标签，它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。

HTML常用标签

　　1、head内常用标签

　　　　<title></title>　　定义网页标题

　　　　<style></style>　定义内部样式表

　　　　<script></script> 定义JS代码或引入外部JS文件

　　　　<link/>　　　　引入外部样式表文件

　　　　<meta>　　　　定义网页原信息

　　2、Meta标签

　　　　1、<meta>标签位于文档的头部，不包含任何内容。提供的信息是用户不可见的。meta标签共有两个属性，分别是http-equiv和name属性。

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

<!--2秒后跳转到对应的网址，注意引号-->

<meta http-equiv='refresh'> content='2;URL=https://www.jd.com'>

<!--指定编码的格式类型-->

<meta http-equiv="content-type" charset="UTF-8">

<!--告诉IE浏览器以最高级模式渲染文档-->

<meta http-equiv="x-ua-compatible" content="IE=edge">

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

<meta name="description" content="陈二狗的妖孽人生">

<meta name="keywords" content="meta总结，html meta，meta属性，meta跳转">

　　3、body内常用标签

　　　　1、基本标签（块级标签和内联标签）

　　　　　　1、块级标签-------独占一行的

　　　　　　　　h1-h6、p、div、hr、li、tr

　　　　　　2、内联标签--------在一行显示的

　　　　　　　　a、span、img、b/i/u/s

　　　　　　3、一些标签的意思

　　　　2、特殊字符

内容	对应代码
空格
>	>
<	<
&	&amp；
￥	&yen；
版权	&copy；
注册	&reg；

　　　　3、div标签和span标签

　　　　　　div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

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

　　　　　　注意：

　　　　　　　　关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其他内联元素。

　　　　　　　　p标签不能包含块级标签，p标签也不能包含p标签。

　　　　4、img标签

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

　　　　5、a标签----超链接标签

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

<a href="https:www.jd.com" target="_blank">点我</a>

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

　　　　　　　　· 绝对URL- 指向另一个站点（比如 href=‘http://www.jd.com’）

　　　　　　　　· 相对URL- 指向当前站点中确切的路径（href=‘index.html’）

　　　　　　　　· 锚URL- 指向页面中的锚（href=‘#top’）

　　　　　　target：

　　　　　　　　· _blank表示在新标签页中打开目标网页

　　　　　　　　· _self表示在当前标签页中打开目标网页

　　　　6、列表

　　　　　　1、无序列表

<ul type="disc">

        <li>第一项</li>

        <li>第二项</li>

 </ul>

　　　　　　　　type属性：

　　　　　　　　 · disc（实心圆点，默认值）

　　　　　　　　 · circle（空心圆圈）

　　　　　　　　　 · square（实现方块）

　　　　　　　　 · none（无样式）

　　　　　　2、有序列表

<ol type="1" start="2">

        <li>第一项</li>

        <li>第二项</li>

    </ol>

　　　　　　　　type属性：

　　　　　　　　 · 1 数字列表，默认值

　　　　　　　　　 · A 大写字母

　　　　　　　　　 · a 小写字母

　　　　　　　　　· I 大写罗马

　　　　　　　　　 · i 小写罗马

　　　　　　3、标题列表

<dl>

       <dt>标题1</dt>

       <dd>内容1</dd>

       <dt>标题2</dt>

       <dd>内容1</dd>

       <dd>内容2</dd>

</dl>

　　　　7、表格

　　　　　　表格是一个二维数据空间，一个表格有若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其他的表格等内容。

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

　　　　　　表格的基本结构：

<table>

        <thead>

            <tr>

                <th>序号</th>

                <th>姓名</th>

                <th>爱好</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>郭</td>

                <td>学习</td>

            </tr>

            <tr>

                <td>2</td>

                <td>张</td>

                <td>玩</td>

            </tr>

        </tbody>

</table>

　　　　　　属性：

　　　　　　　　border：表格边框

　　　　　　　　cellpadding：内边距

　　　　　　　　cellspacing：外边距

　　　　　　　　width：像素百分比（最好通过CSS来设置长宽）

　　　　　　　　rowspan：单元格竖跨多少行

　　　　　　　　colspan：单元格横跨多少列（即合并单元格）

　　　　8、form

　　　　　　功能：

　　　　　　　　　表单用于向服务器传数据，从而实现用户与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）

　　　　9、input

　　　　　　<input>元素会根据不同的type属性，变化为多种形态。

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

　　　　　　属性说明：

　　　　　　　　name：表单提交时的‘键’，注意和id的区别

　　　　　　　　value：表单提交时对应项的值

　　　　　　　　　　type=‘button’，‘reset’，‘submit’时，为按钮上显示的文本内容

　　　　　　　　　　type=‘text’，‘password’，‘hidden’时，为输入框的初始值

　　　　　　　　　　type=‘checkbox’，‘radio’，‘file’，为输入相关联的值

　　　　　　　　checked：radio和checkbox默认被选中的项

　　　　　　　　readonly：text和password设置只读

　　　　　　　　disabled：所有input均使用

　　　　10、select标签　　

<form action="" method="post">

        <select name="city" id="city">

            <option value="1">北京</option>

            <option value="2" selected>上海</option>

            <option value="3">深圳</option>

            <option value="4">广州</option>

        </select>

</form>

　　　　　　属性说明：

　　　　　　　　multiple：布尔属性，设置后为多选，否则默认单选

　　　　　　　　disabled：禁用

　　　　　　　　selected：默认选中该项

　　　　　　　　value：定义提交时的选项值

　　　　11、label标签

　　　　　　定义：<label>标签为input元素定义标注（标记）.

　　　　　　说明：

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

　　　　　　　　2、<label>标签的for属性值应当与相关元素的id属性值相同。

<form action="">

        <label for="username">用户名</label>

        <input type="text" id="username" name="username">

    </form>

　　　　12、textarea多行文本　　　　

<textarea name="memo" id="memo" cols="30" rows="10">

        默认内容

    </textarea>

　　　　　　属性说明：

　　　　　　　　name：名称

　　　　　　　　rows：行数

　　　　　　　　cols：列数

　　　　　　　　disabled：禁用

前端知识--------HTML内容的更多相关文章

web前端知识体系总结
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
3 HTML&JS等前端知识系列之javascript的基础
preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式条件判断,循环流程等. 函数面向对象 what ...
自己总结的web前端知识体系大全【欢迎补充】
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
移动Web 开发中的一些前端知识收集汇总
在开发DeveMobile 与EaseMobile 主题的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...
web前端知识体系大全
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
web前端知识体系小结（转）
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
前言见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
整理六百篇web前端知识混总
9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具创建响应式布局的10款优秀 ...

随机推荐

RDD之五：Key-Value型Transformation算子
Transformation处理的数据为Key-Value形式的算子大致可以分为:输入分区与输出分区一对一.聚集.连接操作. 输入分区与输出分区一对一 mapValues mapValues:针对(K ...
ubuntu 14.04 lamp 安装与配置
一.安装apache 1.打开终端:Ctrl+Alt+T sudo apt-get update 2.通过apt-get方式安装Apache: sudo apt-get install apache2 ...
安卓手机安装虚拟定位的方法Xposed安装器+模拟位置（Xposed模块）
原文:https://www.52pojie.cn/thread-571328-1-1.html 未测试,据说只支持某些手机,小米和华为很难安装,建议买其他品牌. Xposed安装器步骤:·ROOT你 ...
ESXI 5.5加载 zabbix OVF 3.2.6操作
如果是虚拟机安装ZABBIX,ZABBIX的前台WEB时间,是由虚拟机的BIOS时间决定的. 一. 1.去官方下载vmdk磁盘镜像链接地址为https://sourceforge.net/proje ...
修改 Docker-MySQL 容器的默认用户加密规则
背景介绍今天开始做集成测试,需要把程序和环境重新部署在新的服务器上.项目的环境都是基于Docker来的,所以数据库也是选择从Docker官网上面拉官方的MySQL镜像.(Tag = 8.0.12) ...
js 下关于json的销毁和添加
var json={a:1,b:2} 现在给json添加个c,可以这样写 json.c=3或json["c"]=3 我删除一个属性 delete json.a alert(json ...
direct path read/write （直接路径读／写)
转载:http://www.dbtan.com/2010/04/direct-path-readwrite.html direct path read/write (直接路径读/写): 直接路径读(d ...
python的eval、exec函数使用总结
eval函数一.函数的作用将字符串str当成有效的表达式来求值并返回计算结果.它要执行的python代码只能是单个运算表达式(不支持任意形式的赋值操作),而不能是复杂的代码逻辑. 二.函数的定义 ...
CentOS 配置软raid
v-box里面新建一个centos7.3的服务器 v-box中增加4块8GB容量的硬盘.(我增加的是nvme的ssd硬盘,普通硬盘也没有问题,容量大代表你需要等待的时间长,所以小点容量最好) 创建ra ...
HTML5 新特性（一）
1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素用<figure>和<figcapt ...

前端知识--------HTML内容

前端知识--------HTML内容的更多相关文章

随机推荐

热门专题