1 前端概要

前端三大利器

1.html 赤裸裸的人

2.css 穿上华丽的衣服

3.js 让人生动起来

2 HTML本质及在web程序中的作用

2.1 介绍

HTML

1.一套规则，浏览器认识的规则

2.开发者：学习HTML规则，写HTML文件（充当模板作用），从数据库获取数据，替换到html指定位置（web框架）

3.本地测试：a.找到文件路径，直接浏览器打开b.pycharm打开测试

2.2 Web应用本质

众所周知，对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。

Web.py

import socket

def handle_request(client):

    buf = client.recv(1024)

    client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding='utf-8'))

    f = open('index.html', 'r', encoding='utf-8')

    data = f.read()

    f.close()

    client.send(data)

def main():

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

    sock.bind(('localhost', 8000))

    sock.listen(5)

    while True:

        connection, address = sock.accept()

        handle_request(connection)

        connection.close()

if __name__ == '__main__':

    main()

index.html

<h1 style='background-color:red;'>HTML入门<h1>

<table border='1'>

    <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

</table>

2.3 Html标准格式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

</html>

3 HTML标签

3.1 head标签

head标，签相当于大脑的标签，外面看不到(除了title标签)

title标签：标题

3.1.1 meta标签

1.页面编码（告诉浏览器是什么编码）

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

2.刷新和跳转

<meta http-equiv="Refresh" Content="30" >

<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="IE=edge" />

3.1.2 title标签

在浏览器器中显示的标题

3.1.3 link标签

链接标签

1.css

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

2.icon

<link rel=”shortcut icon” href=”image/favicon.ico”>

3.2 body标签

3.2.1 各种符号

不需要记忆，只需知道

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

3.2.2 p与br标签

p标签：段落默认段落之间是有间隙的

br标签：换行

<p>北京欢迎您<br />天安门、故宫历史古迹</p>

<p>美丽的人文风景</p>

3.2.3 h标签

h标，主要用作标题，自带样式；从h1到h6依次减小

<h1>北京欢迎您</h1>

<h2>北京欢迎您</h2>

<h3>北京欢迎您</h3>

<h4>北京欢迎您</h4>

<h5>北京欢迎您</h5>

<h6>北京欢迎您</h6>

效果

3.2.4 div标签

块级标签

用的非常广泛；主要作用网页的布局

3.2.5 input系列标签

input系列标签，是做表单必不可少的，主要形式是：<input type="text" name="user" />，主要有以下：

text 文本框

password 密码框

button 普通按钮

submit 提交按钮

radio 单选框

checkbox 多选框

file 附件

reset 重置按钮

form表单，默认是GET提交，是通过url的方式提交

<form action="http://localhost:8888/login">

    <input type="text" name="user" />

    <input type="password" name="pwd" />

    <input type="button" value="登录" />

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

</form>

单选框

<div>

    <p>性别：</p>

    男：<input type="radio" name="gender" value="1" />

    女：<input type="radio" name="gender" value="2" />

</div>

复选框

<div>

    <p>爱好：</p>

    足球：<input type="checkbox" name="favor" value="1" checked="checked" />

    篮球：<input type="checkbox" name="favor" value="1" />

    排球：<input type="checkbox" name="favor" value="1" />

</div>

普通按钮，提交，重置

<input type="button" value="普通按钮" />

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

<input type="reset" value="重置" />

3.2.6 textarea

textarea，可以输入多行文本

<textarea name="explain">多行文本输入位置</textarea>

3.2.7 基本下拉框

select标签，是下拉框标签，内部有option value。

基本形式

<select name="course">

    <option value="1">语文</option>

    <option value="2">数学</option>

    <option value="3">政治</option>

    <option value="4">物理</option>

</select>

多选下拉框形式

<select name="course" size="5" multiple="multiple">

    <option value="1">语文</option>

    <option value="2" selected="selected">数学</option>

    <option value="3">政治</option>

    <option value="4">物理</option>

