前端学习---html基础知识

HTML基本知识

学习html首先我们先看看HTML本质:

web框架本质

我们在学socket,我们创建一个socketserver,然后运行起来,有一个client客户端要连接socket服务端,连接上之后,如果两边都没有close,就一直不断开,可以不断的进行请求。

那我们说一个网站,我们在服务器端运行我们的网站,所有的客户端就可以通过浏览器访问我们写的网站,所以我们用的iis,apache等它们本质上就是一个socket服务端,而我们打开的浏览器就是client端,进行数据传输。

我们如果基于TCP,客户端和服务端连接之后,只要两边不close,也都可以一直不断的访问交互。但是网站浏览器浏览和这个是不一样的。浏览器访问了服务端,服务端给我们数据,浏览器得到了数据之后,连接就立马断开了,如果还想要拿数据,还得再次建立连接。即一次请求,一次响应,一次断开。 

我们下面写一个socket服务端:

 1 import socket
 2 
 3 def handle_request(client):
 4     buf = client.recv(1024)
 5     client.send(bytes("HTTP/1.1 200 ok\r\n\r\n",encoding="utf-8"))
 6     client.send(bytes("Hello,Charles",encoding="utf-8"))
 7 
 8 
 9 def main():
10     sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
11     sock.bind(('localhost',8000))
12     sock.listen(5)
13 
14     while True:
15         connection,addr = sock.accept()
16         handle_request(connection)
17         connection.close()
18 
19 if __name__ == '__main__':
20     main()

我们运行之后用浏览器访问起来:

 

所以服务器的本质根源就是这20行代码,建立socket连接。

其实我网站的显示内容本质上也就是一大堆的字符串,我们在send函数中发送了hello,clarles,在网站上就显示了那个内容,如果我们加上一些标签比如

<h1 style='background-color:red'>Hello,Charles</h1>

 那么浏览器中显示的就是如下:

 

那所以客户端和服务器端进行交互的时候,服务端返回的永远是字符串,这个字符串之所以我们在浏览器上能看到上图的样式,那是因为浏览器把这个字符串进行了解析。浏览器认识这种格式。

所以我们要学的html其实就是一套浏览器认识的规则,这个就是html本质。

而我们开发者要做的就是:

1.学习html规则|(充当模板的作用)

2.从数据库中获取数据,然后替换到html文件的指定位置,这个事情以后就由web框架来做 

html标签知识

 注释:<!--注释的内容-->

标签分类:

1.自闭合标签:<meta charset="utf-8">

2.主动闭合标签:<title>测试</title>

 head内的标签

meta

 1.页面编码(告诉浏览器是什么编码)

<meta http-equiv="content-type" content="text/html;charse=uft-8" >

2.刷新和跳转:

<meta http-equiv="Refresh" Content="30">页面默认30s刷新一次

<meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com" />

3.关键词:给搜索引擎用的

<meta name="keywords" content="啊哈哈哈,慈溪,测测" >

 4.描述:描述网站内容

<meta name="description" content="按实际了的开发唉算了的卡加的辣椒弗兰德">

5.X-UA-Compatible:专门为IE设置的

<meta http-equiv="X-UA-Compatible" content-type="IE=EmulateIE7;IE=IE8;IE=IE9;" />

title

网页头部信息:<title>TItle</title>

Link 

1.css 

<link rel="stylesheet" type="text/css" href="css/common.css">

2.icon:网站图标

<link ref="shortcut icon" href="image/image.ico"> 

 

Style

在页面中写样式

例如:
<style type="text/css" > 
.bb{ 
       background-color: red; 
   } 
</style> 

Script

1.引进文件

<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

2.写js代码

< script type="text/javascript" > ... </script >

 body内的标签

标签一般分为两种:块级标签 和 行内标签

行内标签:a、span、select 等

块级标签:div、h1、p 等

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

空格:&nbsp;    小于号:&gt;    大于号:&lt;

1.p和br

p表示段落,默认段落之间是有间隔的!

br 是换行

<p>1231<br/>32132</p>
<p>123132132</p>
<p>123132132</p>

2.H 标签

<h1>h1</h1>

3.input系列:

a.text文本框:<input type="text" name="user" value="输入框中的默认值"> ,显示效果:

b.password密码框:<input type="password" name="passwd">输入的密码是点,显示效果:

c. submit提交按钮:<input type="submit" value="提交">,显示效果:

 用于表单的提交

