前端开发之html篇

一、什么是html?

　　1.我们说socket网络编程的时候，提到过一个cs模型，就是客户端—服务端模型，前端开发也是基于网络编程，但是这时就应该是bs模型了，是浏览器与服务端的通信。

　　我们可以模拟一个bs模型：

#服务端

import socket

sock=socket.socket()

sock.bind(('127.0.0.1',8989))

#绑定ip和端口

sock.listen(5)

while True:

    conn,addr=sock.accept()

    print('conn',conn)

    print('addr',addr)

    data=conn.recv(1024)

    print(data.decode('utf8'))

我们会在服务端收到这样一些东西

conn <socket.socket fd=444, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=0, laddr=('127.0.0.1', 8989), raddr=('127.0.0.1', 61502)>

addr ('127.0.0.1', 61502)

GET / HTTP/1.1

Accept: text/html, application/xhtml+xml, image/jxr, */*

Accept-Language: zh-CN

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063

Accept-Encoding: gzip, deflate

Host: 127.0.0.1:8989

Connection: Keep-Alive

这些就是http的请求头，浏览器会把这些请求以键值对的方式发送给服务端

　　2.html全称叫超文本标记语言（Hypertext Markup Language），是一种标记语言，通过标签来识别和描述网页中的结构和内容

二、html结构

　　1.html的结构如下：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

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

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Title</title>

    </head>

    <body>

    </body>

</html>

<!DOCTYPE html>是用来告诉浏览器使用什么样的html来解析html文档，不指定的话默认按照怪异模式（BackCompat），还有一个作用是指定了这个html文档的版本是html5

<html lang="en"> 是表明当前标签下使用的语言是英文

<html></html> 是文档的开始和结束标记，作用是告诉浏览器这是一个html文档

<head></head> 是网页的源信息，是给计算机看得内容　

　　<meta>标签可以提供页面的元信息，有name和http-equiv两个属性

　　　　name属性：用于描述网页，属性值为content，content中的内容包括用于搜索的关键字和描述信息

　　　　http-equiv属性：可以向浏览器传回一些信息，来帮助正确的显示网页内容

　　<title></title>是既能给计算机看，又能给人看的内容，就是网页的标题，在浏览器标题栏显示

　　<link rel="icon" href="url">是浏览器标题栏中显示的网页的图标

<body></body> 就是可见的网页主体的内容

三、html常用标签

　　1.html标签格式：

　　　　（1）标签由尖括号包围着关键词组成

　　　　（2）标签通常是成对出现的，叫闭合标签，如<div></div>,不成对出现的叫自闭和标签，如<img>

　　　　（3）标签可以带属性，也可以不带属性

　　　　（4）标签可以嵌套，但是要结构分明，不能交叉嵌套

　　　　（5）块级标签可以嵌套块级标签和内联标签，但是内联标签只能嵌套内联标签

　　　　（6）标签不区分大小写，推荐使用小写

　　　　（7）在代码中的空格，不论写几个，都会默认是一个，可以用特殊字符表示多个空格（&nbsp）

　　2.块级标签和内联标签

　　　　块级标签就是这个标签里的内容独占一行，后面的内容只能另起一行显示，典型的如div标签

　　　　而内联标签是指按文本内容占位置，典型的如span标签

　　3.基本标签

　　　　<b>zhang</b>加粗标签

　　　　<br>换行

　　　　<em>zhang</em>斜体

　　　　<h2>zhang</h2>hn，从1到6,字体依次变小，用来表示标题

　　　　<hr>插入一条水平线

　　　　2<sub>3</sub>上角标

　　　　3<sup>2</sup>下角标

　　　　<strike>zhang</strike>删除线

　　　　<strong>zhang</strong>加粗，作用同b标签

　　　　&nbsp 表示空格

　　　　<div></div>本身无特殊格式，只是定义了一个块级元素

　　　　<span></span>同span，本身无特殊格式，定义一个行内元素
　　4.img标签：图片标签内联标签

        <img src="url" alt="图片" title="图片" width="300px" height="600px">

　　　　src：图片路径

　　　　alt:图片加载失败时的提示信息

　　　　title:鼠标悬浮在图片上的信息

　　　　width:图片宽度

　　　　height:图片高度

　　5.超链接标签 a　　内联标签

　　　　href:要链接到的地址，如果是#,表示为空地址

　　　　target="_blank":表示重新打开一个新的网页，当前网页不变

　　　a标签还可以用来实现锚的功能

　　　　比如在body开头位置加一个div标签，id设为“start”，这样在后面不管什么地方加上<a href="#start">返回顶部</a>，在网页中点击这个“返回顶部”，就可以实现返回网页顶部的功能了。

　　6.　列表标签　　块级标签

　　　　当我们的html有很多并列的元素时，可以把这些并列的元素都放在列表中

　　　　列表标签包括三种：ul无序列表，ol有序列表和dl自定义列表，常用的是无序列表

　　　　<ul> 与 <li> 连用，<li> 下面是列表的每一项

　　　　<dl> 自定义列表

　　　　　　　<dt> 列表标题

　　　　　　　<dd> 列表项

　　7.表格标签 table　　块级标签

　　　　主要用来显示表格类数据，其中tr表示行，td或者th表示列，th是标题样式

　　　　基本结构为

　　　　<table>

　　　　　　<tr>

　　　　　　<tr>

　　　　属性有：

<table border="1px" cellpadding="2px" cellspacing="2px" width="300px">

            border:表格边框

            cellspacing: 外边距

            cellpadding: 内边距

            width: 表格宽度，像素或者百分比

            <tr>

                <td rowspan="3">111</td>

                    rowspan: 单元格竖跨几个格

                <td colspan="2">222</td>

                    colspan: 单元格横跨几个格

            </tr>

        </table>

练习：写一个课程表

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

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

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>class schedule</title>

 </head>

     <body>

         <table border="1">

             <strong>

                 <caption>课程表</caption>

             </strong>

             <tr>

                 <th>项目</th>

                 <th colspan="5">上课</th>

                 <th colspan="2">休息</th>

             </tr>

             <tr>

                 <th>星期</th>

                 <th>星期一</th>

                 <th>星期二</th>

                 <th>星期三</th>

                 <th>星期四</th>

                 <th>星期五</th>

                 <th>星期六</th>

                 <th>星期日</th>

             </tr>

             <tr>

                 <td rowspan="4">上午</td>

                 <td>语文</td>

                 <td>数学</td>

                 <td>英语</td>

                 <td>英语</td>

                 <td>物理</td>

                 <td>计算机</td>

                 <td rowspan="4">休息</td>

             </tr>

             <tr>

                 <td>数学</td>

                 <td>数学</td>

                 <td>地理</td>

                 <td>历史</td>

                 <td>化学</td>

                 <td>计算机</td>

             </tr>

             <tr>

                 <td>化学</td>

                 <td>语文</td>

                 <td>体育</td>

                 <td>计算机</td>

                 <td>英语</td>

                 <td>计算机</td>

             </tr>

             <tr>

                 <td>政治</td>

                 <td>英语</td>

                 <td>体育</td>

                 <td>历史</td>

                 <td>地理</td>

                 <td>计算机</td>

             </tr>

             <tr>

                 <td rowspan="2">下午</td>

                 <td>语文</td>

                 <td>数学</td>

                 <td>英语</td>

                 <td>英语</td>

                 <td>物理</td>

                 <td>计算机</td>

                 <td rowspan="2">休息</td>

             </tr>

             <tr>

                 <td>数学</td>

                 <td>数学</td>

                 <td>地理</td>

                 <td>历史</td>

                 <td>化学</td>

                 <td>计算机</td>

             </tr>

         </table>

     </body>

 </html>

课程表

　　8.表单标签 form　　　　

　　　我们在网页上见到的注册或者登陆时的那些可以输入东西的框框，就用到了表单标签。

　　　表单标签就是用来收集用户输入的信息，在表单标签中，最重要的就是input系列

　　（1）input系列

<form action="">

        用户名：<input type="text" name="user" value="zhang"><br>

            <!--text表示框内输入的是文本形式，正常显示-->

        密码： <input type="password" name="pwd" value="123">

            <!--password表示框内输入的是密码，会隐藏，显示*****-->

        <input type="radio">记住密码<br>

            <!--radio表示单选框-->

        性别：<input type="radio" name="sex" value="1" checked>男

                <!--checked表示默认-->

             <input type="radio" name="sex" value="0" >女

        <br>

        爱好：

            篮球<input type="checkbox" name="hobby" checked>

                <!--check表示是默认值-->

            足球<input type="checkbox" name="hobby">

            羽毛球<input type="checkbox" name="hobby">

        <!--checkbox 表示复选框-->

        <br>

        <input type="submit" value="提交">

        <!--提交按钮-->

        <br>

        <input type="reset">

        <!--重置按钮-->

        <br>

        <input type="file">

        <!--选择文件按钮-->

        表单标签最重要的功能是实现前端和服务器端的通信，

        我们在input框里输入的东西，怎么传给服务器端呢，

        就是通过我们在input里面指定的name和value

        我们输入的信息会以键值对的形式发送给服务器端，

        name就是key ，value就是对应的值，

        但是submit那个value不一样，那是显示的名字

    </form>

上面的代码在浏览器中大概就是这样子的:

先忽略“丑”这个问题，我们将会在css中解决这个问题

　　input里面还有一个属性，placeholder，这个是提示用的，看效果：

<input type="text" placeholder="用户名">

　　input还有一个disable属性，设置这个属性后输入框将不能使用　　

　　（2）select标签，这个是实现下拉菜单的，比如选择一个省份，点一个三角就把所有省份罗列出来　　　　

籍贯：<select name="jiguan" id="">

                <option value="hebei">河北省</option>

                <option value="henan">河南省</option>

                <option value="shandong">山东省</option>

                <option value="jiangxi">江西省</option>

                <option value="beijing">北京市</option>

            </select>

就是这个效果，那能不能有默认值呢，能不能多选呢，可以的

multiple属性就表示多选，size表示选几个，selected表示默认值

籍贯：<select name="jiguan" id="" multiple="multiple" size="2">

                <option value="hebei">河北省</option>

                <option value="henan">河南省</option>

                <option value="shandong" selected>山东省</option>

                <option value="jiangxi">江西省</option>

                <option value="beijing">北京市</option>

            </select>

（3）多行文本框标签 textarea

　　可以指定行数和列数

（4）label标签

　　这个标签的效果就是需要在输入框输入东西的时候，鼠标不一定要点在框内，在前面的“用户名”位置也可以快速把光标定位到输入框内

　　这时需要用到id属性，每个标签都可以指定一个id属性，那这个标签在整个文档中就是独一无二的了　　

<label for="user">用户名：</label>

        <input type="text" id="user">

学习前端需要学习三部分，html,css和js,html最基础,也最简单吧，话总不能说一半啊

前端开发之html篇的更多相关文章

前端开发之JavaScript篇
一.JavaScript介绍前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作二.c ...
前端开发之HTML篇一
主要内容: 一.HTML简介二.HTML标签三.HTML文档结构和注释四.head标签及相关内容五.body标签及相关内容 1️⃣ HTM ...
前端开发之jQuery篇--选择器
主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...
前端开发之CSS篇四
一.相对定位二.绝对定位三.固定定位四.z-index 前言定位有三种:1.相对定位 2.绝对定位 3.固定定位这三种定位,每种都暗藏玄机,所以要每个单独剖析. 1️⃣ 相对定位 1.三 ...
前端开发之CSS篇三
主要内容: 一.CSS布局之浮动二.清除浮动带来的问题三.margin塌陷问题和水平居中四.善用父级的的padding取代子级的margin 五.文本属性和字体 ...
前端开发之CSS篇二
主要内容: 一.CSS的继承性和层叠性二.盒模型三.padding属性四.border属性五.margin属性六.标准文档流七.行内元素和块状元素转换 1️⃣ CSS的继承性和层叠性 1 ...
前端开发之HTML篇二
主要内容: 一.表格标签 -- table 二.表单标签 -- form 三.常用标签属性和分类四.标签嵌套规则 1️⃣ 表格标签 -- table 表格由<table> 标签来定义. ...
高效开发之SASS篇灵异留白事件——图片下方无故留白你会用::before、::after吗 link 与 @import之对比学习前端前必知的——HTTP协议详解深入了解——CSS3新增属性菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

随机推荐

Cayley凯莱定理——一一对应
定理过$n$个有标志顶点的树的数目等于$n^{n-2}$. 此定理说明用$n-1$条边将$n$个已知的顶点连接起来的连通图的个数是$n^{n-1}$.也可以这样理解,将n个城市连接起来的树状网络有$ ...
并查集+思维——X-Plosives
一.问题描述(题目链接) 有n种化合物,每种化合物由两种元素组成.当几种的化合物数量等于他们所含不同元素的数量时,就会发生爆炸.现在依次给出化合物的组成,当新的化合物与之前的化合物放在一起会发生爆炸时 ...
Bootstrap 原始按钮
Bootstrap 原始按钮 <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q ...
java在线聊天项目实现基本聊天功能后补充的其他功能详细需求分析及所需要掌握的Java知识基础 SWT的激活方法，swt开发包下载，及破解激活码
补充聊天项目功能,做如下需求分析: 梳理项目开发所需的必要Java知识基础 GUI将使用更快速的swt实现 SWT(Standard Widget Toolkit) Standard Widget T ...
MySQL中常见的锁
一.按读写方式分类 1.读锁又称共享锁,读锁是共享的,读锁之间是互不阻塞. 2.写锁又称排他锁,写锁是排他的,写锁会阻塞其他读锁和写锁二.按锁的粒度分类 1.表锁是MySQL中最基本的锁策略,该锁的 ...
CPU 基础术语总结
CPU CPU为 Central Processing Unit 的缩写.是一块超大规模的集成电路,是一台计算机的运算核心(Core)和控制核心( Control Unit).它的功能主要是解释计算机 ...
nginx 无法加载css/js图片等文件 404 not fund
刚配置Nginx反向代理,Nginx可能会出现无法加载css.js或者图片等文件,这里需要在配置文件*.conf里面加上如下配置项. location ~ .*\.(js|css|png|jpg)$ ...
计算机/ARM 系统
这方面知识,自己有了大概了解,可以再没有重要急需学习的安排时,不时的翻翻这方面的书.本能力属于重要但不急需的能力
入门人工智能的首选语言为什么会是Python？
为何人工智能(AI)首选Python?当你读完这篇文章就会明白了.为何人工智能(AI)首选Python?读完这篇文章你就知道了.我们看谷歌的TensorFlow基本上所有的代码都是C++和Python ...
ZZULIoj 1907 小火山的宝藏收益
Description 进去宝藏后, 小火山发现宝藏有N个房间,且这n个房间通过N-1道门联通. 每一个房间都有一个价值为Ai的宝藏, 但是每一个房间也都存在一个机关.如果小火山取走了这 ...

前端开发之html篇

前端开发之html篇的更多相关文章

随机推荐

热门专题