html基础

最新推荐文章于 2024-08-20 10:31:33 发布

kuangpeng1956

最新推荐文章于 2024-08-20 10:31:33 发布

阅读量3.4k

点赞数

分类专栏： javaWeb总结文章标签： html javaweb

本文链接：https://blog.csdn.net/kuangpeng1956/article/details/85124450

版权

javaWeb总结专栏收录该内容

1 篇文章

订阅专栏

HTML

HTML（HyperText Markup Language 超文本标记语言）是用于描述超文本中内容的显示方式。
超文本：是指页面中可以包含图片，视频，链接，程序甚至音乐等非文字元素。
标记：HTML用于描述功能的符号称为“标记”

html的组成

HTML文档的基本格式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>
      <title> this is a html </title>
 </head>

 <body>
  
 </body>
 
</html>

HTML文档由四个主要标记组成，包括< html >、< head>、< title>、
< body>。
（1）< html>标记
< html>标记是HTML文件的开头。所有的HTML文件都以< html>标记开头，以</ html>结束。即HTML页面的所有标记都要放置在< html>与</ html>标记中。虽然< html>标记并没有实质性的内容，但却是HTML文件不可或缺的内容。
（2）< head>标记
< head>标记为HTML文件的头标记，用于放置HTML文件的信息，如定义CSS样式的代码可放在< head>和</ head>标记之中。
（3） < title>标记
< title>标记为标题标记。可将网页的标题定义在< title>与</ title>标记中。
（4）< body>标记
< body>标记是HTML的主体标记。页面中的所有内容都定义在< body>标记中。< body>标记也是成对出现的，以< body>标记开头，</ body>标记结束。< body>标记本身也有控制页面的一些特性，如控制页面的背景图片和颜色等。
这些都是HTML页面最基本的结构。要深入学习HTML，创建更加完美的网页，必须学习HTML的其他标记。

HTML常用标记

HTML中提供了很多标记，可以用来设计页面中的文字、图片、定义超链接等。这些标记的使用可以使界面更加的生动。
（1）换行标记
要让网页中的文字实现转行，在HTML文件中输入换行符（Enter）是没有用的，而必须用一个标记告诉浏览器在哪里实现换行操作。在HTML中，换行标记为"< br />"
换行标记是一个单标记，不是成对出现的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
     <title> this is a html </title>
 </head>
 <body>
      白日依山尽，黄河入海流，<br/>欲穷千里目，更上一层楼。
 </body>
</html>

在这里插入图片描述
（2）段落标记
HTML中的段落标记也是一个很重要的标记。段落标记以< p>开头，以< p/>结束。段落标记在段前段后各添加一个空行，而定义在段落标记中的内容不受该标记的影响。
（3）标题标记
在HTML标记中设定了6个标题标记，分别为< h1>，至< h6>，其中< h1>代表1级标题，< h2>代表2级标题，< h6>代表6级标题等。数字越小，代表级别越高，文字的字体越大。
（4）居中标记
HTML页面的内容默认的布局方式是从左到右依次排序。如果想让页面上的内容在页面上的居中位置显示，可以使用HTML中的< center>标记。居中标记以< center>标记开头，以< center/>标记结尾。标记之中的内容为居中显示。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 设置标题标记 </title>
 
 </head>

 <body>
 
   <center>
      <h1> Java开发的三个方向 </h1>
      
      <h2> Java SE </h2>
	  <p>
	  主要用于桌面程序的开发。它是学习Java EE和Java ME的基础。也是本书的一个重点 
	  <p/>

	  <h2> Java EE </h2>
	  <p>
主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言开发自己的官方网站，其中不乏世界500强企业。
	  </p>

      <h2> Java ME </h2>
	  <p>
	   主要用于嵌入式的开发。
	  </p>
	  
</center>	 

 </body>
</html>

界面截图
在这里插入图片描述
（5）文字列表标记
HTML提供了文字列表标记，可以将文字以列表的形式依次排列。通过这种方式可以更加方便网页的访问者。HTML的列表主要有无序列表和有序列表。

无序列表
无序列表是在每一个列表项前面添加一个圆点符号。通过符号< ul>可以创建一组无序列表。其中每一个列表项以< li>表示。
for example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>
 <body>
  <p>
   编程词典有以下几种:
  </p>

  <ul>
    <li> Java编程词典</li>
	<li> vb编程词典  </li>
	<li> VC编程词典  </li>
	<li> .net编程词典</li>
  <ul/>
 </body>