d.button按钮:<input type="button" value="登录">,显示效果:

 仅仅只是一个按钮,没有办法进行表单的提交

e. radio单选框:<input type="radio" value="登录" name="gender">,

name属性如果都相同,则互斥

value属性用于后台获取选择的值

<form><div><p>请选择性别:</p>男:<input type="radio" name="gender" value="1"/>女:<input type="radio" name="gender" value="2"/></div><input type="submit" value="提交"/></form>

f.checkbox多选框:<input type="checkbox" value="1" name="hobby">

<p>爱好</p>
篮球:<input type="checkbox" name="hobby" value="1"/>
足球:<input type="checkbox" name="hobby" value="2"/>
排球:<input type="checkbox" name="hobby" value="3"/>
网球:<input type="checkbox" name="hobby" value="4"/>
<p>技能</p>python:<input type="checkbox" name="skill" value="python"/>php:<input type="checkbox" name="skill" value="php"/>

 效果:

如果需要默认选中的话:加一个属性:checked="checked"

g.file上传文件:<input type="file" name="fname">

如果你要用上传文件功能,你再form表单中一定要加一个属性:enctype='multipart/form-data' 

h:reset内容重置:<input type="reset" name="重置">

4.textarea多行文本:

<textarea name="meno">asdfasdf</textarea>

多行文本的默认值写在中间

5.select下拉框:

<select name="city" size="10" multiple="multiple"><option value="1">北京</option><option value="2" selected="selected">上海</option><option value="3">南京</option><option value="4">广州</option><option value="5">深证</option>
</select>

 显示效果:

参数解释:

  • size设置一次显示多少个值
  • multiple可以多选,按住control键
  • selected="selected":默认选择的值

分组显示:optgroup,但是这些江苏省,湖南省没有办法选中

