前端基础之HTML

  • HTML简介
  • HTML基本标签
  • HTML常用符号
  • HTML常用标签
  • 列表标签
  • 表格标签
  • 表单标签
  • form表单(很重要)
  • 初窥后端框架

HTML简介

HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成

HTML:超文本标记语言

# 不是一门编程语言 没有任何的逻辑 只有固定的标记功能

"""

HTML标签的分类

	1.双标签(有头有尾)

		<a></a>

	2.自闭合标签(单标签)

		<img/>

"""

# HTML文档结构

	<html>

  	<head>编写给浏览器查看的内容</head>

    <body>编写展示给用户查看的内容</body>

  </html>

  '''在使用编程工具创建的时候就会自动编写文档结构'''

# HTML语法注释

	<!--单行注释-->

  <!--

  多行注释

  多行注释

  -->

  '''在编写的时候 编程工具也有注释快捷键 ctrl+?'''

如何创建及展示

"""

存档网页骨架的文件后缀名一般都是.html

	该类型文件主要的打开方式为浏览器形式

"""

1.以pycharm为例

	右键new点击HTML FILE创建即可

2.如何打开展示

	右上方会提供多种浏览器(注意需要提前下载)

# 编写HTML标签的时候 不需要自己写大括号小括号 只需要写标签名称+tab键即可自动补全(所有支持编写html文件的工具内部自带的插件语法功能)

head内常见标签

title		定义网页标题

style		内部支持css代码

script	内部支持编写js代码 还可以通过src属性导入外部js文件

link		通过href属性引入外部的css文件

meta		定义网页源信息

					keywords关键字搜索

  				description网页描述信息

"""

在html文件中 可以编写html和css以及js

	但是实际工作中三者其实是分开存放的 这样有利于后期维护和扩展

"""

body内基本标签

h1~h6	标题标签

p			段落标签

b			加粗

i			斜体

u			下划线

s			删除线

br		换行

hr		水平分割线

"""有时候相同的样式 可能有多种标签可以实现!!!"""

标签分类

	分类1:单双标签

  分类2:

    	块儿级标签		h1~h6 p

      	独占一行(后期可以通过css实现不占一行)

      行内标签		u i s b

      	自身文本多大就占多大

特殊符号

&nbsp;		空格

&gt;			大于号

&lt;			小于号

&amp;			&符号

&yen;			羊角符

&copy;		版权符

&reg;			注册

常见标签

# 网页在制作之前需要提前布局好

布局标签

	div			块儿级标签

  span		行内标签

"""

标签是可以嵌套的 但是需要遵循以下规律

	块儿级标签 可以无限制的嵌套块儿级标签和行内标签

		特例:p标签虽然是块儿级标签但是也不能嵌套块儿级标签

	行内标签不能嵌套块儿级标签 可以嵌套行内标签

知识点扩展

	页面布局的技巧

		先用div划分区域 之后再考虑填充具体内容

			可以参考小米官网练习该技巧

"""

1.a标签>>>:链接标签

  	用法1:通过href属性指定网址(URL)点击跳转

      	跳转过程中有两种方式

        	1.当前页面跳转	target="_self"  默认

          2.新建页面跳转	target="_blank"

    用法2:锚点功能

      	通过href属性指定标签的id值点击即可跳转到对应位置

"""

网址其实并不是一个非常专业的名词

	URL:统一资源定位符

"""

2.img标签>>>:图片标签

  src属性指定图片地址

  	可以是本地的地址也可以是网络上的地址

 	alt属性编写文本

  	用于在图片无法加载出来的情况下的提示信息

  title属性写文本

  	用于鼠标悬浮在图片上之后提示的文本信息

  height、width属性写像素

  	用于调整图片的尺寸

    	需要注意调整的时候 修改一个另外一个自动等比例缩放

      如果同事调整两个 那么可能会造成图片的失真

标签的两大重要属性

1.id属性		个体查找

	类似于标签的身份证号 在同一个html页面上id不能重复

