首页 > > 网页制作 > css >

html

2019-09-17 09:56:26来源：博客园阅读 ()

html

1.py启动html服务器

import socket

sock = socket.socket()
sock.bind(("127.0.0.1",8880))
sock.listen(5)
while 1:
    conn,addr=sock.accept()
    data=conn.recv(1024)
    print('data',data)
    with open("day1.html",encoding= "utf-8") as  f:
        res=f.read()
    conn.send(("HTTP/1.1 201 OK \r\n\r\n %s" %res).encode("utf8"))
    conn.close()

2.html基础

html是什么？

超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则
浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
静态网页文件扩展名：.html 或 .htm
html将多个连续的空格或者换行都识别成1个空格

3.html文档结构

<!DOCTYPE html> 
<html lang="zh-CN">   #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'

<head> 
  <meta charset="UTF-8"> #指定编码
  <title>css样式优先级</title> #标题
</head>
<body> 

</body>
</html>

解释

<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
定义网页标题，在浏览器标题栏显示。
<body></body>之间的文本是可见的网页主体内容

标签	意义
<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页原信息

4.meta标签

<meta>元素可提供有关页面的元信息（meta-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。

　　meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次

2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的

5.body内常用标签

块级标签(行外标签):独占一行,可以包含内敛标签和某些块级标签,div,p,h1-h6,hr,form
内敛标签(行内标签):不独占一行,不能包含块级标签,只能包含内敛标签 b,i,u,s,a,img,select,input,span,textarea
p标签,p标签内部不能包含块级标签和p标签

5.1基础标签

<h>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b>: 加粗标签.

<strike>: 为文字加上一条中线.

<i>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

<u>:下划线

<s>删除</s>

5.2特殊字符

 ：空格（non-breaking spacing，不断打空格）
<：小于号（less than）
>：大于号（greater than）
&：符号&
"：双引号
'：单引号
©：版权?
™：商标?

重点特殊字符： 、<、>、&copy

5.3常用标签

<div>和<span>

<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级可以包含内联标签,和某些块级标签 , 内联无法包含块级

p标签不能包含块级标签,和p级标签

5.31 img标签

属于内联标签

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

5.32 a标签

超链接标签(内联)

　　　　所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

<a href="http://www.baidu.com" target="_blank" >点我</a>
target="_blank" #打开新的页面
target="_self"   默认的,在当前标签页打开

href属性指定目标网页地址。该地址可以有几种类型：

    绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
    相对 URL - 指当前站点中确切的路径（href="index.htm"）
    锚 URL - 指向页面中的锚（href="#top"）#博客的目录常用到调到name为top的标签上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="day1.html" target="_blank">
    <img src="https://www.zhenxin.com/img/about_logo.jpg" alt="加载为成功" title="美女" width="100px" height="100px"> ##图片超链接地址
</a>

</body>
</html>

接标签(锚标签):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--页面内连接 #跳转锚点 -->
<a href="#c1">1</a> 
<a href="#c2">2</a>
<a href="#end">3</a>

<h1></h1>
<div style="height: 500px;background-color: blue"id="c1">第一章</div>
<!--填写锚点的位置 -->
<div style="height: 500px;background-color: aquamarine"id="c2">第2章</div>
<a name="end">这是底部</a>

</body>
</html>

5.33 列表标签

1.有序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

2.有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性： start是从数字几开始
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

3.标题列表

就像大纲一样，有一个层级效果

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

5.34表格标签

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
　　　　表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：

<table border='1'> #显示表格
  <thead> #标题部分
      <tr> #一行
        <th>序号</th> #一个单元格
        <th>姓名</th>
        <th>爱好</th>
      </tr>
  </thead>
  <tbody> #内容部分
      <tr> #一行
        <td>1</td> #一个单元格
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      </tbody>
    </table>

<tr>: 表行
<th>: 表头
<td>:表数据
属性:
    border: 表格边框.
    cellpadding: 内边距
    cellspacing: 外边距.
    width: 像素 百分比.（最好通过css来设置长宽）
    rowspan:  单元格竖跨多少行
    colspan:  单元格横跨多少列（即合并单元格）

6.input标签

type属性值	表现形式	对应代码
text	单行输入文本
password	密码输入框（不显示明文）	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" name='x' />
radio	单选框	<input type="radio" name='x' />
submit	提交按钮	<input type="submit" value="提交" /> #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
reset	重置按钮	<input type="reset" value="重置" /> #页面不会刷新，将所有输入的内容清空
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" /> （等学了form表单之后再学这个）

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用禁止

input文本输入框,input标签如果想将数据提交到后台,那么必须写name属性
input选择框,必须写name属性和value属性
input选择框,name值相同的算是一组选择框

file上传文件注意两点：

请求方式必须是post enctype="multipart/form-data"

用户名:<input type = "text">
密码:<input type = "password">
性别:
<input type = "radio" name = "sex">男
<input type = "radio" name = "sex" checked="123">女

爱好:
<input type="checkbox">抽烟
<input type="checkbox">喝酒
<input type="checkbox">泡马子
<input type="checkbox">遛狗

日期
<input type="date">
<div>
    <input type="submit" value="确定">    
</div>
<div>
    上传头像:<input type="file">
<div>

7.from表单

action属性:值是一个网址,将数据提交到哪个网址去
method属性:提交方法,默认是get,效果是在网址上可以看到提交的数据
get请求：安全性差，数据量有限（当设计到查询的时候会用到get请求）
post请求：相对于get安全点，，但是没有绝对的安全（修删改可以用post）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="http://127.0.0.1:8001">

    <div>
        用户名:<input type="text" name="username">
    </div>
     <div>
        密码:<input type="password" name="pwd">
    </div>
     <div>
        性别:<input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="2">女
    </div>
<!--    <input type="submit">-->
<!--    <button>验证</button>-->
    <input type="reset">
</form>

<span>xxxxx</span>

</body>
</html>

注意,想通过form表单标签来提交用户输入的数据,必须在form表单里面写你的input标签,并且必须有个提交按钮,按钮有两种,1: input标签type='submit', 2: botton按钮

8.select标签

下拉框

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option> #默认选中，当属性和值相同时，可以简写一个selected就行了
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

属性说明：

multiple：布尔属性，设置后为多选下拉框，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

9.label标签

<label>
    密码 <input type="password">
</label>

label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容

10.textarea多行

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

属性说明：

name：名称
rows：行数 #相当于文本框高度设置
cols：列数 #相当于文本框长度设置
disabled：禁用
maxlength：显示字符数，例如：maxlength='10' 最多输入十个字符

常用于评论留言区

原文链接:https://www.cnblogs.com/zdqc/p/11493561.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：前端之HTML

下一篇：CSS放入网页的方式

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签