Web前端-HTML

目录

1 概述

2 开发第一个HTML页面

3 HTML基本标签

4 HTML实体符号

5 表格

6 背景颜色和背景图片

7 超链接

8 列表

9 表单form

10 id属性

11 div


关于本次学习前端包括HTML、CSS、JavaScript都是学习基本内容为了,后期学习Javaweb,并不会对前端深入学习。

1 概述

HTML:超文本标记语言

超文本:不是普通文本,例如:图片、声音、视频等等。

标记语言:标记语言一般都是由一对一对的标签组成。

        这就是HTML的根标签,所有的结束标签开始的第一个字符都是正斜杠:/

HTML怎么开发?怎么运行?

开发:只需要新建一个xxx.html或者xxx.htm文件,直接用记事本编辑即可。

          当然也有集成开发工具:如Dreamweaver、Hbuilder、IDEA等等

运行:使用浏览器直接打开运行即可

2 开发第一个HTML页面

因为是刚接触html,所以不用开发工具,直接记事本写








	
	
		
		我的第一个HTML页面
	
	
	
	
	
	
		hello world!
	

通过测试发现,HTML语言并不需要很规范,但是还是要遵守规范

不区分大小写;少了某个标签依然能正常运行。

3 HTML基本标签

p标签

此标签用来标记段落

h标签

标题字,有h1到h6共六个标签用来标记标题,值得注意的是,标题字独占一行。

br标签

换行,注意:此标签不是一对,写一个就够了。属于独目标记

hr标签

输出水平线

color属性

修改颜色

width属性

修改长度,单位px表示像素是静态的;单位%表示占浏览器多少,是动态的。

pre标签

我们发现在html中写的内容格式在浏览器就会失效,可以使用pre标签,会保存原本格式

b标签

粗体字

i标签

斜体字

ins标签

插入字

del标签

删除字

sup标签

右上角加字

sub标签

右下角加字

font标签

可以对文字进行颜色字体等修改

对以上标签和属性演示:


	
		HTML基本标签
	

		
		

先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于 内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘 志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。

宫中府中,俱为一体;陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以 昭陛下平明之理,不宜偏私,使内外异法也。

侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中 之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。

标题字

标题字

标题字

标题字

标题字
标题字
嗨嗨嗨
给你一拳
爱你哟




		for(int i = 0; i < 10; i++){
			System.out.println(i);
		}
		
粗体字 斜体字 插入字 删除字 102 100n 指定给你好果汁吃



效果:

Web前端-HTML_第1张图片

Web前端-HTML_第2张图片

4 HTML实体符号

 

空格符号

<>

小于号大于号,因为html标签需要用到大于号和小于号,就会冲突,只能用符号代替。

演示:



	
		HTML实体标签
	

	
		让我逮到你,    指定有你好果子吃。
10 < 100
100 > 10

结果:

Web前端-HTML_第3张图片

5 表格

标签用来创造一个表格

表示表格的一行

表示表格的一个单元格

border属性:设置边框,可以用width和height属性对边框修改宽度和高度,align属性用于设置对齐方式。

单元格合并

行单元格合并:rowspan属性,合并技巧:保留最上面的单元格,将后面的单元格注释掉,合并几个,属性值就写几。

列单元格合并:colspan属性,合并技巧:随便保留其中一个即可。

th标签:可以用于单元格代替td标签,可以自动居中和加粗

表格三部分

可以使用thead tbody tfoot三个标签将表格分为三部分:表头,表体,表脚,在表现形式上没有什么用,但在今后需要操作表的时候会方便一些(这里就先不演示了,就是将标签将某一行或多行包住)。

演示:



	
		表格的创建
	
	
	
		
单元格 单元格 单元格x
单元格 单元格
单元格 单元格y

效果:

Web前端-HTML_第4张图片

6 背景颜色和背景图片

bgcolor属性可以设置背景颜色,用在body标签中。

background属性可以设置背景图片,也用在body标签中,图片的路径可以是相对路径也可以是绝对路径,也可以是网络当中的有效路径。

注意:这里的背景颜色和背景图片是嵌入到浏览器里的。

img标签:这里的图片是浮动于浏览器窗口的。src用于指定路径,width指定宽度,高度会随着宽度等比例缩放,若同时修改高度和宽度可能会失真。可以没有结束标签。title属性用来设置鼠标悬停于图片上时的提示信息,alt属性用来设置图片加载失败时的提示文本信息。

演示:



	
		背景颜色和图片
	

	
	

		图片没了捏

	

若找不到图片,会有alt属性的提示:

Web前端-HTML_第5张图片

7 超链接

a标签:href属性用于指定链接地址,traget属性可以修改点开新的网页所在窗口,_self表示当前窗口,_blank表示新窗口, _parent表示父窗口, _top表示顶级窗口。