</select>

3.2.8 a标签

a标签，也就是超链接标签；主要有两个作用：跳转、锚

a标签作为锚点

<div>

    <a href="#id1">标题1</a>

    <a href="#id2">标题2</a>

    <a href="#id3">标题3</a>

    <a href="#id4">标题4</a>

    <div id="id1" style="height:600px;background-color:yellow">第一部分</div>

    <div id="id2" style="height:600px;background-color:red">第二部分</div>

    <div id="id3" style="height:600px;background-color:green">第三部分</div>

    <div id="id4" style="height:600px;background-color:red">第四部分</div>

</div>

3.2.9 img标签

图片标签，属性：

src 图片链接
title 鼠标悬停显示内容
alt 图片找不到显示内容
syle 设置图片样式

<a href="http://www.baidu.com">

    <img src="data:images.jpg" style="height:100px;width:100px;" alt="风景图片" />

</a>

3.2.10 列表

列表主要有：

ul li

ol li

dl dt dd

无序列表

<ul>

    <li>无序列表</li>

    <li>无序列表</li>

    <li>无序列表</li>

</ul>

有序列表

<ol>

    <li>有序列表</li>

    <li>有序列表</li>

    <li>有序列表</li>

</ol>

分层列表

<dl>

    <dt>first</dt>

    <dd>dd</dd>

    <dd>dd</dd>

    <dd>dd</dd>

    <dt>second</dt>

    <dd>ss</dd>

    <dd>ss</dd>

    <dd>ss</dd>

</dl>

3.2.11 表格

规范的table，包括thead、tbody、tr、th、td

<table>

    <thead>

        <tr>

            <th>表头1</th>

            <th>表头2</th>

            <th>表头3</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>111</td>

            <td>111</td>

            <td>111</td>

        </tr>

        <tr>

            <td>222</td>

            <td>222</td>

            <td>222</td>

        </tr>

    </tbody>

</table>

合并单元格

        <tr>

            <td colspan="2">占两列</td>

            <td>111</td>

        </tr>

        <tr>

            <td rowspan="2">占两行</td>

            <td>222</td>

            <td>222</td>

        </tr>

        <tr>

            <td>333</td>

            <td>333</td>

        </tr>

3.2.12 label标签

label，用户点击文件，使得关联的标签获取光标；通过for，与input创建关联关系

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

<input type="text" id="username" name="username" />

3.2.13 fieldset

<fieldset>

    <legend>登录</legend>

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

    <input id="username" type="text" name="username" />

    <br />

    <label for="pwd">密码：</label>

    <input id="pwd" type="text" name="user" />

</fieldset>

html基础知识介绍的更多相关文章

