前端HTMLl - 码农教程

什么是前端?
任何与用户直接打交道的操作界面都可以称之为前端比如:电脑界面,手机界面,平板界面
什么是后端?
暂时先理解成幕后操作者不直接与用户打交道

Web服务的本质:
   浏览器中敲入网址回车发送了几件事?
   1.浏览器超服务端发送请求
   2.服务端接收请求
   3.服务端返回相应的响应
   4.浏览器接收响应根据特定的规则渲染页面展示给用户看

HTTP协议
超文本传输协议规定了浏览器与服务端之间消息传输的数据格式

四大特性:
       1.基于请求响应
       2.基于TCP/IP之上的作用于应用层的协议
       3.无状态(服务端无法保存用户的状态,一个人来一千次我都记不住还当你如初见)
       4.无连接(请求来一次我响应一次之后立马断开连接两者之间就不再有任何关系了)
        websocket 相当于是HTTP协议的一个大的补丁它支持长连接

请求数据格式
       请求首行(标识HTTP协议版本,当前请求方式)
       请求头(一大堆k,v键值对)
       请求体(携带的是一些敏感信息比如密码,身份证号...)

响应数据格式
       响应首行(标识HTTP协议版本,响应状态码)
       响应头(一大堆k,v键值对)
       响应体(返回给浏览器页面的数据通常响应体都是html页面)

响应状态码
       用一串简单的数字来表示一些复杂的状态或者提示信息
       1XX:服务端已经成功接收了你的数据正在处理你可以继续提交额外的数据
       2XX:服务端成功响应你想要的数据(请求成功200)
       3XX:重定向(当你在访问一个需要登录之后才能访问的页面你会发现窗口会自动调到登录页面 301 302)
       4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)
       5XX:服务器内部错误(500)

请求方式
       1.get请求
           朝服务端要资源(比如浏览器窗口输入www.baidu.com)
       2.post请求
           朝服务端提交数据(比如用户登录提交用户名和密码)

URL:统一资源定位符(大白话就是网址)

HTML
   超文本标记语言
   要想让你的页面能够正常被浏览器显示出来你所写的页面就必须遵循html标记语法
   也就意味着所有能够被浏览器显示出来的页面内部都是html代码
   浏览器只认识html css js

web本质
   浏览器 / 服务器
   文件(后缀名是.html结尾的文件,也就意味着只要看到.html结尾文件那么它就是一个前端页面文件)
   文件的后缀名仅仅是给人看的计算机无所谓因为都是二进制数据

HTML简单使用，文本， 图片， 链接 
<!DOCTYPE html> #声明为HTML5文档。
<html lang="en"> #是文档的开始标记和结束的标记,lang是语言类型，en是英语
<head>定义了HTML文档的开头部分。
    <meta charset="UTF-8"> # 声明编码
    <title>caodanbiaoti</title>#定义了网页标题
    <meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> #<!--2秒后跳转到对应的网址，注意引号(了解)-->
    <!--<style>h1{color:red;}</style>--> #style用来控制样式的 内部支持写css代码,将文本内容变成红色
    <!--<script>alert(123)</script>--># 添加悬浮窗，确认后，进入界面
    <!--<script src="01%20myjs.js"></script>--># script内部支持写js代码  也支持导入外界的js文件
    <link re1="stylesheet" href="mycss.css">#link专门用来引入外部的css文件
</head>
<body> #body之间的文本是可见的网页主体内容。
<h1>hello Girl!</h1>
</body>
</html>

HTML注释
   写网页的一套标准
   注释是代码之母
       
       
   一般情况下 html的注释都会按照下面的方式书写
   
   
   HTML文档结构
       <html>
       <head></head>:head内的标签不是用来展示给用户看的而是定义一些配置主要是给浏览器看的
       <body></body>:body内的标签就是浏览器展示给用户看的内容
       </html>

打开html页面的两种方式
1.找到文件路径选择浏览器打开
2.pycharm快捷方式直接打开

标签的分类1:
1.双标签(<h1></h1> <a></a>)
2.单标签(自闭和标签 <img/>)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>h1</h1>
正常文本
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>不管标签内的内容分多少段，都会将标签内的内容按照一段进行处理</p>
</body>
</html>

特殊字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>大梦谁先觉,平生&nbsp;&nbsp;吾自知!&yen;100</p>
&nbsp;  # 是一个空格
a &gt; b  # a>b
b &lt; c  # a<b
&yen;  # ￥
&amp;  # &
&reg;  # ®
&copy; # ©
</body>
</html>

