前端之HTML

前端基础

前端简介

什么是前端

前端，又称Web前端。

是指计算机Web应用程序或网站的前台页面。

一般我们打开的网站所看到的网页界面的内容都是由前端工程师设计的。

可以简单的理解为，与用户直接打交道的操作界面都可以称之为前端

前端的核心基础

Html：网页的骨架，没有任何的样式。

Css：给骨架添加各种样式，变得好看

JavaScript：控制网页的动态效果

HTTP超文本传输协议

超文本传输协议（HTTP，HyperText Transfer Protocol）是网上应用最为广泛的一种网络协议。

所有的WWW文件都遵循这个标准，设计HTTP最初的目的是为了提供一种发布和接收Html页面的方法。

四大特性

基于请求响应
基于Tcp/IP之上作用于应用层的协议
无状态

无状态，不保存用户的信息。

由于HTTP协议是无状态的，所有后续出现了一些专门用于记录用户状态的技术

如：Cookie、session、token...
无/短链接

求求一次响应一次，之后就断开链接没有任何联系了。

数据格式

请求数据格式

请求首行（请求方式：（有很多种，列如：get、post），协议名称及版本）

get请求：朝服务端要数据，如输入网址获取对应的内容。

post请求：朝服务端提交数据，列如用户登录，输入账号密码后，提交到服务端校验是否正确。
请求头（内容是一大堆KV键值对组成的信息）
换行符（/r/n）
请求体（内部携带一些敏感的数据。其中不是所有的请求都有请求体的）

响应数据格式

响应首行（内容是响应状态码）

响应状态码，就是用一串简单的数字来标识一些复杂的状态或者描述性的信息

1xx	服务端已经收到你的请求正在处理，可以继续提交或等待
2xx	请求成功后，服务端给出相应的响应，比如常见的（200 OK）
3xx	重定向，通过各种方法将各种网络请求重新顶个方向转到其它位置
4xx	错误类信息，如：403 请求不符合条件、404 请求资源不存在
5xx	服务端内部出现问题

在实际项目种，可能需要更多的响应码，上述常见的响应码是远远不够的。

需要我们自己定义响应码，一般情况下从10000开始。

响应头（内容是一大堆KV键值对组成的信息）
换行符（/r/n）
响应体（一般情况下就是浏览器要展示给用户看的数据）

Html

Html简介

Html是一门超文本标记语言，是所有浏览器展示页面的必备语言。

浏览器展示页面我们也称之为HTML页面，存储HTML语言的文件后缀一般都是.html

注释语法

html注释语法：使用<!--注释内容-->

文件结构

所有的代码都必须写在html标签内部

<!DOCTYPE html>
<html lang="en">
	<head>
    <meta charset="UTF-8">
    <title>Title</title>
        # head 内部的数据一般都不是给用户看的
	</head>

	<body>
    	# body内的数据是展示给用户看的
	</body>
</html>

HTml标签分类

单标签（自闭合标签）， 如：<img/>

双标签，如：<a><a/>...
标签内可以有若干属性，也可以不带
"""跟python对比HTML代码是不讲究缩进的，我们也可以按照Python的缩进语法来写"""

heda内常见标签

常见标签	作用
标题	用于定义网页标题，如网址上面的名字
	可以在其内部编写Css代码
	引入外部JavaScirpt文件
	内部支持编写JavaScirpt代码，还可以通过src属性引入外部JavaScirpt文件
	通过内部属性的不同可以拥有很多功能

<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">

body内基本标签

标签	作用
h1~h6	作用于标题，从一级标题到六级标题
p	段落标，也称之为块级标签
hr	水平分割线
br	换行符
u	下划线
i	斜体
s	删除线
b	加粗

body内基本符号

符号	&nbsp	&gt	&lt	&amp	&yen	&reg	&copy
作用	空格	大于号	小于号	&	￥	注册符号	版权符号

块级标签与行内标签

块级标签：块级标签表示一个标签独占一行，如：h1、p、hr、br

行内标签：行内标签表示内部文本多大自身就占多大，如：u、i、s、b

body内布局标签

div块级标签，span行内标签

块级标签是可以通过css调整为不独占一行的。
标签之间很多时候可以嵌套

块级标签可以嵌套任何类型的标签，p标签虽然是块级标签，但是不能嵌套块级标签只能嵌套行内标签。

body内常见标签

a标签链接标签

href可以填写网址点击自动跳转。

还可以填写其它标签的id值实现锚点功能，

在其内部添加 target控制是否新建页面跳转

_self 在当前标签页中打开目标网页

_blank 在新标签页面中打开目标网页
```

<a target="_blank" href="链接地址"></a>
/*在当前标签页面打开目标网页*/
<a target="_self" href="链接地址"></a>
```
img标签图片标签

src 填写图片地址

