前端 HTML

 

 

前端

  1 什么是前端?

    任何直接能够跟用户打交道的交互界面都可以称之为前端
  2 为什么要学前端?

    python全栈开发
软件开发架构

  c/s架构

  b/s架构

  本质上b/s也是c/s架构

浏览器输入网址发生了几件事?

  1 输入网址

  2 向服务端发送了请求

  3 服务器接收请求并查询浏览器想要的数据返回给浏览器

  4 浏览器拿到数据展示页面

HTTP协议

  超文本传输协议

文件的后面名是给谁看?

  文件的后缀并不是给计算机看,只仅仅是给人看的

HTML

  超文本标记语言
注释

HTML文档结构

<!DOCTYPE html>
<html lang="en">
<head>
      <!--head存放的内容用户是看不到的,主要是给浏览器和搜索引擎看的-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--用户能够看见的内容都在body里面--> 
    <!--
    这是多行注释
    -->
</body>
</html>

html文件打开方式

方式1: 找到该文件选择浏览器打开

方式2:pycharm内自动打开 先启动服务器

 

head内常用标签

title:页面标题  就是你新打开网页的标题

style:写css代码

script:内部可以直接写js代码,也可以通过src属性  引入内部js代码文件     就是你进入一个网页的时候上面会有一个提示信息

link:通过href引入外部css文件   可以对你下面的body里面的内容加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/lakei/">
    <!--两秒后跳转到对应的网址-->
    <title>这是我的第一个前端页面</title>
    <script src="04%20myjs.js"></script>
    <!--script:内部可以直接写js代码,也可以通过src属性 就是你进入一个网页的时候上面会有一个提示信息-->
    <link rel="stylesheet" href="03%20mycss.css">
</head>
<body>
    <h1>来了 老弟</h1>
    <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D500/sign=4d1f3cc25966d0167a199e28a72ad498/728da9773912b31bc49572268d18367adbb4e1c0.jpg" alt="王鸥">
</body>
</html>
head内常用标签

 

body内标签

  基本标签

    h1~h6:标题标签

    p: 段落标签  块级标签 自己站一行

   

<s>199</s> 现价99  #双十一砍价原价199 现价 99
<br>  #块级标签 独占一行
<u>下划线</u>  #字体下面带下划线
<hr>     #块级标签 一行的分割线
<i>斜体</i>    #斜体
<b>加粗</b>        #加粗
View Code

  

  特殊标签

  空格是&nbsp; &本身是&amp;

大于号 &get;
小于号 &lt;
金钱¥  &yen;
版权符号 &copy;
注册商标 &reg;

一个空格可以用敲一个空格会显示出来 你再去敲空格 页面上只显示一个
可以用&amp; 表示一个空格单位
View Code

 

  常用标签

    div  块级标签 独占一行

    span  行内标签内容有多少占多数空间

    a 标签 href 跟一个网页地址  target 可以设置参数 默认(_self)是当前网页跳转 改为_blank 后就是在打开一个新网页

    a 标签 还支持定位 <a href="" id="a1">top</a>

    <div style="height: 1000px;background: rgba(122,81,58,0.53)"></div>
    <div style="height: 1000px;background: #3652a5"></div>
    <div style="height: 1000px;background: #1b8ea5"></div>

    img 图片标签  <img src="123.jpg" alt="王鸥">  alt 图片不存在或者损坏的时候显示的图片是什么  title="王鸥" width="400"  title 鼠标悬停在上面显示的内容 

                          width 可以设置图片大小 图片都是等比例缩小 放大的

      页尾 a 标签 <a href="#a1">返回顶部</a>   #在这里点击可以返回到顶部

 

  标题列表

      无需列表 ul>li*2

      有序列表ol>li*2  ol 后面可以type设置排序的方式

      标题列表 <dl>

            <dt>标题1</dt>
        <dd>内容</dd>
        <dd>内容2</dd>
        <dt>标题2</dt>
         <dd>内容1</dd>
        <dd>内容2</dd>
         </dl>
  
  表格标签
      table border="1" 表的外边框宽度
<body>
<table border="10">
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>bobby</th>
        </tr>
    </thead>
    <tbody >
        <tr>
            <td>jason</td>
            <td>19</td>
            <td rowspan="2">学习</td>   #列合并
        </tr>

         <tr>
            <td>egon</td>
            <td>18</td>
            <!--<td>吃饭</td>-->
        </tr>

        <tr>
            <td>owen</td>
            <!--<td>18</td>-->
            <td colspan="2">撩妹</td>   #横向合并
        </tr>
    </tbody>

