HTML标签---学习笔记
第一章
HTML标准结构学习:
顶层标签:html
投标签:head
主题标签:boby
<html>
<head>
<meta charset="utf-8" />
<title>HTML结构学习</title>
</head>
<body>
hello world!
</body>
</html>
第二章
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> <!--告诉网页使用指定的编码格式-->
<title>HTML结构学习</title>
<meta name="keywords" content="HTML,JSDX,DZY,555" /> <!--网页关键字-->
<meta name="description" content="本篇博客是关于HTML标签的学习哟,超级棒!!!" /> <!--网页描述-->
<meta name="author" content="DZY" /> <!--网页作者-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" /> <!--网页5秒后自动跳转到百度-->
</head>
<body>
hello world!
</body>
</html>
第三章
标题标签:
h1到h6:会将其中的数据加粗加黑显示,并且显示依次减弱,标题标签自带换行功能(块级标签)
属性:
align:center、left、right
水平线标签:
hr:会在页面中显示一条水平线
属性:
width=“宽度” 设置水平线的宽度
size=“高度” 设置水平线的高度
color=“颜色” 设置水平线的颜色
段落标签:
p:会将一段数据作为整体进行显示,主要进行css和js操作时比较方便,会自动换行(块级标签)
特点:段间距比较大
换行符:
br:告诉浏览器需要在此位置换行
空格符:
 ;:告诉浏览器在此位置增加空格
