前端基础---HTML

web服务的本质：

服务端

import  socket
sock=socket.socket()
sock.bind(("127.0.0.1",8800))
sock.listen(5)while 1:print("waiting....")conn,addr=sock.accept()data=conn.recv(1024)print('data',data)with open("index.html") as f:response=f.read()conn.send(("HTTP/1.1 201 OK \r\n\r\n %s" %response).encode("utf8"))          #声明通信的协议conn.close()

html

HTMLШ摤文本编辑语言通过标签语言来标记要显示的网页中的各个部分浏览器认识的规则它是一种标记语言不是编程语言使用标记标签来描述网页

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

html结构

<!DOCTYPE html>    #声明解析html文档的格式
<html lang="en">               #<html> </html>是文档的开始标记和结束标记
<head>                         #<head></head>元素出现在文档的开头部分<title>网页标题</title>    #<title></title>定义网页标题
</head>
<body>                     #<body></body>之间的文本是可见的网页主体内容</body>
</html>

<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档

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

<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会扎浏览主5奈牡荡翱谙允荆瞧浼涞脑赜刑厥庵匾囊庖濉

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

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

2.html标签格式

标签的语法

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

a.由尖括号包围的关键字。如<html>

b.通常是成对出现的双边标记。如<div></div>

c.标签不区分大小写推荐使用小写

d.标签分为两部分开始标签<a>和结束标签</a>两个标签之间的部分叫做标签体有些标签功能比较简单使用一个标签即可这种标签叫做自闭和标签。如<br/>、<hr/>、<input/>、<img/>

e.标签可以有若干属性也可以不带属性。如<head>元素不带任何属性

f.标签可以嵌套但不能交叉嵌套。如<a><b><a/><b/>

3.常用标签

标签分为两类

block块级标签---自己独占一行

inline内联标签---按内容划分

<!DOCTYPE>

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

作用声明文档的解析类型(document.compatMode)避免浏览器的怪异模式

document.compatMode

BackCompat怪异模式浏览器使用自己的怪异模式解析渲染页面

CSS1Compat标准模式浏览器使用W3C的标准解析渲染页面

如果未指定DOCTYPE声明则默认使用BackCompat

<head>内常用标签

<meta>标签

meta标签的组成meta标签共有两个属性

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

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

非meta标签

<title></title>
<link rel=”icon” href=”www.baidu.com”>
<link rel="stylesheet"href="css.css">
<scriptsrc="hello.js"></script>

<body>内常用标签

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

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标和下角表.

<br>:换行.

<hr>:水平线

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

<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><th>标题</th><th>标题</th></tr><tr><td>内容</td><td>内容</td></tr>
</table>

<tr>: table row

<th>: table head cell

<td>: table data cell

属性:

border: 表格边框

cellpadding: 内边距

cellspacing: 外边距

width: 像素百分比最好通过css来设置长宽

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列即合并单元格

<form>表单标签

功能

表单用于向服务器传输数据从而实现用户与Web服务器的交互

表单能够包含input系列标签比如文本字段、复选框、单选框、提交按钮等

表单还可以包含textarea、select、fieldset和 label标签。

表单属性

action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据即表单元素值作相应处理

method: 表单的提交方式 post/get默认取值就是get

表单元素

基本概念
HTML表单是HTML元素中较为复杂的部分表单往往和脚本、动态页面、数据处理等功能相结合因此它是制作东态网拙重要的内容。
表单一般用来收集用户的输入信息
表单工作原理
访问者在浏览有表单的网页时可填写必需的信息然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理如果有错误会返回错误信息并要求纠正错误。当数据完整无误后服务器反馈一个输入完成的信息

<input>系列标签

<1> 表单类型

type: text 文本输入框

password 密码输入框

radio 单选框

checkbox 多选框

submit 提交按钮

button 按钮(需要配合js使用.)

file 提交文件form表单需要加上属性enctype="multipart/form-data" 上传文件注意两点

1 请求方式必须是post

2 enctype="multipart/form-data"
<2> 表单属性

name 表单提交项的键

与id属卦的屈毙

name属性是和服务器通信时使用的名称id属栽是洵佬器端使用的名称该属性主要是为了方便客户端编程而在css和javascript中使用的

value 表单提交项的值

对于不同的输入类型value 属性的用法也不同

type="button","reset", "submit" - 定义按钮上的显示的文本

type="text","password", "hidden" - 定义输入字段的初始值

type="checkbox","radio", "p_w_picpath" - 定义与输入相关联的值

checked radio和 checkbox 默认被选中

readonly 只读. text 和 password

disabled 对所用input都生效

select 下拉选标签

name 表单提交项的键.

size &nbcp;&njs0; 选项个数

multiplemultiple

<optgroup> 为每一项加上分组

<option> 下拉选中的每一项属性

value 表单提交项的值

selected selected下拉选默认被选中

<textarea> 多行文本框

默认内容

</textarea>

</form>

<label>标签

定义<label> 标签为 input 元素定义标注标记
说明
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id =sp醤 style="font-family:'微软雅黑', 'sans-serif';">属性值相同。

</form>

<fieldset>标签

</fieldset>

转载于:https://blog.51cto.com/lyndon/1967742

前端基础---HTML相关推荐

html表格联动,html前端基础：table和select操作
html前端基础:table和select操作发布时间:2020-05-13 09:58:10 来源:亿速云阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
boost log 能不能循环覆盖_前端基础进阶（十四）：深入核心，详解事件循环机制...
Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...
gif透明背景动画_前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈（二）...
IT客栈作者:大腰子 bmp.jpg.png.gif.svg常用图片格式之前为大家介绍了几种WEB前端常用的图片格式,对比了它们的特点,参见<前端基础系列之bmp.jpg.png.gif.s ...
前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
jquery function_前端基础进阶（十三）详细图解jQuery扩展jQuery插件
UI 鉴赏早几年学习前端,大家都非常热衷于研究jQuery源码. 我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,"原来JavaScript居然可以 ...
前端基础-HTML的的标签详解
阅读目录一.head内常用标签二. HTML语义化三. 字符实体四. h系列标签五. p标签六. img标签七. a标签八. 列表标签九. table标签十. form标签一. ...
前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. ...
前端基础进阶（七）：函数与函数式编程
纵观JavaScript中所有必须需要掌握的重点知识中,函数是我们在初学的时候最容易忽视的一个知识点.在学习的过程中,可能会有很多人.很多文章告诉你面向对象很重要,原型很重要,可是却很少有人告诉你,面 ...

前端基础---HTML

前端基础---HTML相关推荐

最新文章

热门文章