前端基础之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. 转雅虎web前端网站优化 34条军规

    雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文 1.Minimize HTTP Requests 减少HTTP请求 图片.css.sc ...

  2. docker的安装以及使用命令

    docker的安装 安装docker https://docs.docker.com/install/linux/docker-ce/centos/#set-up-the-repository 从 2 ...

  3. 局域网内部怎么安全接入U盘？

    准备工具: 内部专用U盘一个: 能连接外网的电脑(暂称"安全机")一个. 第一.安全机上安装360杀毒.360安全卫士或其它安全软件.并经常更新病毒库.木马库. 第二.外来U盘先通 ...

  4. Android一句话 | ViewGroup事件分发

    ViewGroup中可重写的关于事件分发的事件有dispatchTouchEvent,onTouchEvent,onInterceptTouchEvent和requestDisallowInterce ...

  5. 《剑指offer》面试题64. 求1+2+…+n

    问题描述 求 1+2+...+n ,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 示例 1: 输入: n = 3 输出: 6 示 ...

  6. ros实例_百度语音+图灵

    1 百度语音模块 参考http://blog.csdn.net/u011118482/article/details/55001444 1.1 百度语音识别包 git clonehttps://git ...

  7. 与Elasticsearch交互的客户端

    1.访问ES的方式 访问es的方式有两种,一种是http方式,还有一种是java客户端方式. 其中Java客户端又分为:1.1.Node client: 节点客户端实际上是一个集群中的节点(但不保存数 ...

  8. NTT 快速数论变换

    NTT 先学习FFT 由于FFT是使用复数运算,精度并不好,而且也无法取模,所以有了NTT(快速数论变换). 建议先完全理解FFT后再学习NTT. 原根 NTT使用与单位根性质相似的原根来代替单位根. ...

  9. POSIX之共享内存

    shm_write.c: #include<stdio.h> #include<stdlib.h> #include <stdlib.h> #include < ...

  10. 用socket写一个简单的服务器

    import socketsk=socket.socket()sk.bind(("127.0.0.1",7001))sk.listen()def login(url): with ...