前端知识之html内容
-
web服务本质
-
浏览器发送请求-->http协议-->服务端接收请求-->服务端返回响应-->服务端把html文件内容发给浏览器-->浏览器渲染页面
-
实例简单的一个socket
-
import socket sk = socket.socket() sk.bind(("127.0.0.1", 9000)) sk.listen() while 1: conn, addr = sk.accept() data = conn.recv(9000) print(data) conn.send(b"HTTP/1.1 200 OK ") conn.send('hello'.encode('utf8')) conn.close()
-
-
html是什么
-
超文本标记语言（html）是一种用于创建网页的标记语言，它不属于编程语言
-
本质是浏览器可识别的规则
-
最基本的html文档
-
<!DOCTYPE html> 声明为html5文档<!DOCTYPE>指web浏览器关于页面使用哪个html版本进行编写的指令 -
<html> </html>是文档的开始和结束标记，是html的根源素，在他们之间是head（头部）和body（身体） -
<head> </head>head>定义了html文档的开头部分，他们之间的内容不会显示在浏览器的文档窗口上，包含文档的meta（元）数据 -
<title> </title>定义了网页标题，在浏览器标题栏显示 -
<body> </body>之间的文本是可见的网页主体内容 -
注释语法
<!--注释内容-->注意：对于中文网页需要使用
<meta charset='utf8'>声明编码，否则会出现乱码，有些浏览器会设置gbk为默认编码，则你需要将声明的编码改成gbk的样子
-
-
<!DOCTYPE html> <!--lang='zh-CN'表示网页主要显示为中文，lang='EN'则表示主页显示为英文--> <html lang="zh-CN"> <head> <!--指定文档的编码类型--> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
html标签格式
-
-
html标签
- 由尖括号包围的关键字形成
- 标签通常是成对出现，例
<div>和</div> - 部分标签是单独呈现的例
<br>换行的意思 - 标签里面可以有若干属性，也可以不带属性
-
标签语法
<标签名 属性1=“属性值1” 属性2=“属性值2”>内容部分</标签名><标签名 属性1=“属性值1”>
-
几个很重要的属性
- id 定义标签的唯一id，一个html文档中唯一
- class 为html元素定义一个或多个类名（classname）（css样式类名）
- style：规定元素的行内样式（css样式）
html常用标签
-
head常用标签
<title>网页标题</title>定义网页标题<style>内部样式</style>定义内部样式表<script></script>定义js代码或引入外部js文件<link>引入外部样式表文件<meta>定义网页元信息- 可提供有关页面的原信息，针对搜索引擎和更新频繁的描述和关键字
- 位于head（头部），不包含任何内容
- 提供的信息时用户不可见的
- 含有http-equiv属性和name属性，（了解）
-
body内常用标签
-
<b>加粗</b> <i>斜体字</i> <u>下划线</u> <s>删除文字中间一横杠</s> <p>段落标签，该标签的内容为一段落</p> <h1>标题</h1> <h6>标题6</h6> <!--换行标签--> <br> <!--水平线--> <hr>常用特殊字符（百度html特殊字符表）
<!--空格--> <!--大于＞符号--> > <!--小于＜符号--> < <!--&符号--> & <!--¥符号--> ¥ <!--©版权符号--> © <!--®注册符号--> ® -
div标签和span标签
- 相同点：
- 没有自带的样式
- 可以通过使用css来调整样式
- 不同点
- div是块级元素，独占一行
- span是行内（内联）元素，不会另起一行
- 注意：块级标签支持嵌套
- 通常块级元素可以包含内联元素或某些块级元素，但是内联元素不能包含块级元素
- p段落标签不能包含块级元素，也不能包含p标签
- 相同点：
-
块级标签和内联（行内）标签
- 块级标签
- P段落标签
- h1~h6标题标签
- hr 水平线标签
- div标签
- 内联标签
- span标签
- b加粗标签 ，i斜体标签，u下划线标签，s删除标签
- 块级标签
-
img标签
-
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
-
-
a超链接标签
-
定义：指从一个网页指向一个目标的链接关系
-
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>target属性值
- _blank 表示在新标签页中打开目标网址
- _self表示在当前标签中打开目标网址
-
-
列表标签
-
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属性
- 默认数字，A大写字母，a小写字母，I大写罗马，i小写罗马
- start属性：排序从start是几开始
-
-
标题列表
-
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
-
-
-
表格标签
-
<table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="1">Egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td rowspan="2">Yuan</td> </tr> </tbody> </table>属性：
- border :表格边框
- cellpadding 内边框
- cellpacing 外边距
- width 像素 百分比（最好同过css来设置长宽）
- rowspan 单元格竖跨多少行
- colsapn 单元格横跨多少列（合并单元格）
-
-
获取用户输入的标签form
-
功能：
-
用于向服务器传输数据，从而实现用户与web服务器的交互
-
包含input系列标签，例文本字段，复选框，提交按钮等
-
包含textarea,select,fieldset和label标签
-
表单属性
-
accept-charset 规定在 被提交表单中使用的字符集(默认：页面字符集)
-
action 规定向何处提交表单的地址
-
autocomplete 规定浏览器应该自动完成表单（默认开启）
-
enctype 规定被提交数据的编码(默认 url-encoded)
-
method 规定在提交表单是所用的http方法 默认get
-
name 规定识别表单的名称（对于dom使用document.forms.name)
-
novalidate 规定浏览器不验证表单
-
target 规定action属性中地址的目标
-
<form action="http://127.0.0.1:9000" method="post" enctype="multipart/form-data">
-
-
-
input标签
-
通常和label标签配合使用
例
<p> <label for="i1">用户名：</label> <input id="i1" type="text" name="username"> </p> <!--等同--> <p> <label>密码： <input type="password" name="pwd"> </label> </p> -
type属性
- text 单行输入文本
- password 密码输入框 （密文）
- date 时间输入框
- checkbox 复选框
<input type="checkbox" checjed="checked" > - radio 单选框
<input type="radio"> - submit 提交按钮
<input type="submit" value="提交"> - reset 重置按钮
input type="reset" value="重置按钮" > - button 普通按钮
<input type="button" value="普通按钮" > - hidden 隐藏输入框
<input type="hidden"> - file 文本选择框
<input type="file">
-
-
-