2.class属性	群体查找

	类似于python面向对象中的类的继承

  	可以将多个标签划为一类

    	<h1 class='c1'></h1>

      <p class='c1'></p>

    并且一个标签可以有很多类

    	<h1 class='c1 c2 c3'></h1>

      <p class='c1 c8 c9'></p>

列表标签

1.无序列表(掌握)

	# 前面没有用于标识数字顺序的提示

	<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

	</ul>

  """

  网页上有规则排列的多个横向或者竖向内容 几乎都是无序列表

  	要想实现需要css相关知识

  """

2.有序列表(了解)

	<ol>

    <li>111</li>

    <li>222</li>

    <li>333</li>

	</ol>

3.标题列表(了解)

	<dl>

    <dt>标题1</dt>

      <dd>内容1</dd>

    <dt>标题2</dt>

      <dd>内容1</dd>

      <dd>内容2</dd>

	</dl>

表格标签

# 当需要展示一些具体固定格式的多条数据的时候可以考虑使用(excel)

# 表格标签的格式

	<table>

    <thead></thead>     表头

    <tbody></tbody>     表单

	</table>

# tr标签

	tr就表示一行

# th标签

	在表头的字段名称

# td标签

	普通的单元格数据

<table>

    <thead>

        <tr>

            <th>姓名</th>

            <th>密码</th>

            <th>年龄</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>jason</td>

            <td>123</td>

            <td>18</td>

        </tr>

    </tbody>

</table>

"""我们只需要掌握最基本的html标签即可 至于花里胡哨的样式后面学习完前端框架之后  直接cv拷贝即可 都是别人提前写好的"""

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素 百分比.（最好通过css来设置长宽）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

form表单(很重要)

# form表单:获取用户的数据并发送给后端(服务端)

	eg:网站的登录、注册、验证码...

'''以注册页面为例'''

1.获取用户数据最为常用的标签就是input标签并且该标签是行内标签

	input标签是前端标签里面的变形金刚

  	通过type参数的不同变换不同的表现形式

    	text			普通文本

      password	密码展示

      date			日历展示

      radio			单选>>>:多个选项标签需要有相同的name属性

        				默认选中需要额外配置checked='checked'

          			当属性名与属性值相等的时候可以简写checked

      checkbox	多选>>>:默认选中也是checked属性

      email			邮箱格式

      file			上传文件>>>:默认只支持单个文件

        				如果需要一次性上传多个需要额外配置multiple

     	submit		提交按钮>>>:点击出发提交数据的动作

      button		普通按钮>>>:本身没有任何功能 需要绑定(JS)

      reset			重置按钮

      	按钮组的提示信息可以通过value属性自定义，如果不自定义那么不同的浏览器可能会展示出不同的提示信息 尤其是submit按钮

  select标签是下拉框选项

  		一个个选项就是一个个option标签 默认是单选也可以变为多选

    		multiple

  textarea标签

  		获取大段文本内容

2.直接编写input会出现黄色阴影，原因在于input需要结合lable一起使用

	方式1:lable包裹input并绑定id

    	<label for='input标签id值'>input标签</label>

  方式2:label与input单独出现并绑定id

    	<label for="d1">username:</label>

      <input type="text" id="d1">

3.form表单提交数据

	数据的提交地址由form表单的action参数来控制

  	action="URL"

    	# 不写默认朝当前页面所在的地址提交

    method="数据的提交方式"

    	# 数据的提交方式有很多种 这里先忽略(后续讲解)

      	get post put delete patch...

"""

form表单在提交数据的时候 如果含文件则需要指定两个固定参数

	method='post'

	enctype="multipart/form-data"

"""

初次体验前后端交互

# 代码无需掌握 只看效果即可

"""后端框架:可以简单的理解为别人写好的一个非常牛逼的TCP服务端"""

以flask框架为例>>>:第三方框架 pip3 install flask

