190310HTML&CSS&JS

一、HTML

1、web server

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'))
    client.send(bytes("<h1 style='background-color:red;'>Hello, Seven<h1>", encoding='utf-8'))

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost', 9999))
    sock.listen(5)

    while True:
        conn, addr = sock.accept()
        handle_request(conn)
        conn.close()

if __name__ == '__main__':
    main()

2、web server2

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', 'rb')
    data = f.read()
    f.close()
    client.send(data)

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost', 9999))
    sock.listen(5)

    while True:
        conn, addr = sock.accept()
        handle_request(conn)
        conn.close()

if __name__ == '__main__':
    main()

3、实例index.html

<h1 style='background-color:red;'>Hello, Seven<h1>
<a href='http://www.baidu.com'>baidu</a>
<table border='1'>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
<table>

4、head标签

  • meta 标签：编码、跳转、刷新、关键字、描述、IE兼容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">  <!-- 页面编码 -->
    <meta http-equiv="Refresh" content="60">  <!-- 60s自动刷新一次页面 -->
    <!--<meta http-equiv="Refresh" content="5; url=http://www.baidu.com" />  5s后跳转到目标网站-->
    <meta name="keywords" content="dongfei,dongfei2">
    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8" />
    <title>Title</title>
</head>
<body>
    <h1>welcome dongfei web site.</h1>
</body>
</html>
  • title标签
  • link标签：加图标
<link rel="shortcut icon" href="image/favicon.ico">  <!--给网站加图标-->
  • style
  • script

5、body标签

5.1：各种符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dongfei</title>
</head>
<body>
    <a href="http://www.baidu.com">百&nbsp;&nbsp;&nbsp;&nbsp;&gt;度</a>
    <h3>静夜思</h3>
    <h5>作者：李白</h5>
    <p>床前明月光，<br/>疑似地上霜。<br/>举头望明月，<br/>低头思故乡。</p>
    <span>dongfei</span>
</body>
</html>

5.5：div标签，块级白板

6、表单标签

  • from标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
    <form action="http://localhost:xxx/index" method="get">  <!-- 向后端提交表单 -->
        <input type="text" name="username"/>
        <input type="text" name="email"/>
        <input type="password" name="password"/>
        <input type="button" value="login"/>  <!--button默认没有任何功能-->
        <input type="submit" value="login2"/>
    </form>
</body>
</html>
  • 提交至搜索引擎
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sougou</title>
</head>
<body>
    <form action="https://www.sogou.com/web" method="get">
        <input type="text" name="query" value="sogou"/>  <!--value:默认值-->
        <input type="submit" value="搜索">
    </form>
</body>
</html>
  • 单选框&复选
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>请选择性别：</p>
                男：<input type="radio" name="gender" value="1" checked="checked" />
                女：<input type="radio" name="gender" value="2" />
            <p>爱好：</p>
            篮球：<input type="checkbox" name="favor" value="1" />
            足球：<input type="checkbox" name="favor" value="2" />
            乒乓球：<input type="checkbox" name="favor" value="3" />
        </div>
        <input type="submit" value="提交" />
    </form>
</body>
</html>
  • 上传文件&重置表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <p>上传文件：</p>
            <input type="file" name="fname">
        </div>
        <input type="submit" value="upload">
        <input type="reset" value="reset">
    </form>
</body>
</html>
  • 多行文本输入
<textarea name="menu" >默认值</textarea>
  • 下拉框：select标签
        <select name="city" multiple="multiple" size="3">
            <option value="1">北京</option>
            <option value="2" selected="selected">上海</option>
            <option value="3">广州</option>
        </select>
        <input type="submit" value="提交">

7、超链接&锚点

<a href="http://www.baidu.com" target="_blank">百度</a>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <div id="i1" style="height:600px;">第一章的内容</div>
    <div id="i2" style="height:600px;">第二章的内容</div>
    <div id="i3" style="height:600px;">第三章的内容</div>
    <div id="i4" style="height:600px;">第四章的内容</div>
</body>
</html>

8、图片

    <a href="http://www.baidu.com">
        <img src="1.jpg" style="height: 200px;width: 200px;" alt="风景" title="风景">
    </a>

9、列表

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>

    <dl>
        <dt>123</dt>
        <dd>456</dd>
    </dl>

