您的位置: 首页  >  IT文章  >  前端 HTML

前端 HTML

分类: IT文章 • 2024-01-03 21:30:30 
前端

　　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="" >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>

 　　　　　　前端 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="" 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" ></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" >
</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
        获取用户大段文本值

相关推荐