title 鼠标悬浮在图片上就会有提示信息

alt 图片加载失败提示的信息

height （调整图片的高度） width （调整图片的宽度）调整一个另一个等比例缩放。
```
<img src="图片链接地址" alt="图片加载失败提示的信息" title="鼠标悬浮上去提示的信息" >
```

标签俩大重要属性

id属性（一对一管理）

类似于身份证号，在同一个html页面上，id不能重复。
class属性（批量管理）

类似于分组，读个标签可以拥有相同的class值

列表标签

无序列表

<ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
</ul>
<!--
列如上述格式
	无序列表会根据type属性，文字前方会加上样式展示
	disc（实心圆点，也为无序列表中默认属性）
	circle（空心圆圈）
	square(实心方块)
	none（无样式）
-->

有序列表

<ol type="I" start="1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
<!--
列如上述格式
	有序列表会根据type属性，文字前方会加上序号展示
	type序号方式，start序号起始位置
	1	数字列表，默认值
	A	大写字母	a	小写字母
	I	大写罗马	i	小写罗马
-->

标题列表

<dl>
	<dt>标题1<dt>
    	<dd>内容</dd>
    <dt>标题2</dt>
    	<dd>内容1</dd>
    	<dd>内容2</dd>
</dl>

表格标签

只要是展示数据一般都可以使用表格标签

一个tr就表示一行

<table>
    <thead>  表头（字段信息）
        <tr>
            <th>序号</th>	加粗文本
            <th>用户名</th>
            <th>密码</th>
        <tr>
    </thead>
    <tbody>  表单（数据信息）
        <tr>
            <td>1</td>   正常文本
            <td>jason</td>
            <td>123</td>
        </tr>
    </tbody>
</table>

<table border="1">  加外边宽
<td colspan="2">egon</td>  水平方向占多行
<td rowspan="2">DBJ</td>   垂直方向占多行

表单标签

能够获取用户输入（输入、选择、上传）的数据并发送给后端服务器
<form action="提交地址" method="post/get"></form>
	action属性
		用于控制数据的提交地址，不写的话就是朝当前页面所在的地址提交method属性 
	method属性
		用于控制请求的方式（get\post）

表单属性

<form action="" method="post">
    <!--input属于行内标签，通过type来增加属性-->
    
   <!-- text:普通文本-->
    <p>username:<input type="twxt"></p>
   <!-- password:密文-->
    <p>password:<input type="password"></p>
   <!-- date:日期	-->
    <p>birthday:<input type="date"></p>
   <!-- email：邮箱-->
    <p>email:<input type="email"></p>

    <p>gender:
       <!-- radio:单选 -->
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
    </p>
    
    <p>hobby：
       <!-- checkbox:多选 -->
        <input type="checkbox" name="hobby">篮球
        <input type="checkbox" name="hobby">篮球
        <input type="checkbox" name="hobby">羽毛球
    </p>
    
    <p>info:
       <!-- file:获取文件  也可以一次性获取多个 -->
    	<input type="file" multiple>
       <!-- textarea标签  获取大段文本 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    <p>province:
        <!--select标签 默认是单选 可以加mutiple参数变多选 默认选中selected-->
        <select name="" id="">
            <option value="">上海</option>
            <option value="">北京</option>
            <option value="">深圳</option>
            <option value="">天津</option>
        </select>
    
    </p>
    	<!-- submit:用来触发form表单提交数据的动作 -->
		<input type="submit" value="提交">
    	<!-- reset:重置内容 -->
    	<input type="reset" value="重置">
    	<!-- button:目前就是一个普通的按钮 本身没有任何的功能 
			但是它是最有用的，学完js之后可以给它自定义各种功能 -->
     	<input type="button" value="普通按钮">
</form>

表单补充

获取用户输入的标签俩大重要属性

name 属性：类似于字典的key

value 属性：类似于字典的值

form表单在朝后端发送数据的时候，标签内必须要有name否则不会发送该标签的值

获取用户输入的input标签理论上需要有lable配合使用

<label></label>
<!--示例：-->
	<label> for="某个input标签的id值"</label>

获取用户输入的input标签也可以添加背景提示

<input type="text" name="password" placeholder="标签内部提示信息">

获取用户输入的标签如果不是让用户自己写而是选择那么标签需要自己写value

<input type="radio" name="gender" value="male">男
   <input type="checkbox" name="hobby" value="basketball">篮球
	<select name="province" id="">
            <option value="sh">上海</option>
   </select>

针对radio和checkbox可以默认选中

checked="checked" 如果属性名和属性值相等那么可以简写 checked
针对option标签也可以默认选中

selected="selected" 简写为 selected

posted @ 2022-08-25 05:32 瓮小辉阅读(112) 评论(0) 收藏举报

刷新页面返回顶部

wengxiaohui