10、表格

    <table border="1">
        <tr>
            <td>第一行，第一列</td>
            <td>第一行，第二列</td>
            <td>第一行，第三列</td>
        </tr>
        <tr>
            <td>第二行，第一列</td>
            <td>第二行，第二列</td>
            <td>第二行，第三列</td>
        </tr>
    </table>
<table border="1">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
            <td>内容4</td>
        </tr>
    </tbody>
</table>
  • 合并单元格
<td colspan="2">内容2</td>
<td rowspan="2">内容2</td>

11、label标签

    <label for="username">用户名：</label>
    <input id="username" type="text" name="user" />

二、CSS

1、css选择器

  • css选择器的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
    <div class="c1">内容</div>
    <div class="c1">内容2</div>
</body>
</html>
  • id选择器：#1
  • class选择器：.c1
  • 标签选择器：div
  • 层级选择器：.c1 .c2
  • 组合选择器：.c1,.c2
  • 属性选择器：.c1[type=‘text‘]

    2、引入css文件

<link rel="stylesheet" href="commons.css">

3、基本样式

  • border: 1px solid red;边框
  • height: 48px;width: 200px;高和宽
  • font-size: 18px;字体大小
  • line-height:垂直居中
  • text-align:ceter:水平居中
  • font-weight:加粗
  • color:字体颜色

    4、float

    块级标签漂起来堆叠

    <div style="width: 20%;background-color: red;float: left">左侧</div>
    <div style="width: 60%;background-color: yellow;float: right">右侧</div>

5、display

  • display: inline;将div转换为span
  • display: block;将span转换为div
  • display: inline-block;
  • display: none; 让标签消失

6、padding margin 内边距和外边距

  • margin-top: 10px;外边距
  • padding-top: 10px;内边距

