html基础知识介绍

时间：2017-09-21 23:29:47 阅读：322 评论：0 收藏：0 [点我收藏+]

标签：arch def 3.1 本地人文 nec 提交 submit 作用

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="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基础知识介绍

标签：arch def 3.1 本地人文 nec 提交 submit 作用

原文地址：http://www.cnblogs.com/goodshipeng/p/7571767.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行