html网页端,[网页设计]前端开发之html篇

一、什么是html?

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

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

#服务端import socketsock=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 addr ('127.0.0.1', 61502)GET / HTTP/1.1Accept: text/html, application/xhtml+Accept-Language: zh-CNUser-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.15063Accept-Encoding: gzip, deflateHost: 127.0.0.1:8989Connection: Keep-Alive

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

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

二、html结构

1.html的结构如下：

Title

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

是 表明当前标签下使用的语言是英文

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

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

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

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

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

是浏览器标题栏中显示的网页的图标

三、html常用标签

1.html标签格式：

(1)标签由尖括号包围着关键词组成

(2)标签通常是成对出现的，叫闭合标签，如

(3)标签可以带属性，也可以不带属性

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

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

(6)标签不区分大小写，推荐使用小写

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

2.块级标签和内联标签

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

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

3.基本标签　　　　zhang加粗标签　　　　
换行　　　　zhang斜体　　　　

zhang

hn，从1到6,字体依次变小，用来表示标题　　　　

---

插入一条水平线　　　　2 ₃上角标　　　　3 ²下角标　　　　 zhang 删除线　　　　 zhang加粗，作用同b标签　　　　&nbsp 表示空格　　　　 同span，本身无特殊格式，定义一个行内元素

　　4.img标签：图片标签   内联标签　　　　 

src：图片路径

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

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

width:图片宽度

height:图片高度

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

点击

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

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

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

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

6.　列表标签 　　块级标签

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

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

• 与
• 连用，
• 下面是列表的每一项

  列表标题

  列表项

  7.表格标签   table　　块级标签

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

  基本结构为

  标题		标题
  内容		内容

  属性有：

  111

  222

  练习：写一个课程表

  

  1 2 3

  4 5 6 7 class schedule 8 9 10 12 课程表13 14 15 16 17 项目18 上课19 休息20 21 22 23 星期24 星期一25 星期二26 星期三27 星期四28 星期五29 星期六30 星期日31 32 33 34 上午35 语文36 数学37 英语38 英语39 物理40 计算机41 休息42 43 44 45 数学46 数学47 地理48 历史49 化学50 计算机51 52 53 54 化学55 语文56 体育57 计算机58 英语59 计算机60 61 62 63 政治64 英语65 体育66 历史67 地理68 计算机69 70 71 72 下午73 语文74 数学75 英语76 英语77 物理78 计算机79 休息80 81 82 83 数学84 数学85 地理86 历史87 化学88 计算机89 90 91 92 93 课程表

  8.表单标签 form

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

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

  (1)input系列

  用户名： 密码： 记住密码 性别：男 女
  爱好： 篮球 足球 羽毛球 表单标签最重要的功能是实现前端和服务器端的通信， 我们在input框里输入的东西，怎么传给服务器端呢， 就是通过我们在input里面指定的name和value 我们输入的信息会以键值对的形式发送给服务器端， name就是key ，value就是对应的值， 但是submit那个value不一样，那是显示的名字

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

  

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

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

  

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

  (2)select标签，这个是实现下拉菜单的，比如选择一个省份，点一个三角就把所有省份罗列出来籍贯：河北省河南省山东省江西省北京市

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

  multiple属性就表示多选，size表示选几个，selected表示默认值籍贯：河北省河南省山东省江西省北京市

  (3)多行文本框标签 textarea

  可以指定行数和列数

  (4)label标签

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

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

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

  转载请保留本文网址：

  http://www.shaoqun.com/a/319766.html