</html>

运行结果

有序列表
有序列表与无序列表的区别是，使用有序列表可以对列表项进行排序。有序列表的标记为< ol>，每一个列表项前使用< li>。有序列表的每一个列表项都是有顺序的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>
 <body>
  <p>
   编程词典有以下几种:
  </p>

  <ol>
    <li> Java编程词典</li>
	<li> vb编程词典  </li>
	<li> VC编程词典  </li>
	<li> .net编程词典</li>
  <ol/>
 </body>
</html>

运行结果
（6）表格标记

表格用来存储数据。由标题，表头，行和单元格组成。
表格标记< table>
< table> < /table>标记整个表格。< table>标记中有很多属性：
width:设置表格的宽度；
border：设置表格的边框；
align:设置表格的对齐方式；
bgcolor:设置表格的背景色；
标题标记
标题标记以< caption> 开头，< /caption>结尾。具有align,valign标记
表头标记< th>
表头标记由< th> < /th>表示。具备属性align,backgroung,colspan,valign等。
表格行标记< tr>
表格行属性有< tr> < /tr>结束。一组< tr>标记表示表格中的一行。< tr>标记要嵌套在< table>标记中使用，具有属性align,background等。一个 < tr> 元素包含一个或多个 < th> 或 < td> 元素。
单元格标记< td>
单元格标记< td>又称为列标记，一个< tr>标记中可以嵌套若干个< td>标记，具备属性 align,background,valign等属性
for example

<html>
 <head>
  <title> New Document </title>
 </head>

 <body>
<table width ="318" height ="161" border="1" > 
<caption>学生考试成绩单</caption>

<tr align ="center" > 
<th >姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>

<tr align ="center" >
  <td>张三</td>
  <td>98</td>
  <td>98</td>
  <td>98</td>
</tr>

<tr align ="center">
<td>李四</td>
  <td>98</td>
  <td>98</td>
  <td>98</td>
</tr>
</table>
 </body>
</html>

运行结果
（7）表单标记
表单在HTML页面中起着非常重要的作用，是用户和网页交互信息的重要手段。

< form> < /form>表单标记
表单标记以< form>标记开头，以< /form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。< form>标记的基本语法如下：
< form action=“url” method =“get’|“post” name=“name” onSubmit =”" target ="">< /form>
< form>标记的各属性说明如下
action 属性
action属性用来指定处理表单数据程序的URL地址
method属性
method属性用来指定数据传送到服务器的方式。该属性有两种属性值，分别是get和post。get属性值表示将输入的数据追加在action指定的地址后面，并传送到服务器。当属性值为post时，会将输入的数据按照HTTP中的post传送方式传送服务器。
name属性
name属性用于指定表单的名称，该属性值可以由程序员定义。
onSubmit属性
onSubmit属性用于指定当用户单击提交按钮时触发的事件。
target属性
target属性用于指定数据显示在哪个窗口中，该属性的属性值可以设置为"-blank"，"_self"、"_parent"，"_top"。其中"_blank"表示在新窗口中打开目标文件，"_self"表示在同一个窗口中打开，这项一般不用设置，"_parent"表示在上一级窗口中打开，一般使用框架页时经常使用，"_top"表示在浏览器的整个窗口中打开，忽略任何框架。
< input>表单输入标记
表单输入标记是使用最频繁的表单标记，通过这个标记可以向页面中添加单行文本、多行文本、按钮等。< input>标记的语法格式如下：

< input type="image" disabled="disabled" checked = "checked" width="digit"
  height="digit" maxLength = "digit" readonly="" size="digit" src = "uri"
  alt=" "name="checkbox" value="checkbox" />

属性	描述
type	用于指定添加的是哪种类型的输入字段，共有10个可选值
disabled	用于指定输入字段不可用，即字段变成灰色
checked	用于指定输入字段是否处于被选中状态,用于type值为radio和checkbox时
width	用于指定输入字段的宽度，用于type属性值为image值的时候
height	用于指定输入字段的高度，用于type属性值为image值的时候
maxLength	用于指定输入字段可输入文字的个数，用于type值为text和pasword值的时候
readonly	用于指定输入字段是否为只读，其属性值可以为空也可为readonly
size	用于指定输入字段的宽度，当type为text或password，以文字字数为单位，type为其他值时，以像素为单位
src	用于指定图片的来源，只有当type为image时有效
usemap	为图片设置热点地图
alt	用于指定当图片无法显示时显示的文字，只有当type属性为image时才有效
name	用于指定输入字段的名称
value	用于指定输入字段默认的数据值，当type为radio或checkbox，不可忽略

