文档章节

HTML

Scalpel-21
 Scalpel-21
发布于 2016/12/01 09:52
字数 2345
阅读 6
收藏 0

#html的简介

#  什么是html?
    HyperText Markup Language:超文本标记语言,网页语言
    超文本:超出文本的范畴,使用html可以轻松实现这样的操作
    标记:html所以的操作都是通过标记实现的,标记就是标签,<标签名称>
    网页语言:
    第一个html程序
      创建java文件.java
        先编译,然后再运行(jvm)
        html后缀是.html  .htm
        直接通过浏览器就可以运行

html的规范

 1.一个html文件开始标签和结束的标签 <html> </html>
   定义一个java方法 { }
 2.html包含两部分内容
   (1)<head>设置相关信息</head>
   (2)<body>显示在页面上的内容都写在body里面</body>
 3.html的标签有开始标签,也有结束标签
 <head> </head>
 4.html的代码不区分大小写的
 5.有些标签,没有结束标签,在标签内结束
   比如 换行 <br/>  单线<hr/>

##html的操作思想

网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签吧要操作的数据包起来(封装起来)

通过修改标签的属性值实现标签内数据样式的变化。

一个标签相当于一个容器,想要修改容器内数据的样式,只需要改变容器的属性值,就可以实现容器内数据样式的变化

#html中常用的标签 ##1、文字标签和注释标签

   文字标签:修改文字的样式
 <font></font>
 属性:
     size:文字的大小  取值范围 1-7,超出了7,默认是7
	 color:文字颜色
	   两种表示方式:
	     英文单词:red  green  blue  black  white  yellow  gray ...
		 使用十六进制数表示 #ffffff : RGB
		   通过工具实现不同颜色#00ff33

 注释标签:
   html的注释:<!-- html的注释 -->

##2、标题标签、水平线标签和特殊字符 标题标签 <h1></h1> <h2></h2> <h3></h3> ......<h6></h6> 从h1到h6,大小是依次变小的,同时会自动换行

水平线标签
	<hr/>
	属性
		size:水平线的粗细 取值范围 1-7
		color:颜色
	代码:<hr size="5" color="blue"/>

特殊字符
	想要在页面上显示这样的内容 <html>:是网页的开始
	需要对特殊字符进行转义
		<  :  &lt;
		>  :  &gt;
		空格:&nbsp;
		&: &amp;

3、列表标签

比如现在显示这样的效果
		财务部
		学工部
		人事部
<dl></dl>:表示列表的范围
	在dl里面 <dt></dt>:上层内容
	在dl里面 <dd></dd>:下层内容
代码
	<dl>
		<dt>传智播客</dt>
		<dd>财务部</dd>
		<dd>学工部</dd>
		<dd>人事部</dd>
	</dl>

想要在页面上显示这样的效果
1.财务部
2.学工部
3.人事部

a.财务部
b.学工部
c.人事部

i.财务部
ii.学工部
iii.人事部

<ol></ol>:有序列表的范围
	属性 type:设置排序方式 1(默认) a  i
	在ol标签里面<li>具体内容</li>
代码
	<ol>
		<li>财务部</li>
		<li>学工部</li>
		<li>人事部</li>
	</ol>

想要在页面上显示这样的效果
	特殊符号(方框)财务部
	特殊符号(方框)学工部

	<ul></ul>:表示无序列表的范围
		属性:type:空心圆circle  实心圆disc  实心方块square  默认disc
		在ul里面 <li></li>
	代码
		<ul>
			<li>财务部</li>
			<li>学工部</li>
			<li>人事部</li>
		</ul>

##4、图像标签 <img src="图片的路径"/> src:图片的路径 width:图片的宽度 height:图片的高度

	alt:图片上显示的文字,把鼠标移动到图片上,停留片刻显示内容
		有些浏览器下不显示(没有效果)

##5、路径的介绍 分类:绝对路径 、 相对路径

##6、超链接标签 链接资源 <a href="连接到资源的路径"> 显示在页面上的内容</a> href:链接的资源的地址 target:设置打开的方式,默认是在当前页面打开 blank:在一个新窗口打开 self:在当前页打开 默认 当超链接不需要到任何的地址 在href里面加# <a href="#">这是一个超链接2</a>

定位资源
	如果想要定位资源:定义一个位置
		<a name="top">顶部</a>
		回到这个位置
		<a href="#top">回到顶部</a>

		引入一个标签pre: 原样输出

##7、表格标签(重要的标签) 可以对数据进行格式化,使数据显示更加清晰

<table></table>:表示表格的范围
	border:表格线
	bordercolor:表格线颜色
	cellspacing:单元格直接的距离
	width:表格的宽度
	height:表格的高度

	在table里面<tr></tr>
		设置对齐方式 align: left  center  right

		在tr里面<td></td>
		设置显示方式 align: left  center  right

		使用th也可以表示单元格
		表示可以实现居中和加粗

	代码
		<table border="1" bordercolor="red" cellspacing="0" width="300" height="200">

	画图分析表格的写法
		首先定义一个表格的范围使用table
			定义一行使用 tr
			定义一个单元格使用 td
	操作技巧:
		首先数有多少行,数每行里面有多少个单元格

	表格的标题
		<caption></caption>
	
	合并单元格
		rowspan:跨行

		colspan:跨列
			<td colspan="3">人员信息</td>

