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> 关键字 ...

随机推荐

jQuery实现用户头像裁剪插件cropbox.js
几乎每一个网页是必备图片上传,图片裁剪功能,这里通过cropbox.js插件实现该功能. <script src="js/jquery-1.11.1.min.js">& ...
nginx 伪静态rewrite
location正则写法一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所 ...
shell下在while循环中使用ssh命令的问题
1 现象描述最近使用ssh批量执行命令(已经做了密钥互信了),脚本读取配置文件中的主机列表(内容为每行一台主机IP地址),然后执行,可是每次只是执行第一台,就退出循环了. 2 排查思路由于脚本比较 ...
【EverydaySport】健身笔记——人体肌肉分解图
正面背面大肌肉群:胸.背.腿大肌肉群. 建议一周锻炼一次. 小肌肉群:肩.二头肌.三头肌.小臂.小腿.腹肌小肌肉群. 可以一周安排两次. 小腿.小臂肌群属于耐受肌群可以一周安排3次. 建议初学者就 ...
关于解决coursera视频缓冲问题
关于解决coursera视频缓冲问题之前使用coursera,不FQ的话,视频根本加载不出来,于是每次都FQ过去看的视频.后来发现可以直接修改hosts就可以了. 以下方法来源知乎的回答(侵删). ...
centos 快捷键
centos 快捷键大全时间:2013-02-23 14:54来源:blog.csdn.net 举报点击:225次新手通常会不太习惯GNOME或KDE的界面操作,不过还好,LINUX的快捷键大多 ...
php常见术语
什么是PHP? php是Hypertext Preprocessor的缩写,php是一种内嵌 HTML的脚本语言.PHP的独特语法混合了c,java和perl及PHP式的新语法.这门语言的的目标是让网 ...
java中的数组与集合相互转换
1.数组转换成集合数组转换为集合,用Arrays.asList方法. public static void main(String[] args) { String[] arr = {"a ...
Google的C++开源代码项
转:http://blog.csdn.net/wenrenhua08/article/details/40040903 v8 - V8 JavaScript EngineV8 是 Google 的 ...
elasticsearch更新license
Elasticsearch更新license: 初次安装Marvel,有30天的使用时间,当到期后,只保存7天的数据,所以需要注册申请一个license: 注册申请地址: https://regist ...

html基础知识介绍