iframe标签:可以在此页面嵌入一个页面。

演示:



	
		超链接
	

	
		百度
B站
京东
小丑女图片


	
		子页面
	

	
		这是嵌入页面
百度(会在父窗口运行)

Web前端-HTML_第6张图片

8 列表

ul标签表示一个列表,无序列表,li标签表示列表中的一条信息

ol标签是有序列表

type属性可以对列表前面的序号或者符号进行修改

演示:



	
		
		列表
	
	
		
  • 中国
    • 江苏
    • 浙江
  • 美国
  • 日本
  1. 水果
  2. 蔬菜
    1. 乌龙茶
    2. 绿茶
    3. 红茶

结果:

Web前端-HTML_第7张图片

9 表单form

什么是表单,有什么用?
表单可以用来收集用户的数据,提交表单时,可以向服务器发送请求,并且还可以携带用户填写的数据。
表单标签:form

form标签的属性:
action属性:用来指定请求路径,也就是说数据提交的时候,提交给谁?action属性和超链接的href属性相同,都是提供“请求路径"”的
method属性:用来指定表单提交的方式/方法,常见的包括两种:get方式提交、post方式提交,默认使用get方式提交。超链接和地址栏输入URL都是get方式提交。
get方式:提交的时候,提交的数据会直接显示在浏览器的地址栏上。
post方式:提交的时候,提交的数据不会直接显示在浏览器的地址栏上。

input标签可以进行提交,需要写到form表单当中才能正常使用。使用type属性值为submit就会有一个提交字样的按钮,提交的是当前表单,使用value属性可以修改按钮的名称。将type属性的值改为button,这是普通按钮,没有提交表单能力。

演示:



	
		
		表单
	
	
		

Web前端-HTML_第8张图片

input标签是form表单中非常重要的输入域控件,所有的输入域控件都是用来收集用户的数据。用户实际上就是向输入域控件中输入数据的。input标签中最常用的属性是type属性。type属性用来设置输入域控件展示的样式。它有那些只可选?

text:文本框
password:密码框
radio:单选按钮
checkbox:复选框

当需要提交数据时必须要有name属性,否则无法提交。

文本框中value属性不需要程序员写,因为用户会填写,用户在文本框中填写的内容就是value

需要注意的是:提交按钮只是为了起到提交的作用,按钮上的数据是不需要提交的。不要提交的数据你千万别写name属性。否则会一起提交上去。
 



	
		
		表单
	
	
		

user login


username:  
password:  

Web前端-HTML_第9张图片

 Web前端-HTML_第10张图片

注册表单的一个小案例 



	
		
		注册表单
	
	
		
用户名:
密码:
性别:男
学历:
兴趣: 抽烟 喝酒 烫头
简介:

结果:Web前端-HTML_第11张图片

提交结果:是与我自己选的一致的,没什么毛病

http://localhost:8080/register?username=123&password=123&sex=1&grade=4&hobby=smoke&hobby=drink&jianjie=%09%E7%BB%99%E4%BD%A0%E4%B8%80%E6%8B%B3%09%09

file控件是input标签里的type属性中的一个类型,使用file控件可以选择文件上传。

hidden控件,input标签里的type属性中的一个类型,是一个隐藏域控件,当有需求是需要提交一个东西但又不想显示出来,可以使用hidden控件。

提交后,被hidden隐藏的代码也会提交到服务器。

readonly属性用在input标签中,用了此属性内容只读,不能修改,可以提交

disable属性用在input标签中,用了此属性内容只读,不能修改,不会提交。

maxlength属性可以规定输入的长度是多少。

演示:



	
		
		file、hidden控件
	
	
		

机构代码:

Web前端-HTML_第12张图片

10 id属性

每一个节点都有id属性。id是这个节点对象的唯一标识,或者说id是这个节点的身份证编号。在同一个HTML文档当中id具有唯一性,不可重复。

javascript语言 , 对以上的form表单中的元素进行增删改查操作。来达到网页的动态效果。当javascript语言对某个节点进行操作的时候,需要先获取到该节点对象,怎么获取该节点对象呢?
答案是:可以通过该节点对象的id来获取到该节点对象。

11 div

div是图层,也可以叫做盒子。div是专J用来做网页布局的。其实最早的时候网页元素的布局是采用table进行布局,但是table布局不够灵活。当代的网页元素布局都是采用div的方式,div套div。也就是盒子套盒子。div布局会更加的灵活、方便。
div和span都可以看做是盒子。 他们有什么区别呢?
div默认情况下会独自占用一行。span不会独自占用一行。

演示:



	
		
		div
	
	
		
我是一个div
我也是一个div
hello world 我是一个span 你好

Web前端-HTML_第13张图片

你可能感兴趣的:(web前端,前端,html)