1、前端--HTML简介、head内常见标签、body内常见标签（特殊符号、div、span、a、img、列表、表格table、表单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
自身文本多大就占多大
特殊符号
空格
> 大于号
< 小于号
& &符号
¥ 羊角符
© 版权符
® 注册
常见标签：div、span、a、img
# 网页在制作之前需要提前布局好
布局标签
div 块儿级标签
span 行内标签
"""
标签是可以嵌套的 但是需要遵循以下规律
1、块儿级标签 可以无限制的嵌套块儿级标签和行内标签
特例:p标签虽然是块儿级标签但是也不能嵌套块儿级标签
2、行内标签不能嵌套块儿级标签 可以嵌套行内标签
知识点扩展
页面布局的技巧
先用div划分区域 之后再考虑填充具体内容
可以参考小米官网练习该技巧
"""
1.a标签:链接标签
用法1:通过href属性指定网址(URL)点击跳转
跳转过程中有两种方式
1.当前页面跳转 target="_self" 默认
2.新建页面跳转 target="_blank"
用法2:锚点功能
通过href属性指定标签的id值点击即可跳转到对应位置
"""
网址其实并不是一个非常专业的名词
URL:统一资源定位符
"""
2.img标签:图片标签
1、src属性指定图片地址
可以是本地的地址也可以是网络上的地址
2、alt属性编写文本
用于在图片无法加载出来的情况下的提示信息
3、title属性写文本
用于鼠标悬浮在图片上之后提示的文本信息
4、height、width属性写像素
用于调整图片的尺寸
注意：调整的时候 修改一个另外一个自动等比例缩放
如果同事调整两个 那么可能会造成图片的失真
5、在外面套a标签：点击图片可以跳转a标签href属性对应地址
列表标签
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一起使用
label标签作用：点击内部文本可以跳转输入框内
方式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"
"""
标签的两大重要属性
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.学习前端没有捷径就是多练多记
2.整理今日内容并编写博客
1、前端--HTML简介、head内常见标签、body内常见标签（特殊符号、div、span、a、img、列表、表格table、表单form）、标签两大属性的更多相关文章
- HTML中的表单<form>标签
一.HTML表单 HTML 表单用于搜集不同类型的用户输入. HTML 表单包含表单元素,表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等. 关于表单的更多内容可以参考htt ...
- 前端开发-4-HTML-table&form&表单控制 标签
1.table标签 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=" ...
- 前端与后台可能需要使用交互的表单form，input标签
前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...
- HTML的基本操作学习----常用标签，特殊符号，列表，表格，表单
什么是HTML 常用标签 标题标签 段落标签 粗体标签+斜体 超链接标签 图片标签 列表标签 无序标签 有序标签 自定义列表 div标签 特殊符号 表格 表单 HTML 什么是 HTML? HTM ...
- web（四）html表单类标签
表单类标签 操作者用于输入信息,并将信息提交给服务器的标签集合. 表单标签介绍 form标签:表单元素(其余标签)标签的容器标签 input标签:用于用户信息输入的标签. button标签:按钮标签. ...
- 12种炫酷HTML5 SVG和CSS3表单浮动标签特效
这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...
- html表单相关标签及属性
1.<form>标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式,一般有“get”方式和“post”方式 2.<label> ...
- 框架，表格，表单元素，css基础以及基本标签的结合
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单
netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...
- HTML表单提交标签
<form>表单提交标签,设置提交范围 有name属性才能被提交 action:提交的地址url method:提交方式 get方式(默认):会将参数拼接在连接后,有大小限制(4k) po ...
随机推荐
- post请求后获取不到请求头信息的原因
在前台获取数据时,因为没有条件,所以不用传数据,用的post请求.再添加token验证时想着前端在请求时直接添加一个请求头信息就ok 没想到后台却获取不到请求头信息,打印了下日志发现是null,这是怎 ...
- nginx 配置 ^~ 的用法妙处，403阻断
看看这个 location /css/ { alias D:/我的项目/2-代码/express/src/main/resources/static/css/ ; } 咋一看貌似没有毛病,访问 htt ...
- spring security +MySQL + BCryptPasswordEncoder 单向加密验证 + 权限拦截 --- 心得
1.前言 前面学习了 security的登录与登出 , 但是用户信息 是 application 配置 或内存直接注入进去的 ,不具有实用性,实际上的使用还需要权限管理,有些 访问接口需要某些权限才可 ...
- 第10组-Alpha冲刺 总结
1.基本情况 组长博客链接:https://www.cnblogs.com/cpandbb/p/14007413.html 答辩总结: ·产品偏离了最开始的方向,地图和刷一刷功能做得没那么好,外卖订单 ...
- Hive的连接和运行模式
原文链接: https://www.toutiao.com/i6771018203687551495/ Hive的连接 启动hadoop的时候将history也启动,如果出问题,可以方便我们后续定位 ...
- go包管理速通，一篇文章就够了，再也不用担心因为不会导包被辞退
前言 最近在看一些go语言相关的书,发现了一个有意思的事情:其中一本书最新印刷的版本是2017年3月,而golang包管理的后起之秀go module伴随go1.11于2018年8月诞生--因此,书里 ...
- leetcode 120. 三角形最小路径和 及 53. 最大子序和
三角形最小路径和 问题描述 给定一个三角形,找出自顶向下的最小路径和.每一步只能移动到下一行中相邻的结点上. 例如,给定三角形: [ [2], [3,4], [6,5,7], [4,1,8,3] ] ...
- 基于World Wind的数据可视化插件
基于开源数据可视化类库(MSChart.VTK.D3)实现的组件样例,并基于World Wind实现调用上述组件的功能插件. GitHub下载地址:https://github.com/hujiuli ...
- 给自己的网站装上SSL证书
给网站装上SSL证书 前言 主要是因为自己的阿里云快过期了,自己的博客也重新用了一下Halo,重新安装SSL的时候有些地方忘了,所以在此留个记录! 关于SSL 阮一峰<图解图解SSL/TLS协议 ...
- ServletContext接口
Servlet 容器启动时,会为每个 Web 应用(webapps 下的每个目录都是一个 Web 应用)创建一个唯一的 ServletContext 对象,该对象一般被称为"Servlet ...