##8、表单标签(重点要会) 可以提交数据到开心网的服务器,这个过程可以使用表单标签实现

<form></form>:定义一个表单的范围
属性
	action:提交到地址,默认提交到当前页面
	method:表单提交方式
		常用的有两种:get和post,默认的是get请求

面试题:get和post区别

1、get请求地址栏会携带提交的数据,post不会携带(在请求体里面)

2、get请求安全级别较低,post较高

3、get请求数据大小的限制,post没有限制

enctype:一般请求下不需要这个属性,做文件上传时需要设置这个属性

输入项:可以输入内容或者选择内容的部分

	大部分输入项使用 <input type="输入项的类型"/>

	**再输入项里面需要有一个name属性**

	普通输入项:<input type="text"/>
	密码输入项:<input type="password"/>
	单选输入项:<input type="radio"/>
		在里面需要属性 name
		name的属性值必须要相同
		必须有一个value值

		实现默认选中的属性
		checked="checked"

		复选输入项:<input type="checkbox"/>
		在里面需要属性 name
		name 的属性值必须要相同
		必须有一个value值

		实现默认选中的属性
		checked="checked"

		文件输入项(在后面上传时用到)
		<input type="file"/>

		下拉输入项(不是在input标签里面的)
		<select name="birth">
			<option value="1991">1991</option>
			<option value="1992">1992</option>
			<option value="1993">1993</option>
		</select>

		实现默认选中的属性
		selected="selected"

		文本域
		<textarea cols="10" rows="10"></textarea>

		隐藏项(不会显示在页面上,但是存在于html代码里面)
		<input type="hidden"/>

		提交按钮
		<input type="submit"/>
		<input type="submit" value="注册"/>

		使用图片提交
		<input type="image" src="图片路径"/>

		重置按钮:回到输入项的初始状态
		<input type="resrt"/>

		普通按钮
		<input type="button" value=""/>

案例:使用表单标签实现注册页面

使用表格实现页面效果
超链接不想要他有效果 href="#"
如果表格里面的单元格没有内容,使用空格作为占位符 &nbsp;
使用图片提交表单 <input type="image" sr="图片的路径"/>

##9、html中的其他的常用标签的使用 b:加粗 s:删除线 u:下划线 i:斜体

<br/>:换行
<hr/>:分割线

pre:原样输出

sub:下标
sup:上标

p:段落标签 比br标签多一行

##10、html的头标签的使用 html两部分组成 head和body

在head里面的标签就是头标签

title标签:表示在标签上显示的内容
<meta>标签:设置页面的一些相关的内容
	<meta name="keywords" content="秦时明月君临天下">
	<meta http-equiv="refresh" content="3;url=Hello.html"/>
base标签:设置超链接的基本设置
	可以统一设置超链接的打开方式
	<base target="_blank"/>
link标签:引入外部文件

##11、框架标签的使用 <frameset> rows:按照行进行划分 <frameset rows="80,*">

	cols:按照列进行划分
		<frameset cols="80,*">
<frame>
	具体显示的页面
		<frame name="left" src="b.html"/>

使用框架标签时,不能写在body里面,使用了框架标签,需要把body去掉

<frameset rows="80,*">		//把页面划分成上下两部分
	<frame name="top" src="a.html"/>	//上面页面

	<frameset cols="80,*">		//把下面部分划分成左右两部分
		<frame name="left" src="b.html"/>	//左边的页面
		<frame name="right" />		//右边的页面
	</frameset>
</frameset>

如果在左边的页面超链接,想让内容显示在右边的页面中

设置超链接里面属性target值设置成名称
	<a href="Hello.html" target="right">超链接1</a>

##12、a标签的扩展(了解) 百度是网络资源 当a标签里面访问网络资源时候,必须要加一个协议http:表示一个网络的公共协议, 如果加上http协议后,自动识别访问资源是一个网络资源

当浏览器里面找到相关协议,首先看这个协议是不是公共协议http 如果是公共协议,会去本地电脑找支持这个协议的应用程序

© 著作权归作者所有

共有 人打赏支持
上一篇: Dos命令
下一篇: 面向对象总结
Scalpel-21
粉丝 2
博文 17
码字总数 23938
作品 0
朝阳
程序员
私信 提问

暂无文章

apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
今天
1
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
3
0
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
3
0
Apache防盗链配置,Directory访问控制,FilesMatch进行访问控制

防盗链配置 通过限制referer来实现防盗链的功能 配置前,使用curl -e 指定referer [root@test-a test-webroot]# curl -e "http://www.test.com/1.html" -x127.0.0.1:80 "www.test.com/1.jpg......

野雪球
昨天
5
0
RxJava threading

因为Rx针对异步系统设计,并且Rx也自然支持多线程,所以新的Rx开发人员有时会假设Rx默认是多线程的。在其他任何事情之前,重要的是澄清Rx默认是单线程的。 除非另有说明,否则每次调用onNex...

woshixin
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部