前端之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

")
    conn.send(b"<h1>hello world</h1>")
    conn.close()

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

html是什么?

1、超文本标记语言,是一种用于创建网页的标记语言。
2、本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页,对于不同的浏览器,对同一个标签可能会有不同的解释
3、网页文件的扩展名:html或htm

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样式)

使用

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现

span标签用来定义行内元素,并无实际的意义。主要通过CSS样式 为其赋予不同的表现。

块级元素和行内元素的区别:
所谓块元素,是以另起一行开始渲染的元素,行内元素则不需要另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是在专门为定义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部分组成:
1、协议:http
2、域名或IP地址:www.baidu.com或222.172.123.33
3、站点中的目录:stu
4、页面名称:into.html

<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    无样式

1、有序列表

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

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

</ol>


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

    i    小写罗马

form表单

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

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>下拉列表

#### 块级元素
1、总是从新的一行开始
2、高度宽度都是可控的
3、宽度没有设置的时候,默认为100%
4、块级元素中可以包含块级元素和行内元素


#### 行内元素
1、和其他元素都在一行
2、高度宽度以及内边距都是不可控的
3、宽高就是内容的高度,不可以改变
4、行内元素只能行内元素,不能包含块级元素





原文地址:https://www.cnblogs.com/ludundun/p/11654764.html