首页 > > 网页制作 > css >

前端开发之html篇

2018-06-24 01:43:55来源：未知阅读 ()

一、什么是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>

练习：写一个课程表

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=chrome">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>class schedule</title>
 8 </head>
 9     <body>
10         <table border="1">
11             <strong>
12                 <caption>课程表</caption>
13             </strong>
14         
15         
16             <tr>
17                 <th>项目</th>
18                 <th colspan="5">上课</th>
19                 <th colspan="2">休息</th>
20             </tr>
21         
22             <tr>
23                 <th>星期</th>
24                 <th>星期一</th>
25                 <th>星期二</th>
26                 <th>星期三</th>
27                 <th>星期四</th>
28                 <th>星期五</th>
29                 <th>星期六</th>
30                 <th>星期日</th>
31             </tr>
32         
33             <tr>
34                 <td rowspan="4">上午</td>
35                 <td>语文</td>
36                 <td>数学</td>
37                 <td>英语</td>
38                 <td>英语</td>
39                 <td>物理</td>
40                 <td>计算机</td>
41                 <td rowspan="4">休息</td>
42             </tr>
43         
44             <tr>
45                 <td>数学</td>
46                 <td>数学</td>
47                 <td>地理</td>
48                 <td>历史</td>
49                 <td>化学</td>
50                 <td>计算机</td>
51             </tr>
52         
53             <tr>
54                 <td>化学</td>
55                 <td>语文</td>
56                 <td>体育</td>
57                 <td>计算机</td>
58                 <td>英语</td>
59                 <td>计算机</td>
60             </tr>
61         
62             <tr>
63                 <td>政治</td>
64                 <td>英语</td>
65                 <td>体育</td>
66                 <td>历史</td>
67                 <td>地理</td>
68                 <td>计算机</td>
69             </tr>
70         
71             <tr>
72                 <td rowspan="2">下午</td>
73                 <td>语文</td>
74                 <td>数学</td>
75                 <td>英语</td>
76                 <td>英语</td>
77                 <td>物理</td>
78                 <td>计算机</td>
79                 <td rowspan="2">休息</td>
80             </tr>
81         
82             <tr>
83                 <td>数学</td>
84                 <td>数学</td>
85                 <td>地理</td>
86                 <td>历史</td>
87                 <td>化学</td>
88                 <td>计算机</td>
89             </tr>
90         
91         </table>
92     </body>
93 </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最基础,也最简单吧，话总不能说一半啊

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：【表格设置】HTML中合并单元格，对列组合应用样式，适应各浏览器

下一篇：HTML+CSS基础

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签