zoukankan      html  css  js  c++  java
  • html基础

    web本质
    浏览器输入网址 朝服务器发送请求
    服务器接收请求
    服务器返回相应的响应
    浏览器接收响应解析渲染展示到屏幕上

    http协议
    超文本传输协议,规定了信息基于网络传输的发送及接收格式

    http状态码
    10X 服务器已经接收了你的请求,正在处理,你可以继续提交数据
    20X 请求成功
    30X 内部重定向
    40X 请求错误
    50X 服务器错误

    html
    超文本标记语言,规定了前端页面的书写标准

    html注释
    单行注释<!--这里写注释-->
    多行注释<!--
    这就是多行注释
    -->

    html文档结构
    <!DOCTYPE html>
    <html>
    <head></head>
    <body></body>
    </html>


    head内常用标签
    title 定义网页标题
    link 引入外部css文件
    script 在该标签内部直接写js代码,也可以引入外部js文件
    style 内部写css样式语句
    meta
    name='keywords' content='.....................'


    body常用标签

    基本标签
    h1~h6
    p
    a
    img
    b,u,i,s
    br
    hr

    特殊符号
    &nbsp;
    &gt;
    &lt;
    &reg;
    &amp;
    &copy;
    &yen;

    常用标签(******)
    div用于页面布局
    span普通小文本
    a标签:链接标签,锚点,可以通过target控制是否是当前页跳转
    img标签:
    src:图片地址
    alt:图片未加载完成显示信息
    title:鼠标悬浮上去显示文本

    只需要调整一个,另一个自动按比例缩放
    height

    列表标签
    无序列表
    ul>li
    type disc,none,square,circle
    有序列表
    <ol type="i">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    </ol>
    标题列表
    <dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dd>内容3</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容1</dd>
    <dd>内容1</dd>
    <dt>标题3</dt>
    <dd>内容1</dd>
    <dd>内容1</dd>
    <dd>内容1</dd>
    </dl>

    表格标签
    <table>
    <thead></thead>
    <tbody></tbody>
    </table>

    table内 tr标签表示一行,tr里面可以放td,thead





    form表单(*******)
    功能:前后数据交互,帮你提交任意的数据

    input通过控制type属性来展示不同的获取用户输入的页面效果
    type属性总结:
    text:纯文本
    password:用户输入不可见
    date:日期 比如:获取用户生日
    radio:单选 比如:获取用户性别
    checkbox:多选 比如:获取用户爱好
    file:文件 获取用户上传文件

    submit:提交 注意:form表单中只有input的type属性是submit才能支持提交
    reset:重置
    button:按钮

    select:下拉框 默认是单选,可以通过multiple属性指定为多选

    textarea:大段文本



    label标签
    本身没有任何实际意义,主要是配合input标签
    <label for="">username:
    <input type="text">
    </label>

    <label for="i1">username:
    <input type="text" id="i1">
    </label>

    flask框架初窥
    flask安装命令
    pip install Flask

    flask三行式

    请求方式
    获取数据 get请求
    提交数据 post请求


    标签分类(******)
    块儿级标签(独占一行) h1~h6,p,hr,br
    1.块儿级标签,可以嵌套其他块儿级标签和行内标签
    2.p标签虽然也是块儿级标签,但是它不能嵌套任何块儿级标签,只能嵌套行内标签

    行内标签(自身文本多大就占多大) span,b,u,i,s,a,img
    1.行内标签肯定不能嵌套块儿级标签,只能嵌套行内标签
    2.行内标签 无法设置长宽

    标签分类2:
    双标签<h1></h1>
    自闭和标签<img />


    URL:网址(uniform resource locator)
    专业一点:统一资源定位符
    url的组成:
    https://www.baidu.com/


    form表单中
    action属性. 控制数据往哪提交,不写默认往当前url地址提交
    method属性 控制数据提交的方式,默认是get请求,可以通过method该属性指定其他提交
    提交数据的input必须要有name参数
    input框中value属性就是对应的值

    如果要提交文件数据
    1.修改提交数据编码格式enctype
    2.提交方式必须是post


    form表单注意事项:
    action
    method默认是get
    enctype数据编码格式
    form表单获取用户输入的标签都必须有name属性
    form提

    交数据必须借助于input标签type类型等于submit按钮才能触发提交效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <form action="">
    <p>
    <label for="1">
    用户名:<input type="text" id="1">
    </label>
    </p>
    <p>
    <label for="2">
    密 码:<input type="password" id="2">
    </label>
    </p>
    <p>
    <label for="3">
    性别:<input type="radio" name="sex" checked id="3"><input type="radio" name="sex" ></label>
    </p>
    <p>
    <label for="">
    爱好:<input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">乒乓球
    </label>
    </p>
    <p>
    出生省份:<select name="" id="" >
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="sz">深圳</option>
    </select>
    </p>
    <p>
    <select name="" id="">
    <optgroup label="北京">
    <option value="">朝阳</option>
    <option value="">海淀</option>
    </optgroup>
    <optgroup label="上海">
    <option value="">浦东</option>
    <option value="">浦西</option>
    </optgroup>
    <optgroup label="深圳">
    <option value="">宝山</option>
    <option value="">宝盒</option>
    </optgroup>
    </select>>
    </p>
    <p>
    自我介绍:<textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    <p>
    <input type="submit" title="==================" value="注册">
    <input type="reset" value="重置一下">
    <input type="button" value="只是一个普通的按钮">
    </p>
    
    </form>
    </body>
    </html>
    试做简单HTML
  • 相关阅读:
    Python保留最后N个元素
    STL算法
    STL迭代器
    STL容器
    C++总结1
    牛客剑指Offer2
    Vue第一天
    UML
    Java继承和组合代码
    Java15后的sealed阻止继承滥用
  • 原文地址:https://www.cnblogs.com/98WDJ/p/10638450.html
Copyright © 2011-2022 走看看