01-javaWeb-html

最新推荐文章于 2022-12-31 17:17:52 发布

oooola

最新推荐文章于 2022-12-31 17:17:52 发布

阅读量2.2k

点赞数

分类专栏： java-Web 文章标签： html

本文链接：https://blog.csdn.net/qq_38247809/article/details/106976834

版权

java-Web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

【HTML的概述】

什么是HTML

HTML：Hyper Text Markup Language 超文本标记语言

超文本：比文本功能更加强大
标记语言：通过一组标签对内容进行描述的一门语言

为什么学习HTML

HTML是设计页面基础

在哪些地方可以使用HTML

设计页面的时候都可以使用HTML

如何使用HTML

HTML的语法和规范

HTML文件的扩展名是.html或者是.htm
HTML文件是由头和体组成
HTML这组标签是不区分大小写
HTML的标记通常是由开始标签和结束标签组成：<b>内容</b> <br/>

	html书写规则:
		文件的后缀名  .html(建议) 或者 .htm
		标签必须用 <> 引起来 已经定义好的标签
		属性 
			格式: key="value"
			建议属性的值用引号引起来.
		不区分大小写
	注意:
		最好将所有的内容放在一个标签中 <html></html>
		有开始标签和结束标签的标签称之为围堵标签
		没有结束的标签的称之为空标签  <br/>
		开始标签和结束标签之间的内容称之为标签体.
		<!--注释内容--> html页面中的注释
		标签必须正常嵌套,
		标签最好关闭

【HTML的文件标签】

html标签:

声明当前网页为html页面

子标签:
<head></head>

<body></body>
head:用来存放当前页面的重要信息,一般不展示在html页面上

常见的子标签:

<title></title> 网页的标题

body:要展示的数据放在body中

【HTML的字体标签】

<font>标签

<font 属性名=”属性值”>文字</font>
size:控制字体大小.最小1 最大7
color：控制字体颜色. 使用英文设置，使用16进制数设置
face：控制字体.
<font face="黑体" size="6" color="#000000">我很黑</font>

【HTML的排版标签】

<hn>标题标签
<h1>b标题</h1>
	<hn></hn>
	n取值 :1~6
		h1最大  h6最小
		自动换行 且留白 默认加粗
	常用属性:
		align:对齐方式
			left:左  right:右 center:居中
	格式:
		<h2 align="center"></h2>
<p>段落标签

<br/>换行标签 break的缩写

<hr/>水平线标签 水平线标签:horizontal

<b>字体加粗

<i>斜体标签

【HTML的图片标记】

<img />

图片标签:★
	<img/>
		常用属性:
			★src:图片的路径
			alt:替代文字
			title:移上去显示的文字
			width:宽
			height:高
	大小的写法:
		像素:123px
		百分比:20%
	路径的写法:
		相对路径:
			./ 或者 什么都不写  当前目录
			../  上一级目录
		绝对路径:
			带协议的绝对路径:
				http://www.itheima.com

【HTML的列表标签】

无序列表

<ul>

<li>内容1</li>

<li>内容2</li>

</ul>

有序列表

<ol>

<li>内容1</li>

<li>内容2</li>

</ol>

【HTML的超链接标签】

	<a></a>
		常用属性:
			href:跳转路径
			target:在那里打开
				默认值:_self  _blank(在空白页面打开)

【HTML的表格标签】

表格标签：

<table>
    
    <tr>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>
    
        <td></td>

    </tr>

</table>

table 的常用属性:

border:边框像素值

width:

align:表格对齐方式

tr 的常用属性:

align:内容对齐

td 的常用属性:

align:内容对齐

colspan:跨列合并值:合并的列数

rowspan:跨行合并
<tr align="center">
	<td>21</td>
	<td colspan="2">22&23</td>

</tr>

<tr>
	<td rowspan="2">31&41</td>
	<td align="center">32</td>
	<td>33</td>
</tr>

【HTML的表单标签】

表单标签：

需要提交的表单需要使用<form></form>括起来
1. action：提交路径
2. method：提交方式
文本框:
1. <input type=”text”/>
  1. name
  2. value
  3. size
  4. maxlength
  5. readonly
密码框：
1. <input type=”password”/>
单选按钮：
1. <input type=”radio”/>
  1. Checked：默认选中
复选框
1. <input type=”checkbox”/>
  1. Checked：默认选中
下拉列表框
1. <select><option></option></select>
  1. Selected：默认选中
  2. Multiple：全部显示
文件上传项
1. <input type=”file” name=”file”/>