7、position属性

    <div style="width: 50px;
    height: 50px;
    background-color: black;
    color: white;
    position: fixed;bottom: 20px;right: 20px;">返回顶部</div>
    <div style="height: 5000px;background-color: #dddddd;"></div>
  • 顶部标题栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
        }
        .pg-body{
            background-color: #dddddd;
            height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>
  • relative+absolute 实现相对定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
</body>
</html>
  • 三层
  • z-index: 10;数值最大的在上层
  • opacity: 0.5;透明度50%
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position: fixed;
    background-color: white;
    height: 400px;
    width: 500px;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -200px;
    z-index: 10;
    "></div>
    <div style="position: fixed;background-color: black;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0.5;
    z-index: 9;
    "></div>
    <div style="height: 5000px;background-color: green;">内容</div>
</body>
</html>

8、图片的显示

    <div style="height: 200px;width: 300px;overflow: hidden">  #混动条
        <img src="win.jpg">
    </div>

9、鼠标移动到字体变颜色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 44px;
            background-color: #2459a2;
            line-height: 44px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        /*当鼠标移动到当前标签上时，以下css属性才生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
            <a class="menu">小视频</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">正文</div>
    </div>
</body>
</html>

10、背景图片以及图标

  • 全写
    <div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height: 20px;border: 1px solid red;width: 20px;
    background-position-x: 0;
    background-position-y: 2px; /*y轴移动图片*/
    "></div>
  • 简写
<div style="background: url(icon_18_118.png) 0 -79px no-repeat;height: 20px;border: 1px solid red;width: 20px;"></div>

11、带图标的登录框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 400px;height: 35px;position: relative;">
        <input type="text" style="width: 370px;height: 35px;padding-right: 30px;"/>
        <span style="background: url(icon_18_118.png) 0 -139px no-repeat;width: 20px;height: 20px;display: inline-block;position: absolute;right: 0;top: 10px;"></span>
    </div>
</body>
</html>

三、JavaScript

1、js引用，写在body内部的最下边

<script src="commons-js.js"></script>

2、在html中,type="text/javascript可不写

<script type="text/javascript"></script>

3、变量

  • 数字
age = 18; //声明变量，默认为字符串
i = parseInt(age); //将age转换为整数
k = parseFloat(age); //将age转换为浮点数
  • 字符串
obj.length                           长度

obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                     $数字：匹配的第n个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号

4、定时器

setInterval("alert('dongfei')", 5000);  //定时器，每5s执行一次

5、console打印log

console.log(1);

6、跑马灯示例

    <div id="i1" style="text-align: center;font-size: 24px;">欢迎xxx莅临指导&nbsp;&nbsp;&nbsp;&nbsp;</div>

    <script>
        function func() {
            var tag = document.getElementById('i1');
            var content = tag.innerText;
            var f = content.charAt(0);
            var l = content.substring(1,content.length);
            var new_content = l + f;
            tag.innerText = new_content;
        }
        setInterval("func()", 500);
    </script>

原文地址：https://www.cnblogs.com/L-dongf/p/10562185.html

时间： 2024-10-14 15:21:14

190310HTML&CSS&JS的相关文章

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件

有网友碰到过这样的问题:如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件,问题详细内容为: 如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件 ? ,我搜你通过互联网收集了相关的一些解决方案,希望对有过相同或者相似问题的网友提供帮助,具体如下: 解决方案1: /.*\.(?:(?!(jpg|css|js|html|htm|png)).)+/ --- 共有 3 条评论 --- 皮总find . -ty

WordPress引入css/js方法总结

WordPress引入css/js方法很多,条件很多.如何全局加载,或仅在某些页面精准加载,什么时候需要先注册脚本再加载,本文希望找到最简单的方式,并给出探索更多方法的途径. 在前台加载css/js 用wp_enqueue_script()函数加载js,用wp_enqueue_style()加载css,加载资源的位置(action)只有一个——wp_enqueue_scripts. 用wp_enqueue_系列函数可以更好的处理脚本样式表的依赖关系,防止重复加载,以twentyfifteen主题

asp.net MVC发布iis无法加载css,js和图片

今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual studio运行的时候就已经不能加载css和js文件,那种情况一般都是路径的问题,改下页面代码就行,网上教程不少,而这个其实是一个CMS的开源系统.Orchard,国庆实在无聊,就想玩下这个asp.net MVC框架的CMS,而且是微软推荐的开源CMS,提到了就来说说这个吧,和国内的其他CMS对比起来

springMvc整合Freemarker引入CSS,JS文件404的问题

在spring webmvcjar包中有个spring.ftl的文件 如下图: 你可以把他拷出来,放到你的目录下,也可以不拷出来,具体的用法就是 在你的freemaker模版开头加上 <#import "spring.ftl" as spring/> 如果你烤出了spring.ftl文件,像找存在感的话,比如拷到 当前项目路径的plugins文件下 那么就加上这个路径就好了<#import "plugins/spring.ftl" as sprin

nginx访问css js 图片等静态资源，报404或无法定向访问到

配置完nginx,把php的项目放上去后,发现css,js和图片全部访问不到,一直重定向到根目录执行index.php,郁闷的在网上查了半天,原来不同后缀名的文件访问时都要在nginx.conf中声明规则,如下, location ~* .(jpg|gif|png|js|css)$ { root E:\Project\PHP\mobao; if (-f $request_filename) { expires max; break; } } 在location ~ \.php$前面加上上面这段规

HTML/CSS/JS编码规范

最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字.如下不太好的写法: <img src="company-logo.svg" alt="ABC Company Logo"> 更好的

Django使用本地css/js文件

在网上看了很多说Django如何使用本地css/js的文章, 但都不能用 今天终于找到一个可以用的, 记录下 在manager.py同层级下创建static文件夹, 里面放上css , js, image等文件或者文件夹 我的文件夹层级 然后很简单,只需在settings.py中进行设置就行, 在末尾添加以下代码 STATIC_URL = '/static/' HERE = os.path.dirname(os.path.abspath(__file__)) HERE = os.path.joi

从零开始学JAVA(08)-使用SpringMVC4 Restful 风格引用静态文件 css/js/png

在写完helloworld后想给网页加点样式(*.css),结果怎么也显示不了,百度了很多种方法后试行尝试,试验成功并记录下来,方便以后查看. 时隔两年,继续学习JAVA,太久没学了,忘记得差不多,还好以前写的helloworld,还能用. 一.关于开发环境 eclipse-jee-neon-1a-win32 Jdk 1.8u112 (32位版本) SpringMVC 4.3.4.RELEASE apache-tomcat-8.5.8 二.helloworld.jsp文件中的引用的样式表为 st