前端之html

时间 2019-11-10

标签前端 html 栏目 HTML 繁體版

原文原文链接

import socket

sk=socket.socket()
sk.bind(('127.0.0.1'),8888)
sk.listen(5)

while true:
    conn,addr=sk.accept()
    data=conn.recv(4)
    conn.send(b"http/1.1    200    ok\r\n\r\n")
    conn.send(b"<h1>hello world</h1>")
    conn.close()

浏览器发送请求---->http协议---->服务端接收请求----> 服务端返回响应----->服务端把html文件内容发给浏览器----->浏览器渲染页面

html是什么？

一、超文本标记语言，是一种用于建立网页的标记语言。
二、本质上是浏览器可识别的规则，咱们按照规则写网页，浏览器根据规则渲染咱们的网页，对于不一样的浏览器，对同一个标签可能会有不一样的解释
三、网页文件的扩展名：html或htmcss

html 是一种网页标记语言，不是编程语言

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>

几个重要的属性：
id:定义标签的惟一ID，html文档树中惟一
class:为html元素定义一个或多个类名，
style:规定元素的行内样式（CSS样式）html

使用

head内经常使用标签

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

body 内经常使用标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>斜体</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>


换行
<br>

水平线
<hr>

空格--->&nbsp

div span 标签

div标签用来定义一个块级元素，并没有实际的意义。主要经过CSS样式为其赋予不一样的biao现python

span标签用来定义行内元素，并没有实际的意义。主要经过CSS样式为其赋予不一样的表现。web

块级元素和行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不须要另起一行。若是单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是在专门为定义CSS样式而生的。编程

注意：

关于标签嵌套：一般块级元素能够包含行内元素或某些块级元素，可是行内元素不能包含块级元素，只能包含行内元素。浏览器

P标签不能包含块级标签，也不能包含P标签。服务器

img标签

<img    src='图片的路径'    alt='图片未加载成功时的提示'    title='鼠标悬浮时提示的消息'    width='宽'    height='高'>

a 标签，超连接标签

http://www.baidu.com/stu/intro.html
        http://222.172.123.33/stu/intro.html

URL地址由4部分组成：
一、协议：http
二、域名或IP地址：www.baidu.com或222.172.123.33
三、站点中的目录：stu
四、页面名称：into.html

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

target:
    _blank表示在新标签页中打开目标网页
    _self 表示在当前标签页中打开目标网页

列表

一、无序列表socket

<ul    type="disc">

<li>无序列表</li>
<li>无序列表</li>

</ul>


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

一、有序列表编程语言

<ol    type="1"    start=“2”>

    <li>列表</li>
    <li>列表</li>

</ol>


type属性：
    1    数字列表，默认值
    A    大写字母
    a    小写字母
    I    大写罗马

    i    小写罗马

form表单

表单用于向服务端传输数据，从而实现用户与web服务器的交互。post

input元素，input元素会根据不一样的type属性，变化为多种形态

<input type="text"/>    单行输入文本
<input type="password"/>    密码输入框
<input type="date"/>    日期输入框
<input type="checkbox"    checked="checked"/>    复选框
<input type="radio"/>    单选框
<input type="submit"    value=“提交”/>    提交按钮
<input type="reset"    value=“重置”/>    重置按钮
<input type="button"    value=“普通按钮”/>    普通按钮
<input type="hidden"/>    隐藏输入框
<input type="file"/>    文本选择框

下拉框select 标签

<form    action=""    method="post">
    <select    name="city"    id="city">
        <option    value="1">北京</option>
        <option    value="2"    selected="selected">上海</option>
        <option    value="3">广州</option>
        <option    value="4">森真</option>
    </select>

</form>

textarea 多行文本

<textarea    name="memo"    id="memo"    cols="30"    rows="10">    默认文本    </textarea>
 属性说明：
        name：名称
        rows：行数
        cols：列数
        disabled：禁用

标签的总结：

块级元素：块级大多为结构性标记

<h1>.....</h1>标题一级
<h2>.....</h2>标题二级
<h3>.....</h3>标题三级
<h4>.....</h4>标题四级
<h5>.....</h5>标题五级
<h6>.....</h6>标题六级

<hr>    水平分割线

<p>....</p>段落

<ul>.....</ul>无序列表

<ol>......</ol>有序列表

<dl>.......</dl>定义列表

<table>......</table>表格

<form>.......</form>表单

行内元素：行内大多为描述性标记
<span>.......</span>
<a>......</a>连接
<br>换行
<b>.......</b>加粗

<strong>.........</strong>加粗
<img>    图片
<i>.......</i>斜体
<em>......</em>斜体
<del>.....</del> 删除线
<u>......</u>下划线
<input>.....</input>文本框
<textarea>.......</textarea>多行文本
<select>.....</select>下拉列表

#### 块级元素
一、老是重新的一行开始
二、高度宽度都是可控的
三、宽度没有设置的时候，默认为100%
四、块级元素中能够包含块级元素和行内元素


#### 行内元素
一、和其余元素都在一行
二、高度宽度以及内边距都是不可控的
三、宽高就是内容的高度，不能够改变
四、行内元素只能行内元素，不能包含块级元素