head内常用标签
       title用来显示网页标题
       style用来控制样式的内部支持写css代码
       script内部支持写js代码也支持导入外界的js文件
       link专门用来引入外部的css文件

标签的分类2
       1.块儿级标签(独占浏览器一行)
           div p h
           1.块儿级标签可以修改长宽
           2.块儿级标签内部可以嵌套任意的块级标签
               但是p标签虽然是块儿级标签但是他不能够其他块儿级标签包括自身
               可以嵌套行内标签
           总结:
               只要是块儿级标签都可以嵌套行内标签
               p标签只能嵌套行内其他块儿级可以嵌套任意的块儿级标签
       2.行内标签(自身文本多大就占多大)
           span b s i u
       div和span通常都是用来构建网页布局的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<img src="http://pic1.win4000.com/wallpaper/c/53cdd1ec00d80.jpg"/>-->#网页图片
<!--<img src="1.jpg" alt="">--># 本地图片
<!--<div>div--># 每多一个div标签，标签内的内容会独占浏览器一行。且可以嵌套任意块级标签
    <!--<div>div1</div>-->
    <!--<div>div2<p>p-->#p标签内不能嵌套块级标签，能嵌套行内标签，增加行内标签，会按照原来的位置书写，自身文本多大就占多大
        <!--<a >a</a>-->
        <!--<span>span</span>-->
    <!--</p></div>-->
<!--</div>-->
<!--<span>span</span>-->
<!--<p>p&lt;!&ndash;--># p<!-
    <!--<p>p2</p>--># p2
    <!--&ndash;&gt;&lt;!&ndash;--># -><!-
    <!--<div>div</div>--># div
    <!--&ndash;&gt;--># ->
    <!--<a href=""></a>-->
    <!--<span></span>-->
<!--</p>-->
<!--<img src="1.jpg" alt="裸照" title="悬浮标题" height="200" width="">--># height调整图片的高度，宽度没有指定的情况下，宽度会按比例调整
<!--<a href="http://www.xiaohuar.com" target="_self">click me</a>--> # 点击网址会在当前页面加载
<!--<a href="https://www.luffycity.com" target="_blank">click me</a>--># 点击，会在新窗口中加载
<!--<a href="https://www.sogo.com">click me</a>--># 点击网址会在当前页面加载
<a href="" id="d1">1</a>
<img src="http://pic1.win4000.com/wallpaper/c/53cdd1ec00d80.jpg"/>
<a href="" id="d2" class="c1">中间</a>  # 点击'中间'会跳转到第一张图片
<img src="http://pic1.win4000.com/wallpaper/c/53cdd1ec00d80.jpg"/>
<a href="#d2">回中间</a>  # 点击'回中间'会跳转到第二张图片
<img src="http://pic1.win4000.com/wallpaper/c/53cdd1ec00d80.jpg"/>
<a href="#d2" id="d3">间</a>  # 点击'间'会跳转到第二张图片
# href='想要跳转的页面'
<img src="http://pic1.win4000.com/wallpaper/c/53cdd1ec00d80.jpg"/>
</body>
</html>

body内常用标签
       基本标签
           h标签:标题标签
           p标签:段落标签
       符号
       常用标签
           div / span / p / img
               src存放的是图片的路径(该路径可以是本地的也可以是网上的)
                   1.也可以放url(会自动请求该url获取相应数据)
                   2.也可以直接放图片的二进制数据会自动转换成图片
               alt当图片加载不出来的时候显示的提示信息
               title当鼠标悬浮在图片上提示的信息
               height,width 当你只指定一个参数的时候另外一个会等比例缩放
           a
               href后面存放url的时候点击跳转到该url
                   如果该链接没有被点过那么默认是蓝色,只要点过依次之后都是紫色
               target 默认是_self当前页面跳转
                       _blank新建页面跳转
               锚点功能(回到顶部)
                   href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签
       每一个标签都应该有三个比较重要的属性
           1.id值该值就类似于人的身份证号在用一个html文档id应该保证唯一不重复
           2.class值该值就类似于面向对象里面的继承可以写多个
           3.style(不是必备) 支持在标签内直接写css代码属于行内样式优先级最高
           补充任何标签都支持自定义属性!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<p>无序列表</p> # 前面无索引-->
<!--<ul type="circle">-->
    <!--<li>aaa</li>-->
    <!--<li>bbb</li>-->
    <!--<li>ccc</li>-->
<!--</ul>-->

<!--<p>有序列表</p>  # 前面有索引-->
<!--<ol type="I" start="2">-->
    <!--<li>111</li>-->
    <!--<li>222</li>-->
    <!--<li>333</li>-->