Nginx基础知识介绍
Nginx基础知识介绍作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Nginx概述 Nginx是免费的.开源的.高性能的HTTP和正向/反向代理服务器.邮件代理服务器.以及T ...
TCP_Wrappers基础知识介绍
1． TCP_Wrappers基础知识介绍 TCP_Wrappers是在 Solaris, HP_UX以及 Linux中广泛流行的免费软件.它被设计为一个介于外来服务请求和系统服务回应的中间处理软件. ...
Swift Playgrounds for mac基础知识介绍
Swift Playgrounds是一款适用于iPad和Mac的革命性应用程序,它使Swift学习变得互动而有趣.它不需要编码知识,因此非常适合刚开始的学生.使用Swift解决难题,以掌握基本知识.S ...
WPF Step By Step -基础知识介绍
回顾上一篇我们介绍了WPF基本的知识.并且介绍了WPF与winform传统的cs桌面应用编程模式上的变化,这篇,我们将会对WPF的一些基础的知识做一个简单的介绍,关于这些基础知识更深入的应用则在后续 ...
python基础----基础知识介绍
一编程语言的划分编译型:将代码一次性全部编译成二进制,然后运行. 缺点:开发效率低,不能跨平台(windows与linux) 优点:执行效率高代表语言:c语言解释型:当程序开始运 ...
android开发学习---linux下开发环境的搭建&& android基础知识介绍
一.配置所需开发环境 1.基本环境配置 JDK 5或以上版本(仅有JRE不够) (http://www.oracle.com/technetwork/java/javase/downloads/ind ...
Linux基础知识介绍
1.Linux知识说明1)文件位置 1)/etc/inittab2)模式介绍 0:挂起模式-不推荐 1:单用户模式-只有管理员可以进入该模式,可以修改root密码,处理有登录权限而没有修改文件的权限问 ...
ABP VNext框架基础知识介绍（1）--框架基础类继承关系
在我较早的时候,就开始研究和介绍ABP框架,ABP框架相对一些其他的框架,它整合了很多.net core的新技术和相关应用场景,虽然最早开始ABP框架是基于.net framework,后来也全部转向 ...
ABP VNext框架基础知识介绍（2）--微服务的网关
ABP VNext框架如果不考虑在微服务上的应用,也就是开发单体应用解决方案,虽然也是模块化开发,但其集成使用的难度会降低一个层级,不过ABP VNext和ABP框架一样,基础内容都会设计很多内容,如 ...
OC - 2.OC基础知识介绍
一.基础语法 1> OC语言和C语言 C语言是面向过程的语言,OC语言是面向对象的语言 OC语言继承了C语言,并增加了面向对象的思想以下内容只介绍OC语言与C语言的不同之处 2> 关键字 ...

随机推荐

javascript中的addEventListener与attchEvent
1.addEventListener 该方法用于向指定元素添加事件句柄浏览器的支持情况为chrome1.0.ie9+.fireFox1.0.opera7.0 该方法包含三个参数event, func ...
Coursera助学金申请模板
讲真,我觉得coursera的课还挺贵的.但是它有助学金系统,非常对我们穷学生友好了,而且基本上申请的都会批.不过现在助学金需要15个工作日才有答复,所以注意要提前申请. 有两大段要填. 虽然写的挺烂 ...
调试应用程序（Debugging Applications）
调试应用程序(Debugging Applications)¶ Phalcon中提供了提供了几种调试级别即通知,错误和异常. 异常类 Exception class 提供了错误发生时的一些常用的调试信 ...
python基础===进程，线程，协程的区别（转）
本文转自:http://blog.csdn.net/hairetz/article/details/16119911 进程拥有自己独立的堆和栈,既不共享堆,亦不共享栈,进程由操作系统调度. 线程拥有自 ...
在Perl中采用open进行管道操作
在Perl中采用open进行管道操作 http://blog.sina.com.cn/s/blog_4840fe2a0100b8na.html perl exec管道和子进程 http://blog. ...
2017多校第8场 HDU 6138 Fleet of the Eternal Throne AC自动机或者KMP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6138 题意:给n个串,每次询问x号串和y号串的最长公共子串的长度,这个子串必须是n个串中某个串的前缀 ...
一个真正的客户端非阻塞的 connect
前言 - 一个简短开场白 winds 的 select 和 linux 的 select 是两个完全不同的东西. 然而凡人喜欢把它们揉在一起. 非阻塞的connect业务是个自带超时机制的 conn ...
Canvas开发库封装
一.Canvas第三方类库 1.常见的第三方类库 konva.js <style> body{ margin:0; } </style> </head> <b ...
JS页面之间传值
父页面与子页面之间有多种传值的方式: 第一种,通过window.open的方法打开一个新的页面,在新的页面里面通过window.opener来获取对象,以下为实例父页面: function open ...
leetcode 141 142. Linked List Cycle
题目描述: 不用辅助空间判断,链表中是否有环 /** * Definition for singly-linked list. * struct ListNode { * int val; * Lis ...

html基础知识介绍