权重标签:
b:会将内容加黑显示
i: 会将内容斜体显示
u:会将内容增加下划线
del:会将内容增加中划线
以上这些不会换行,并却可以嵌套使用。
注意:
1 标签的属性是对标签功能进一步的补充,可以由开发人员自由指定标签的属性值,来达到想要的显示效果。
2 像素单位占据的是电脑屏幕的大小,百分比占据的浏览器窗口的大小。
第四章
列表标签:
无序列表:
ul:
li:在该标签中书写列表内容,一个li标签代表列表中的一行数据
特点:默认数据前有一个黑圆圈符号
有序列表:
ol:
li:在该标签中书写列表内容,一个li标签代表列表中的一行数据
特点:会自动给列表进行顺序编码,格式从小到大并且时连续的
属性:
type:可以改变顺序编码的值,可以时1 a A等,默认使用阿拉伯数字进行顺序编码
自定义列表:
dl:
dt:数据的标题
dd:数据的具体内容,一个dd表示一条数据
第五章
图片标签:
img:
src:图片路径
本地资源路径:一般本地资源使用相对路径即可
width:设置图片的宽度,如果时单独设置,则再对图片保证不失真的情况下自动缩小或者放大
单位可以时px也可以时百分比
height:设置图片的宽度,如果时单独设置,则再对图片保证不失真的情况下自动缩小或者放大
单位可以时px也可以时百分比
title:图片标题,鼠标放在图片上面的时候会显示
alt:图片加载失败后的提示语
注意:图片是不会自动换行的(行内元素)
注意:
相对路径:从当前文件出发查找另一个文件所经过的路径
绝对路径:从跟盘符出发所查找文件的路径
第六章
超链接标签:
a:
href:要跳转的网页资源路径
本地资源:相对路径
网络资源:网络资源(网页)的URL
target:指明要跳转的网页资源的显示位置
_self 在当前页中刷新显示
_blank 在新的标签页中显示
_top 在顶层页中显示
_parent 在父级页面中显示
注意:
超链接标签中一定要声明访问方式,访问方式可以是文字也可以是图片
锚点:
作用:在一张网页中进行资源跳转
使用:
先使用超链接标签在指定的网页位置增加锚点,格式:
<a name="#锚点名" >访问方式</a>
使用a标签可以跳转指定的锚点,达到网页内部资源跳转的目的,格式:
<a href="#锚点名" >访问方式</a>
第七章
表格标签:
table:声明一个表格
tr:声明一行,设置行高及行所有单元格的高度
th:声明一个单元格,表头格,默认居中加黑显示
td:声明一个单元格,默认居左原始数据
注意:
行高即改行所有单元格的宽度
单元格的宽度即列宽
属性:
border:给表格添加边框
width:设置表格的宽度
height:设置表格的高度
cellpadding:设置内容居边框的距离
cellspacing:设置边框的大小
特点:
默认根据数据的多少进行表格的大小显示
单元格合并:
第一步:
首先确保表格是一个规整的表格
第二步:
根据要合并的单元格,找到其所在的源码位置
第三步:
行合并:在要合并的单元格的第一个单元格上使用属性rowspan=:"要合并单元格的个数“,并删除其他要合并的单元格完成合并
列合并:在要合并的单元格上使用属性colspan="要合并单元格的个数",并删除合并的其他单元格
第八章:
内嵌标签:
iframe:
src:要显示的网页资源路径
可以是本地(相对路径)也可以是网络资源(URL)
注意:
默认当前页面打开及加载src指向的资源
width:设置显示区域的宽度
height:设置显示区域的高度
name:设置内嵌区域的名字,结合超链接标签的target属性使用
作用:
在当前网页中加载其他网页的资源,达到不同网页资源之间不互相干扰,并能在同一个页面中展现给用户的目的
框架标签:
注意:
第一步一定要删除boby标签
frameset:
属性:
rows:按照行进行切分页面
cols:按照列进行切分页面
子标签:
frame:进行切分区域的占位,一个frame可以单独加载网页资源
src:资源路径(本地或者网络)
name:区域名,结合超链接使用
第九章:
表单标签:
form:
作用:收集并提交用户数据给指定服务器
属性:
action:收集的数据提交地址也就是URL
method:收集的数据的提交方式
get:适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全
post:适合大量数据,安全,隐式提交
注意1:
form标签会收集其标签内部的数据
注意2:
表单数据提交,要提交的表单项必须拥有name属性值,否则不会提交。
提交的表单项数据为键值对,键位name属性的值,值位用户书写的数据。
注意3:
form表单标签的数据提交需要依赖于submit提交按钮。
表单域标签:
作用:给用户提供可以进行数据书写或者选择的标签
使用:
文本框:
input:
type:
text:收集少量的文本数据,用户可见
password:收集用户密码数据
name:数据提交的键,也会被js使用
value:默认值
单选框:
imput:
type:
radio
name:name属性相同的单选框之恶能选择一项数据
value:要提交的数据
checked:checked使用此属性的单选默认是选择状态
多选框:
input:
type:
checkbox
name:一个多选组需要使用相同的name属性值
value:要提交的数据
checked:checked使用此属性的单选默认是选择状态
单选下拉框:
select:
name 数据提交的键名,必须声明
子标签:
option:一个option标签表示一个下拉选项
value:要提交的数据
文本域:
textarea:声明一个可以书写大量文字的文本区域
name:数据提交的键名,js和css也会使用
rows:声明文本域的行数
cols:声明文本域的列数
普通按钮:
input:
type:
hidden
value:按钮的名字
注意:表单数据提交提交的是表单域标签的value值
在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式提交给action属性所指明的提交地址。
HTML标签---学习笔记的更多相关文章
- 基本STRUTS标签-学习笔记-Bean标签
<bean:include> 和标准的JSP标签<jsp:include>很相似,都可以用来包含其他Web资源的内容,区别在于<bean:include>标签把其它 ...
- 基本STRUTS标签-学习笔记-Logic标签
BEAN标签(name 是从别处得来的:id是自己的,相当于变量:property相当于变量的值) 前提: String str=request.getParameter("param&qu ...
- struts2标签学习笔记(一)
struts2所有标签都定义在一个s标签库里.虽然struts2把所有的标签都定义在URI为"/struts-tags"空间下,但依然可以对struts2标签进行简单的分类. 1. ...
- html常用标签学习笔记
本文内容: 前言:本文讲述的内容包括几类常用标签,以及这些标签的一些常用属性(有一些属性由于已经有CSS样式来代替,所以对于一些不重要的这里选择不讲) 排版标签 段落标签:p div span 标题标 ...
- HTML5标签学习笔记
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="con ...
- Html标签学习笔记二
1.常用标签 <a></a>超链接 功能 做链接 :在href属性里面写明指向的地方 做下载:href指向文件(注意:不能下载的文件是因为浏览器可以直 ...
- ASP.NET MVC学习笔记-----Filter
ASP.NET MVC学习笔记-----Filter(1) Filter类型 接口 MVC的默认实现 Description Authorization IAuthorizationFilter Au ...
- [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- [原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
随机推荐
- C#基础--Virtual与abstract区别、重写
Virtual作用:子类可以对父类重写,虚方法是对多态特征体现.代表一类对象的所具有的公共属性或方法. public class Animal { public string Name { get; ...
- XML文件解析之SAX解析
使用DOM解析的时候是需要把文档的所有内容读入内存然后建立一个DOM树结构,然后通过DOM提供的接口来实现XML文件的解析,如果文件比较小的时候肯定是很方便的.但是如果是XML文件很大的话,那么这种方 ...
- graph Laplacian 拉普拉斯矩阵
转自:https://www.kechuang.org/t/84022?page=0&highlight=859356,感谢分享! 在机器学习.多维信号处理等领域,凡涉及到图论的地方,相信小伙 ...
- 三星Q470c Logo界面无限掉电重启,变砖后的挽救过程
背景 三星笔记本的部分型号如:NP530 Q470等 安装win8后再次重装系统(我弄了个Ubuntu18)会导致无法进入BIOS菜单页面的问题.启动显示logo页面后,能够听到明显啪的一声(硬盘掉电 ...
- 一个页面,WEB全功能
当鼠标在页面上往下滑动的时候,页面也一直向下,标签也顺带着全部向下滑动 以前浏览页面,主要是在PC上进行浏览,一个页面不适于太长,需要用户向下拖动: 当时的设计是,点击标签,点击不同的标签,跳转到不同 ...
- How Many Answers Are Wrong(带权并查集)
题目 带权并查集的博客~ 题目: 多组输入数据.n,m.你不知道[1,n]内任意区间内值的和. m次询问,a b 是端点,都在n的范围以内 : v表示 [a,b]的区间内值的和.对每次询问,判断v是否 ...
- 【python】使用xlrd,xlwt来操作已存在的excel表
import xlrd import xlwt from xlutils.copy import copy # 打开想要更改的excel文件 old_excel = xlrd.open_workboo ...
- 大数据之路week02 List集合的子类
1:List集合的子类(掌握) (1)List的子类特点 ArrayList: 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高. Vector: 底层数据结构是数组,查询快,增删慢. 线程安 ...
- 一、vue基础--语法
用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...
- v-model原理解析
vue中v-model可以实现数据的双向绑定,但是为什么这个指令就可以实现数据的双向绑定呢? 其实v-model是vue的一个语法糖.即利用v-model绑定数据后,既绑定了数据,又添加了一个inpu ...