HTML技术

最新推荐文章于 2024-08-17 16:30:29 发布

在线秃头君

最新推荐文章于 2024-08-17 16:30:29 发布

阅读量1.2k

点赞数 2

分类专栏： javaweb 文章标签： html5

本文链接：https://blog.csdn.net/weixin_45536396/article/details/103569298

版权

javaweb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML技术

一：引言

1.概念

1）标记语言：使用一些特殊的标记符号对所要展示的文本内容进行标记说明，不会向机器发出指令，不体现具体的业务信息

2）超文本标记语言（HTML）:对文本内用的显示样式，风格进行标记说明

3）可扩展标记语言（xml）：对文本内容的含义进行标记说明

2.HTML说明

1）使用HTML技术定义文档，通常称为“网页”，文件名会以.html 或者.htm为结尾

2）使用任意文本编辑器编辑开发使用浏览器解释运行

3.基本语法

1）使用标签的形式来进行标记

		<标签名> 					---- 开始标签
			标签体 				---- 文本内容 or 其他标签
		</标签名> 					---- 结束标签
特例：   <标签名/>				 --- 空标签，没有标签体的标签

2)标签可以有属性

	<标签名 属性名=“属性值” 属性名=‘属性值’ 属性名=值 > ...... </标签名>
	例如： <hr color="red" size="3" width="90%"/>

3）标记语言文档只能有一个”根标签“（所有内容都必须定义在根标签里）

二、html技术里的根标签

1.根标签

<html>  ------html文件的根标签
    <head>    
    </head>
    <body>
    </body>
</html>

2.head标签

--------------用来对网页的特性属性进行说明定义，通常head标签里的定义不会显示在浏览器中

1) <title> 定义网页标题的标签，唯一一个可以出现在浏览器中的head标签
2）<meta/> 用来为网页定义特征属性
. <meta http-equiv="content-type" content="text/html;charset=GBK" />
. <meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>
. <meta name="keywords" content="oracle,java,sql"/>

3.body标签

用来定义可以显示在浏览器窗口的正文内容

1）text:用来定义正文内容的颜色。英文单词或者用6位16进制数来定义

2）bgcolor:背景色

三.body中常用的标签

1.基础标签

1.注释标签:	<!--注释内容-->
2.标题标签：<h1>....<h6>  数字的值越大 显示的字体越小  自占一行，“块级元素”
3.标尺标签：<hr color="颜色" size=“粗细（数字）” width=“100px,或者使用百分比”/>
4.水平居中：<center></center>
5.设置字体：<font color="英文颜色单词或者6位16进制数" size="单位像素"></font>
6. 特殊设置：<br/>换行    &nbsp换行
7.字体设置：<b>加粗   <i>斜体 <s>删除线  <u>下划线  <sub>下标  <sup>上标
8） 段落标签：<p> <pre>预览
9） 跑马灯： <marquee scrolldelay="速度" direction=“方向 left right”></marquee>

2.列表标签

1）无序列表： <ul type=“circle，square”> <li>每一项
2）有序列表： <ol type="A,a,I,i"> <li>
3）定义列表： 做概念定义的标签 <dl> <dt>概念 <dd>解释文字

3.图片标签

<img src="图片的路径" width="100px" height="" align="top,middle,bottom,left"/>
align属性控制图片与后面文字的对齐方式

4.超链接标签

1）普通的超链接【重点】
<a href="目标资源的路径" target=“控制资源打开的窗口,_self(自己）, _blank(新窗口）”>提示</a>
2）设置锚点( 需要配合第一种方式使用 )
<a name="锚点名"></a>
用来在一张网页的上下文之间切换

5.表格标签

<table border="数字" bordercolor=“颜色” cellspacing=“0” width=“” align=“left,right,center”>
<tr bgcolor="" align="left,center,right">
<td> 第一行第一列</td> <td> 第一行第二列 </td>
</tr>
<tr valign="top,middle,bottom">
<td> 第二行第一列</td> <td> 第二行第二列 </td>
</tr>
</table>
注意： <td>可以写文本内容，可以放图片，也可以存放任意网页元素。数据必须放在<td>

四.表单标签

1.作用：与用户交互的通道（主要完成数据的采集）

2.form标签

<form action="目标程序的地址" method="get|post">
表单
</form>
method属性： get和post的区别
get方式：表单提交默认方法，将表单数据以特殊的格式拼接到地址栏随着资源跳转一并发送数据
格式 --> 地址？name=value&name=value&name=value .....
缺陷 --> 数据不安全 传递的数据量小 容易出现中文乱码
post方式：优选此种方式， 将表单数据打成数据包，随着请求发送（跳转）一并传递到目标程序

3.常见的表单元素

1）文本框 ： <input type="text" name="" size="" maxlength="" readonly value="默认值"/>
2）密码框： <input type="password" name="" />
3）单选钮： <input type="radio" name="" value="" checked/> 提示
注意： 必须将多个单选钮的名字定义成同一个，才能达到“排他性"\
4）复选框： <input type="checkbox" name="" value="" checked/>提示
注意：如果多个复选框采集的是同一组数据，则name必须保持一致
5）下拉列表：<select name="">
<option value="" selected>提示文字</option>
</select>
6）文本域： <textarea cols="" rows="">默认值</textarea>
7）email输入框： <input type="email" name=""/> 在提交时，自动对内容进行格式检查
8）提交按钮： <input type="submit" value="按钮上的提示文字"/>
9）重置按钮： <input type="reset" value="提示文字"/>
10) 普通按钮：<input type="button" value="提示文字"/>
11）url（网址）输入框：<input type="url" name="" value=""/> 提交时，自动检查value是否为合法网址
12）日期输入框：<input type="date" name="" />
type可选值 --- date time week month datetime
13）数字输入框：<input type="number" name="" value="" max="" min="" step=""/>
补充
1）隐藏框： <input type="hidden" name="" value=""/>
特点 --- 属于表单一部分，不会显示在网页中，会随着表单的提交一并提交，目标程序可以获取其中value数据
2）文件选择对话框： <input type="file" name=""/>