前端开发之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可以自定义吗?大家 ...

随机推荐

MINST手写数字识别（二）—— 卷积神经网络（CNN）
今天我们的主角是keras,其简洁性和易用性简直出乎David 9我的预期.大家都知道keras是在TensorFlow上又包装了一层,向简洁易用的深度学习又迈出了坚实的一步. 所以,今天就来带大家写 ...
制作新的train，test数据集
之前的数据集的train和test是直接按照网上下载的数据的前7000个作为训练集,后2212个作为测试集.看得出来,这个数据集是由开车录制视频转换来的图片数据,后面2000多个图片的场景和前面的场景 ...
end和sep的使用方法
end: 默认是换行'\n',表示以什么结尾,比如以, | \n 等方法: 默认end = '\n' a b c 如果end = ' ' a b c sep: 默认是空格' ' 表示两个字符之间用什 ...
java在线聊天项目0.9版实现把服务端接收到的信息返回给每一个客户端窗口中显示功能之客户端接收
客户端要不断接收服务端发来的信息与服务端不断接收客户端发来信息相同,使用线程的方法,在线程中循环接收客户端修改后代码如下: package com.swift; import java.awt.B ...
经典的7种排序算法原理C++实现
排序是编程过程中经常遇到的操作,它在很大程度上影响了程序的执行效率. 7种常见的排序算法大致可以分为两类:第一类是低级排序算法,有选择排序.冒泡排序.插入排序:第二类是高级排序算法,有堆排序.排序树. ...
ssh 免密码登录与密钥公钥原理讲解
前言由于最近频繁需要登录几个服务器,每次登录都需要输入密码,故相对麻烦. 由于个人服务器用于实验,故对安全性要求不是很高,故想实现ssh免密登录. 通过阅读ssh 公钥私钥认证操作及原理以及ssh公 ...
Springboot（二）-application.yml默认的配置项以及读取自定义配置
写在前面 ===== spring-boot 版本:2.0.0.RELEASE ===== 读取自定义配置 1.配置文件:sys.properties supply.place=云南 supply.c ...
json数据格式与 for in
格式一: var json1={ name:'json', age:'23' }; json1.name='金毛'; 格式二: (比较安全) 属性名字里有空格或者有连字符‘-’或者有保留字例如‘fo ...
双线性差值（由于分析sift源码）
双线性插值双线性插值,顾名思义就是两个方向的线性插值加起来.所以只要了解什么是线性插值,分别在x轴和y轴都做一遍,就是双线性插值了. 线性插值的概念也非常简单粗暴,就是两个点A,B,要在AB中间插入 ...
bs4--官文--遍历文档树
遍历文档树还拿”爱丽丝梦游仙境”的文档来做例子: html_doc = """ <html><head><title>The Dor ...

前端开发之html篇

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

随机推荐

热门专题