文本区

<textarea name=”” cols=”” rows=””></textarea>

提交按钮
1. <input type=”submit” value=”注册”>
重置按钮
1. <input type=”reset” value=”重置”>
普通按钮
1. <input type=”button” value=”普通按钮”>
隐藏字段
1. <input type=”hidden” name=”id”/>

提交方式：

GET ：默认值
1. 提交的数据都会在地址栏中进行显示
2. 提交的数据的时候是有大小的限制
POST ：
1. 提交的数据不会再地址栏中进行显示
2. 提交的数据没有大小限制

表单:
常用属性:
	action:信息提交的路径 默认是当前页面
	method:表单提交的方式
<form action="#" method="get">

		只需要掌握两种
			get(默认)和post
		get和post的区别:
			1.get请求会把所有的参数追加在地址栏上,post请求不会
			2.get请求参数大小有限制,post请求参数大小没有限制
			3.post相当于get安全些
常见的子标签
	input
	select:下拉选
	textarea:文本域

input标签
	常用的属性:
		type:
			text:文本框 默认
			password:密码框
			radio:单选框
			checkbox:多选框
			file:文件框
			
			submit:提交
			reset:重置
			button:普通按钮
			
			hidden:隐藏域 在页面上显示 提交的时候可以提交过去
			image:图片提交 替代submit 
		name:
			可以将几个单选框(复选框)设置为一组
			要想将信息保存到服务器上必须有name属性
		readonly:
			readonly="readonly" 只读
		disabled:
			disabled="disabled" 禁用
			
select :下拉选
	格式:
		<select name="pro">
			<option>黑龙江</option>
		</select>

textarea:文本域
	常用的属性:
		cols:列
		rows:行
	
	
提交到服务器的内容的格式:
	key=value&
对于文本框 密码框 文本域 手写的内容传递过去了

密码:<input type="password" name="password"  value="123" disabled="disabled"><br>

对于单选框和多选框来说,却没有把值传递过去
	要想把值传递过去 必须设置value属性

性别:<input type="radio" name="sex" value="1" checked="checked">男
爱好:<input type="checkbox" name="hobby" value="eat">吃

若下拉选要想把选中内容的值传递过去,请加上value属性

<select name="pro">
	<option value="01">黑龙江</option>
	<option value="02">吉林</option>
	<option value="03" selected="selected">辽宁</option>
</select>

默认值:
	文本框 密码框:只需要添加value属性
        姓名:<input name="username" value="xuduoduo"/><br>
	单选框 多选框:添加 checked="checked"
	下拉选:添加selected="selected"	
	文本域:标签体
		
当我们提交的时候 发现地址栏变化
?username=tom&password=123&sex=on&hobby=on&hobby=on&photo=&pro=黑龙江&city=哈尔滨&intr=good+girl

【HTML的框架标记】

</frameset>

* 使用了frameset标签，不需要使用body.

* 属性：

* rows：横向切分页面

* cols：纵向切分页面

<frame>标签代表切分每个部分的页面

* src：引入页面的路径

frameset:框架集(了解)
	常用属性:
		cols:垂直切割
			例如: cols="40%,60%"
			例如: cols="40%,*,10%"
		rows:水平切割
	常见的子标签:
		frame
	注意:
		最好和body不要共存
frame:具体实现
	常用属性:
		src:展示的页面的url
		name:给当前的frame起个名称


<frameset rows="18%,*,10%">
	<frame src="./head.html"/>
	<frameset cols="20%,*">
		<frame src="left.html"/>
		<frame src="main.html" name="mainFrame"/>
	</frameset>
	<frame src="foot.html"/>
</frameset>

【HTML的转义字符】

转义字符:
		三部分构成 &实体;
		掌握的转义字符:
			>	&gt;  //great then
			<	&lt;
			&	&amp;
			空格 &nbsp;

meta 元信息

<meta charset="UTF-8">指定浏览器用什么编码打开此页面

附：相关代码和文档

oooola

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-javaWeb-html

【HTML的概述】什么是HTMLHTML：HyperText Markup Language 超文本标记语言超文本：比文本功能更加强大标记语言：通过一组标签对内容进行描述的一门语言为什么学习HTMLHTML是设计页面基础在哪些地方可以使用HTML设计页面的时候都可以使用HTML如何使用HTMLHTML的语法和规范HTML文件的扩展名是.html或者是.htm HTML文件是由头和体组成 HTML这组标签是不区分大小写 HTML的标记通常是由开始标.
复制链接

扫一扫