文档章节

HTML

Scalpel-21
 Scalpel-21
发布于 2016/12/01 09:52
字数 2345
阅读 6
收藏 0
点赞 0
评论 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 如果是公共协议,会去本地电脑找支持这个协议的应用程序

© 著作权归作者所有

共有 人打赏支持
Scalpel-21
粉丝 2
博文 17
码字总数 23938
作品 0
朝阳
程序员

暂无相关文章

BS与CS的联系与区别【简】

C/S是Client/Server的缩写。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、InFORMix或 SQL Server。客户端需要安装专用的客户端软件。 B/S是Brower/...

anlve ⋅ 52分钟前 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 今天 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部