</table>
</body>
</html>

       

          写功能的时候 记得写注释

       <!--导航条开始-->

      <!--导航条结束-->
      <!--侧边栏开始-->

      <!--侧边栏结束-->

          后面维护的时候方便查找

   form表单(******)

     功能:获取用户输入(手动输入/选择输入/默认值),并将获取到的用户信息发送给后端

     form表单中只有input的type类型为submit才会触发提交信息的动作

     如果不想通过input标签来触发提交动作 那么可以直接写一个<button> button按钮</tutton>

     input

        通过控制type的类型从而实现不同的获取用户输入的标签样式

        text             普通文本

        password   密文

        date   日历

         radio    单选项(加了之后变成选项 不加用默认text)  默认值checked

        checkbox 多选框 默认值checked

        file    获取文件

        

        submit  触发提交数据的行为

        button  普通的按钮  <input type="button" value="普通按钮">

        reset   重置form表单内容

    select  

        选择框  默认是单选的 可以通过multiple参数将单选变成多选  <select name="" id="" multiple> 下面可以跟多个option

        一个option就是一个选项

    textarea

        获取用户大段文本值

    form表单中几个重要的属性

      action:用来控制数据到底提交给谁,写url来指定提交给谁

      form表单默认是get请求,可以通过methord属性修改提交方法

      form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型

        你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值

      form表单发送文件 需要修改enctype属性的值

        默认urlencoded不支持传输文件

        需要将其修改文multipart/form-data

    1 获取用户输入的标签都必须需有一个name属性

      用户输入的值会被存放到标签的value属性中

      你可以理解为name属性对应是字典的key

      用户输入的被value属性获取得到值是字典的valu

    2 label 标签

      通常是和input标签组合使用

      <form action="">

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

        <label for= "i2"> password: <input type="password" name="pwd" id="i2"></label>

        <input type="submit">

      </form>

GET请求与POST请求

   get请求:向服务端获取资源(可以携带参数供服务端校验)

      不推荐携带敏感性的参数

      get请求携带的参数是有大小限制的  大概4KB

      可以携带一些不重要的参数

   post请求:朝服务端提交数据

      敏感性的信息 都应该采用post提交方式

   将form 表单中的method改为post就可以了注册的时候

<form action="" method="post">
<label for="i1">username: <input type="text" id="i1" name="username"></label>
<label for="i2">password: <input type="password" id="i2" name="password"></label>
<input type="submit">
</form>

 

总结:

标签分类1:
    双标签 h1~h6 p a
    自闭和标签 img br hr

标签分类2(*****)
    块级标签 div h1~h6 p hr  br
        独占一行
        块级标签能够嵌套块级标签和行内标签
        p标签虽然是块级标签但是它不能嵌套任何的块级标签
        块级标签能够设置长款
    行内标签 span a img i s b u
        自身内容有多大就占多大
        行内标签不能设置长宽

url:统一资源定位符
什么是url?
   url是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址

url举例:
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分:为协议:http://、ftp://等 
第2部分:为站点地址:可以是域名或IP地址
第3部分:为页面在站点中的目录:stu
第4部分:为页面名称,例如 index.html
各部分之间用“/”符号隔开。

a标签:连接标签
    可以通过href跳转到指定的网址
    锚点功能:回到顶部
        <a href="" id="a1">top</a>
    <a href="#a1">bottom</a>
    ps:target属性用来控制是否在当前页跳转
        默认是_self当前页
        也可以指定成_blank新建页面跳转

所有的html标签都应该有一个id属性,用来唯一标识当前标签,为后续的DOM操作提供基础  也就意味着同一份html中标签的id不嫩重复,不写id属性也是可以的

img标签
    src图片路径:即可以是网络上的图片地址也可以是本地的图片地址
    alt当前图片加载失败之后自动展示的提示信息
    title 鼠标悬停在图片上时显示的文本
    图片调节长宽的啥时候只需要调节一个,另外一个参数自动等比例缩放

列表标签
    ul:无需列表
    ol:有序列表
    dl:标题列表

表单标签
    固定以下面的格式书写
    <table>
        <theade></theade>
        <tbody></tbody>
    </table>
    tr 一个tr表示一行
    border调整列表的边框
    cellspacing 调单元格与外边框之间的距离
    cellpadding 调文本与单元格之间的距离
    rowspan  垂直反向合并
    colspan    水平反向合并

form表单
    功能:获取用户输入(山东输入/选择/默认值),并将获取到的用户信息发送给后端
    form表单中只有input的type类型为submit才会触发提交信息的动作
    如果不想通过input标签来触发提交动作,那么可以直接写一个<button>button按钮</button>
    
    input 
        通过控制type的类型从而实现不同的获取用户输入的标签样式
        text            普通文本
        password    密文
        date           日历
        radio          单选框
        checkbox    多选框
        file             获取文件
        
        submit        触发提交数据的行为
        button        普通按钮
        reset           重置form表单内容
     
    select 
        选择框  默认是单选的,可以通过multiple参数将单选变为多选
        一个option就是一个选项
    textarea
        获取用户大段文本值

 

posted @ 2019-05-28 21:44  读自己  阅读(201)  评论(0编辑  收藏  举报