前端通过标签获取用户数据发送给后端的过程中 标签需要有name属性

	相当于字典的key

 	用户输入的数据会存储到标签的value属性中 相当于字典的value

  	如果是选择型标签需要自行加上name和value

from flask import Flask,request

app = Flask(__name__)

@app.route('/index/',methods=['GET','POST'])

def index():

    print(request.form)  # 获取普通数据

    print(request.files)  # 获取文件数据

    # print(request.form.get('name'))

    file_obj = request.files.get('file')  # 获取文件对象

    file_obj.save('xxx.md')  # 保存文件

    return 'flask框架真简单'

app.run()

尾语

学习前端没有捷径就是多练多记

01 前端基础之HTML的更多相关文章

  1. 01: tornado基础篇

    目录:Tornado其他篇 01: tornado基础篇 02: tornado进阶篇 03: 自定义异步非阻塞tornado框架 04: 打开tornado源码剖析处理过程 目录: 1.1 Torn ...

  2. day--42 前端基础小结

    前端基础总结 一:前端实现的原理: 小实例: 01:第一步:创建一个socket服务端: import socket server=socket.socket() ip_port=("127 ...

  3. 02 前端基础之CSS

    目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...

  4. 前端基础问题整理-HTML相关

    DOCTYPE的作用以及常见的DOCTYPE类型 <!DOCTYPE>声明位于文档中的最前面的位置,处于 <html> 标签之前,用来告知浏览器页面目前的文件是用哪种版本的HT ...

  5. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  6. html css 前端基础 学习方法及经验分享

    前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...

  7. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  8. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  9. 前端基础之DOM和BOM

    前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...

随机推荐

  1. Linux设置新的服务器登录端口

    root用户登录服务器 22端口修改为22525,22端口也打开,以防新端口设置有问题,登录不上服务器 向防火墙中添加修改的端口 systemctl start firewalld firewall- ...

  2. Java 单引号 与 双引号 区别

    双引号,用来引用字符串, 单引号用来表示单个字符.

  3. js跨域请求解决方案

    什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.&l ...

  4. Python常用功能函数系列总结（三）

    本节目录 常用函数一:词频统计 常用函数二:word2vec 常用函数三:doc2vec 常用函数四:LDA主题分析 常用函数一:词频统计 # -*- coding: utf-8 -*- " ...

  5. Go语言系列之标准库ioutil

    ioutil标准库中提供了一些常用.方便的IO操作函数 一.相关方法 func ReadAll(r io.Reader) ([]byte, error) func ReadDir(dirname st ...

  6. 强化学习实战 | 自定义gym环境之显示字符串

    如果想用强化学习去实现扫雷.2048这种带有数字提示信息的游戏,自然是希望自定义 gym 环境时能把字符显示出来.上网查了很久,没有找到gym自带的图形工具Viewer可以显示字符串的信息,反而是通过 ...

  7. [转]Vue之引用第三方JS插件

    1.绝对路径引入,全局使用. 在index.html文件中使用script标签引入插件. 该种方式就是上面演示ckplayer插件使用的方式. 备注: 这种方式的引用,会在开启ESLint时,报错,可 ...

  8. rocketmq学习之-基本样例

    1 基本样例 在基本样例中我们提供如下的功能场景: 使用RocketMQ发送三种类型的消息:同步消息.异步消息和单向消息.其中前两种消息是可靠的,因为会有发送是否成功的应答. 使用RocketMQ来消 ...

  9. JuiceFS v1.0.0 Beta1 发布，加强数据安全能力

    在 JuiceFS 开源一周年之际,我们迎来了首个里程碑版本 JuiceFS v1.0.0 Beta1,并将开源许可从 AGPL v3 修改为 Apache License 2.0. JuiceFS ...

  10. 【初体验】macos下android ndk交叉编译hello world，并拷贝到android手机上执行

    1.机器上以前安装了java 1.8(貌似android ndk不需要java) 2. 下载android ndk,版本是android-ndk-r14b (比较奇怪,我下载了最新的android-n ...