<select name="city2" size="5"><optgroup label="江苏省"><option>宿迁</option><option>苏州</option></optgroup><optgroup label="湖南省"><option>湘潭</option><option>长沙</option></optgroup>
</select>

 效果如图:

  • 6. a标签

    作用:

    • 跳转
    • 锚点 :href="#某个标签的id"标签的ID不允许重复
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Title</title>
    </head>
    <body><a href="#i1">第一章</a><a href="#i2">第二章</a><a href="#i3">第三章</a><a href="#i4">第四章</a><div id="i1" style="height:600px;">第一章内容</div><div id="i2" style="height:600px;">第二章内容</div><div id="i3" style="height:600px;">第三章内容</div><div id="i4" style="height:600px;">第四章内容</div>
    </body>
    </html>

     

    这个就是一个锚的效果:点击第一章,跳转到本页面的第一章位置;点击第二章,跳转到本页面的第二个位置 

    7.img标签

    <img src="图片链接" style="height:200px;width:200px" alt="没有图片显示的内容" title="鼠标放在图片上的时候显示的文字" />

    注意:默认img标签,有一个1px的边框,在使用的时候应该先用border:0;把边框去掉

    8.列表 

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Title</title>
    </head>
    <body><ul style="background-color: red"><li>asdf</li><li>asdf</li><li>asdf</li></ul><ol style="background-color: green"><li>asd</li><li>asd</li><li>asd</li></ol><dl style="background-color: yellow"><dt>asdf</dt><dd>asdf12</dd><dd>asdf12</dd><dt>asdf</dt><dd>asdf12</dd><dd>asdf12</dd></dl>
    </body>
    </html>

    显示效果如图:

    9.表格:

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Title</title>
    </head>
    <body><table border="1"><tr><td>主机名</td><td>ip</td><td>端口号</td></tr><tr><td>localhost</td><td>192.168.1.1</td><td>8080</td></tr></table><!--最规范的写法,有表头,有内容--><table border="1"><thead><tr><th>主机名</th><th>ip</th><th>端口号</th></tr></thead><tbody><tr><td>localhost</td><td>192.168.1.1</td><td>8080</td></tr></tbody></table>
    </body>
    </html>

    效果显示:

    要注意代码的规范性!!

    合并单元格:

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Title</title>
    </head>
    <body><!--最规范的写法,有表头,有内容--><table border="1"><thead><tr><th>表头1</th><th>表头2</th><th>表头3</th><th>表头4</th></tr></thead><tbody><tr><td>1</td><td colspan="2">1</td><td>1</td></tr><tr><td rowspan="2">2</td><td>2</td><td>2</td><td>2</td></tr><tr><td>3</td><td>3</td><td>3</td></tr></tbody></table>
    </body>
    </html>

     行合并用:rowspan       列合并用:colspan

    效果显示:

    10.label标签:用于点击文字,使得关联的标签获得光标

    <label for="username">用户名:</label>
    <input id="username" type="text" name="user">

    用id把input 和 label进行关联,原本如果只是写一个label和一个input,我们在点击用户名的时候,input没有被选中,如果用for关联了input里的id之后,我们点击“用户名”的时候也就选中input输入框

    11.fieldset: 在一个框中然后插入标题

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Title</title>
    </head>
    <body><fieldset><legend>登录</legend><label for="username">用户名:</label><input id="username" type="text" name="user"><br><label for="password">&nbsp;&nbsp;&nbsp;&nbsp;码:</label><input id="password" type="text" name="pwd"></fieldset>
    </body>
    </html>

    显示效果:

     

  • 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369791.shtml

    如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

    相关文章

    前端:css

    一,css介绍 CSS&#xff08;Cascading Style Sheet&#xff0c;层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表&#xff0c;它就会按照这个样式表来对文档进行格式化&#xff08;渲染&#xff09;。 二,CSS语法 1,每个CSS样式由两个组成部分&#xff1a;选择器…

    爬虫框架:scrapy

    阅读目录 一 背景知识二 同步、异步、回调机制三 高性能一 背景知识 爬虫的本质就是一个socket客户端与服务端的通信过程&#xff0c;如果我们有多个url待爬取&#xff0c;采用串行的方式执行&#xff0c;只能等待爬取一个结束后才能继续下一个&#xff0c;效率会非常低。 需要…

    为Openshift + MongoDb应用程序编写验收测试

    验收测试用于确定是否满足规范要求。 它应该在与生产环境尽可能相似的环境中运行。 因此&#xff0c;如果您的应用程序已部署到Openshift中&#xff0c;则您将需要一个与生产环境中使用的帐户平行的帐户&#xff0c;以运行测试。 在这篇文章中&#xff0c;我们将为部署到Opensh…

    CSS 自适应布局

    前言 本篇文章将介页面布局中的自适应布局&#xff0c;常见的自适应布局有以下2种&#xff1a;左列固定右列自适应、左右两列固定中间自适应。 1. 左列固定右列自适应布局方案 说明&#xff1a;左列固定右列自适应&#xff0c;也可以为右列固定左列自适应&#xff0c;常见于中…

    mysql的表导出er关系图_使用Navicat生成ER关系图并导出的方法

    平时管理数据库一般都是用cmd命令提示符&#xff0c;或是IDEA Intellij自带的Data source&#xff0c;使用Navicat比较少。这段时间&#xff0c;由于要对前后端交互的数据结构进行设计&#xff0c;直接写文档联系多表时有些困难&#xff0c;想着如果有关系图就直观很多。想到Na…

    Scude导入MySQL_FM2017_FMF赛季更新和真实修正数据库[更新至9.9,超过89000个更新]

    FM2017_FMF赛季更新和真实修正数据库[更新至9.9&#xff0c;超过89000个更新]FM2017_FMF赛季更新和真实修正数据库[更新至9.9&#xff0c;超过89000个更新](2)这是国外玩家制作的一款FM2017_FMF冬季更新和真实修正数据库&#xff0c;更新至9月9日&#xff0c;超过89000个更新内…

    音视频和表单的详情

    网页中的音视频 <audio> 和 <vedio> 标签属性&#xff1a;autoplay 自动播放 controls 控制播放 loop 循环播放 表单 HTML 表单用于收集用户输入。 标签<form> 标签属性 action 数据的路径 enctype 传输文件 enctype"multipart/form-data" method …

    mysql otter 数据同步_MySQL数据同步之otter

    一、otter介绍基于日志数据&#xff0c;用于MySQL或者ORACLE之间准实时同步数据。用途&#xff1a;mysql/oracle互相同步中间表/行记录同步二、原理及架构图otter整体模块manager (提供web页面进行同步管理)arbitrate (分布式调度&#xff0c;可跨IDC机房)node (同步过程setl)c…

    ubuntu中获取文件名称并生成txt文件

    简介&#xff1a; 在机器视觉学习过程中&#xff0c;通常会经常批量处理一些图片&#xff0c;在&#xff35;&#xff42;&#xff55;&#xff4e;&#xff54;&#xff55;下可以使用find命令&#xff0c;来实现将文件名全部读取出来&#xff0c;生成列表txt文件&#xff0c;…

    HTMLCSS

    HTML xml &#xff08;标签名&#xff09;可扩展标记语言 <Stu> </Stu> Html 超文本标记语言&#xff08;文本&#xff0c;图片&#xff0c;链接&#xff09; <> </> Internet网上编写页面&#xff08;H5版本&#xff1a;支持多种标签特性&…

    java中i+=2什么意思_三分钟看懂Java中i++与++i的性能差别以及循环中如何使用

    在Java中&#xff0c;自增是一种非常常见的操作&#xff0c;在自增中&#xff0c;有两种写法&#xff0c;一种是前缀自增(i)&#xff0c;一种是后缀自增(i)。这里主要简单介绍两种自增的差别。一、含义差别前缀自增和后缀自增是不同的。前缀自增(i)是从内存中加载i&#xff0c;…

    动态规划:从新手到专家

    作者&#xff1a;Hawstein出处&#xff1a;http://hawstein.com/posts/dp-novice-to-advanced.html前言 本文翻译自TopCoder上的一篇文章&#xff1a; Dynamic Programming: From novice to advanced &#xff0c;并非严格逐字逐句翻译&#xff0c;其中加入了自己的一些理解。水…

    小程序 foreach_【第2106期】小程序依赖分析实践

    前言这种可视化分析图还是很直观的&#xff0c;很有趣。今日早读文章由自然醒授权分享。正文从这开始~~用过 webpack 的同学肯定知道 webpack-bundle-analyzer &#xff0c;可以用来分析当前项目 js 文件的依赖关系。webpack-bundle-analyzer因为最近一直在做小程序业务&#x…

    python----模块

    collections---------------------------------------->扩展数据类型 re-------------------------------------------------->正则相关操作&#xff0c;正则 匹配字符串 time----------------------------------------------->时间相关 三种格式&#xff1a;时间戳&…

    css渲染(二) 文本

    一、文本样式 首行缩进  text-indent 首行缩进是将段落的第一行缩进&#xff0c;这是常用的文本格式化效果。一般地&#xff0c;中文写作时开头空两格。[注意]该属性可以为负值&#xff1b;应用于: 块级元素(包括block和inline-block)  <div><p style"text-in…

    28岁学python转行_28岁转行程序员,学Java还是Python?码农:想快点月薪过万就选它...

    为什么要学Java&#xff1f;Python给人的印象简单是因为我们在用Python的时候&#xff0c;可以直接调用别人已经写好的代码接口就可以&#xff0c;相对于傻瓜模式&#xff0c;Java的许多处理都要原生很多&#xff0c;写的代码可能会多一些&#xff0c;但一旦完成封装&#xff0…

    CSS布局(五) 网页布局方式

    网页实质是块与块之间的位置&#xff0c;块挨着块&#xff0c;块嵌套块&#xff0c;块叠着块。 三种关系&#xff1a;相邻&#xff0c;嵌套&#xff0c;重叠。 下面介绍网页布局的常用几种方式 1.一列布局&#xff1a; 一般都是固定的宽高&#xff0c;设置margin : 0 auto来水…

    变量声明declare,简单运算符运算,变量测试与内容替换

    declare -/ 选项 变量名 - 设类型 取消类型 -i 设为整型 -x 设为环境变量 -p 显示类型属性&#xff08;property&#xff09; [rootlocalhost ~]# a1 [rootlocalhost ~]# declare -p a declare -- a"1" [rootlocalhost ~]# export a [rootlocalhost ~]# declare -p …

    如何水平居中一个元素

    在项目中经常会遇到居中问题&#xff0c;这里借鉴度娘的众多答案&#xff0c;做一个总结&#xff1a; 一、元素的水平居中 1、行级元素的水平居中 <div style"width: 200px;height: 100px;border: 1px solid cyan; text-align: center;"><span>行级元素…

    Yammer Metrics,一种监视应用程序的新方法

    当您运行诸如Web应用程序之类的长期应用程序时&#xff0c;最好了解一些关于它们的统计信息&#xff0c;例如&#xff0c;服务的请求数&#xff0c;请求持续时间或活动请求数。 但是还有一些更通用的信息&#xff0c;例如内部集合的状态&#xff0c;代码的某些部分被执行了多少…