190310HTML&CSS&JS

Posted 2021-02-13 l-dongf

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

", 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

", 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：各种符号

空格：?
大于：>
小于：<
参考：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
5.2：p和br
p：段落，段落之间有间距
br：换行
5.3：标题，加大加粗
h1...h6
5.4：snap标签，行内白板

<!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>

以上是关于190310HTML&CSS&JS的主要内容，如果未能解决你的问题，请参考以下文章

史上前端面试最全知识点（附答案）---html & js & css

alpha冲刺—冲刺计划&代码规范

第2章WEB02-CSS&JS篇

SublimeText3系列- HTML-CSS-JS Prettify美化代码&Markdown Preview写作

JS+CSS radial-gradient 实现渐变中心随鼠标点击改变

出大问题！webpack 多入口&&html模板在后端

190310HTML&CSS&JS

一、html

1、web server

2、web server2

3、实例index.html

4、head标签

5、body标签

6、表单标签

7、超链接&锚点

8、图片

9、列表

10、表格

11、label标签

二、CSS

1、css选择器

2、引入css文件

3、基本样式

4、float

5、display

6、padding margin 内边距和外边距

7、position属性

8、图片的显示

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

10、背景图片以及图标

11、带图标的登录框

三、javascript

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

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

3、变量

4、定时器

5、console打印log

6、跑马灯示例