type属性是< input>标记中非常重要的内容，决定了输入数据的类型。type的可选项如下：

可选值	描述	可选值	描述
text	文本框	submit	提交按钮
password	密码域	reset	重置按钮
file	文件域	button	普通按钮
radio	单选按钮	hidden	隐藏域
checkbox	复选框	image	图像域

for example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>
 <body>
 
 <form action="https://www.csdn.net/" method="get|post" target="_blank">
账号: <input name="账号" type = "text"     id ="account"  maxLength = "10" />  <br/>
密码: <input name="密码" type=  "password" id ="password" maxLength = "10" />  <br/>
性别：<input name ="sex" id = "man" type = "radio" value="男" />男
      <input name ="sex" id ="female" value="女" type = "radio" />女<br/>
兴趣爱好: 打篮球<input name = "hobby" type = "checkbox" id = "basketball" value = "basketball"/>
          踢足球 <input name = "hobby" type = "checkbox" id = "football"  value = "football"/>
		  唱歌  <input name = "hobby" type = "checkbox" id = "song"   value = "song"/>
		  跳舞  <input name = "hobby" type = "checkbox" id = "dance"  value ="dance"/><br/>
 头像：   <input name = "imagePath" type = "file" /> <br/>
 提交按钮 <input name = "Submit1" type = "Submit" value ="提交"/><br/>
 重置按钮 <input name = "Submit2" type = "Reset" value ="重置"/><br/>
</form>

 </body>
</html>

运行结果

< select> …< /select>下拉列表标记
< select>标记可以在页面上创建下拉列表，通过< option>标记向列表中添加内容

属性描述
name	用于指定下拉列表的名称
size	用于指定下拉列表框中显示的选项数量，超过该数量的可以拖动滑动条查看
disabled	用于指定当前下拉列表项不可使用（变成灰色）
multiple	用于让多行列表框支持多选

for example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>

 <body>
 兴趣爱好：
 <select name ="hobby"  >
    <option>打篮球</option>
	<option>踢足球</option>
	<option>唱歌  </option>
	<option>跳舞  </option>
  </select>

  电子设备：
 <select name ="hobby" multiple  >
    <option>数码相机区</option>
	<option>摄影器材</option>
	<option>mp3/mp4/mp5  </option>
	<option>U盘  </option>
  </select>
 </body>
</html>

运行结果

< textarea>多行文本标记
< textarea>为多行文本标记。与单行文本相比，多行文本可以输入更多的内容。通常< textarea>标记出现在< form>标记的标记内容中。< textarea>标记的语法格式如下：
< textarea cols = “dight” rows=“digit” name=“name” disabled =“disabled” readonly=“readonly” wrap=“value”>默认值</ textarea>
< textarea> 标记的属性说明如下图所示：

属性	描述
name	用于指定多行文本框的名称，当表单提交后，在服务器端获取表单数据时应用
cols	用于指定多行文本框显示的列数（宽度）
rows	用于指定多行文本框显示的行数（高度）
disabled	用于指定当前多行文本不可使用（变成灰色）
readonly	用于指定当前多行文本框为只读
wrap	用于设置多行文本的文字是否自动换行

< textarea>标记的wrap属性的可选值如下表所示：

可选值	描述
hard	默认值，表示自动换行，文字提交到服务器时，换行符同时被提交
soft	表示自动换行，文字提交到服务器时，换行符不被提交
off	表示不自动换行，如果想让文字换行，只能按下Enter键强制换行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>

 <body>

<form name ="form1" method="get|post" action="" > 
 <textarea wrap="hard" name = "textarea" cols="6" rows="3">
this is a textarea
 </textarea>
 
</form>

 </body>
</html>

运行结果
（7）超链接标记
超链接标记用于实现在网站中从一个页面跳转到另一个页面。超链接标记的语法如下：
< a href =""></ a>
属性href用来设定链接到哪个页面中。

<a href="https://www.baidu.com/">百度一下</a>

运行结果