• 前端之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、行内元素只能行内元素,不能包含块级元素
    
    
    
    
    
    
  • 相关阅读:
    slice()、substring()、substr()的区别用法
    程序员如何快速上手一个自己不太熟悉的新项目?有什么技巧?
    计算重复字符串长度
    计算机视觉算法研发岗招聘要求
    C++进阶STL-2
    C++进阶STL-1
    拼硬币
    序列找数
    寻找合法字符串
    字符串是否由子串拼接
  • 原文地址:https://www.cnblogs.com/ludundun/p/11654764.html
Copyright © 2020-2023  润新知