<!--</ol>-->
<p>标题列表</p> # 按照表目录的形式展现
<d1>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容1</dd>
    <dt>标题3</dt>
    <dd>内容1</dd>
    <dd>内容1</dd>
    <dt>标题4</dt>
    <dd>内容1</dd>
    <dd>内容1</dd>
</d1>
</body>
</html>

        列表标签
       表格标签(*****)
           <table>
               <thead></thead>
               <tbody></tbody>
           </table>
           tr表示一行
           th和td都是文本
               建议在thead内用th
               tbody内用td
           colspan表示的水平方向
           rowspan表示的竖直方向
       表单标签(******)
           能够接收用户输入(输入选择上传)并将其发送给后端
           以注册实例位例讲解form表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="10" cellpadding="20" cellspacing="10">
<thead>
    <tr>
        <th>username</th>
        <th>password</th>
        <th>bobby</th>
    </tr>
</thead>
    <tbody>
    <tr>
        <td>tank</td>
        <td>123</td>
        <td>ha</td>
    </tr>
    <tr>
        <td>egon</td>
        <td>123</td>
        <td>hei</td>
    </tr>
    <tr>
        <td>jason</td>
        <td>123</td>
        <td>he</td>
    </tr>
    </tbody>
</table>
</body>
</html>

           action控制数据提交的目的地
               1.不写的情况下默认提交到当前页面所在的路径
               2.写全路径(https://www.baidu.com)
               3.路径后缀(/index/)

       input input标签就类似于是前端变形金刚
           type
               text:普通文本
               password:密文不展示明文
               date:日期
               submit:触发提交动作
               button:普通按钮没有实际意义但是可以通过js绑定事件实现自定义动作
               reset:重置表单内容
               radio:单选可以通过checked控制默认选择(当属性值和属性名相同的情况下可以简写 checked) checked="checked"
               checkbox:多选同上可以设置默认值
               file:获取用户上传的文件

       select标签
           默认是单选可以通过multiple变成多选
           如果想默认选择用selected (selected="selected")

       textarea标签
           获取用户输入的大段文本

       form表单默认是get请求你需要通过method参数换成post提交
       form表单中要想触发提交动作
           只有两种情况可以
               1.input标签type指定成submit
               2.直接写button标签

           获取用户输入(输入选择上传...)的标签都必须有一个name属性
           这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value

       <input type="text" id="d1" name="username" value="默认值">
           name就相当于是字典的key
           value就是字典的值
           获取都的用户输入都会被放入value属性中

       form表单传文件的时候需要指定enctype参数

   emmet插件

   防呆措施

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>注册</h2>
from action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form_data"
    <p><label for="d1">username:<input type="text" id="d1" name="username"></label></p>
    <p><label for="d2">password:<input type="password" id="d2" name="password"></label></p>
    <p>
        <label for="d3">birthday:</label>
        <input type="date" id="d3" name="birth">
    </p>
<p>性别:
    <input type="radio" name="gender" checked value="male">男
    <input type="radio" name="gender" checked value="female">女
</p>
<p>爱好:
    <input type="checkbox" name="hobby" value="basketball">篮球
    <input type="checkbox" name="hobby" value="football">足球
</p>
<p>
    <select name="province" id="">
            <option value="sh">上海市</option>
            <option value="bj">北京市</option>
            <option value="sz">深圳市</option>
        </select>
</p>
<p>伴侣:
        <select name="" id=" " multiple>
            <option value="" selected>新垣结衣</option>
            <option value="" selected>斯嘉丽</option>
            <option value="">明老师</option>
        </select>
    </p>
    <p>省市1:
        <select name="" id=" ">
            <optgroup label="上海">
                <option value="">嘉定区</option>
                <option value="" selected>浦东新区</option>
                <option value="">静安区</option>
            </optgroup>
            <optgroup label="北京">
                <option value="">朝阳区</option>
                <option value="">海淀区</option>
                <option value="">昌平区</option>
            </optgroup>
            <optgroup label="安徽">
                <option value="">芜湖市</option>
                <option value="">合肥市</option>
                <option value="">安庆市</option>
            </optgroup>
        </select>
    </p>
<p>头像:
        <input type="file" name="avatar">
    </p>
    <p>个人简介:
        <textarea name="info" id="" cols="30" rows="10"></textarea>
    </p>
    <input type="submit" value="注册1">
    <input type="button" value="注册2">
    <input type="reset" value="注册3">
    <button>button标签</button>
</form>
</body>
</html>

原文地址：https://www.cnblogs.com/zrh-960906/p/11456275.html