黑马程序员 html学习笔记

最新推荐文章于 2023-01-10 18:37:25 发布

u010010278

最新推荐文章于 2023-01-10 18:37:25 发布

阅读量510

点赞数

分类专栏：编程的si 文章标签： HTML 标签

本文链接：https://blog.csdn.net/u010010278/article/details/9000147

版权

编程的si 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

------- Android培训、 java培训、期待与您交流！ -------

一.HTML简介

html语言又叫超文本标记语言，是用于描述网页文档的一种语言。html语言使用简单，但是功能很强大。它是一种规范，也是一种标准，它通过标记符号来标记要显示的网页中的各个部分。html是一种非严谨性的语言，在使用中，对大小写不敏感，比如

<html></html>  <HTML></HTML>

这两个标签的含义是一致的，都表示网页的开头和结束，一般来说，一个网页包括三部分组成，即网页用头部用 <html></html>，头部用<head></head>来表示，身体用<body></body>表示。网页的正文一般定义在<body></body>标签中，用来显示网页的正文。

二.常用HTML标签

一.字体设置标签

1.<font></font>标签队，该标签用来设置字体在浏览器显示的格式，他有多个属性，包括大小（size），颜色（color）等。

2.<b></b>标签对，该标签对用来给字体加粗。如：

<font size ="2" color="red"><b>联系我们</b></font>

上述标签标示把“联系我们”字的大小设置为2，颜色为红色，并且加粗显示。

二.列表标签

1.<ul></ul>和<li></li>标签队

该标签队用来设置列表的项目符号，其中<ul>标签有三个属性（disc，circle，square），默认属性是disc。例如：

 <ul  type="disc">
   		<li>java</li>
		<li>javaScript</li>
   </ul>

2.<ol></ol>和<li></li>

该标签队与<ul></ul>类似，也是用来设置列表的标签，不过他是用数字来表示，通常有阿拉伯数字，希腊字母等属性。例如：

 <ol  type="disc">
   		<li>java</li>
		<li>javaScript</li>
   </ol>

三.表格标签

表格标签是一个非常重要的标签，用<table></table>表示，表格标签有许多属性，下面分别介绍：

1.border和bordercolor属性：分别表示表格边框以及边框的颜色

2.cellspacing，表示表格边框和单元格边框的距离，为0时表示重合

3.cellpadding，表示表格中的数据距离单元格的距离，可以用象素来表示

4.width，表示表格的宽度，可以用象素或者百分比来表示

<tr></tr>标签队：用来定义表格中的行，<tr>表示行的开头，</tr>表示行的结束。

<td></td>标签对：用来定义单元格，分别表示单元格的开始和结束，他有两个重要的属性，即colspan和rowspan，用来合并单元格。

四.<form></form>表单

表单是注册页面必不可少的一部分，表单标签是一对非常重要的标签，在表单里可已定义很多标签，下面分别说明：

1.<input></input>标签，该标签有很多属性，其中最主要的一个属性是type，根据type的不同，可以得到不同的控件，如text，password，button，radio，checkbox，textarea，reset，submit等，另外，为了让表单提交给服务器后能被服务器取出，每个控件都要有一个name属性，根据name的不同，来获取他的值，还有value属性也是必不可少的。

2.<select></select>标签，该标签用来建立一个下拉列表。

最后，<form>表单是为了提交给服务器的，为了能够提交给服务器，<form>表单还有一个action属性，用来指定提交到的服务器的地址。

五.超链接标签<a></a>

超链接标签主要用于页面的跳转，用于连接网络上的资源，使html更加的灵活，排版更加方便，简捷。

下面，我们做一个案例，来练习所学习的html标签的使用，下面是一段代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<form>
<table border="1" bordercolor="#003399" cellspacing="0" cellpadding="10" width="70%" >
    <tr>
		<th colspan="2">信息注册页面</th>
    </tr>
    <tr>
    <td>用户名：</td>
		<td><input type="text" name="user"/></td>
    </tr>
	<tr>
		<td>密码：</td>
		<td><input type="password" name="password"/></td>
	</tr>
	<tr>
		<td>确定密码：</td>
		<td><input type="password" name="repassword"/></td>
	</tr>
	<tr>
	    <td>性别：</td>
		<td>
		  <input type="radio" name="sex" value="man" />男
		  <input type="radio" name="sex" value="female" />女
		</td>
	</tr>
	<tr>
		<td>技术：</td>
		<td>
			<input type="checkbox" name="skill" value="java" />java
			<input type="checkbox" name="skill" value="html" />html
			<input type="checkbox" name="skill" value="jsp" />jsp
		</td>
	</tr>
	<tr>
		<td>国家：</td>
		<td>
			<select name="country">
		       <option value="cn">中国</option>
			   <option value="en">英国</option>
			   <option value="usa">美国</option>
		   </select>
		</td>
	</tr>
  <tr>
    <th colspan="2">
	   <input type="submit" value="提交数据"/>
	   <input type="reset" value="清除数据"/>
	</th>
  </tr>
</table>
</form>
</body>
</html>

运行上述代码，在浏览器中的结果如下图所示：

信息注册页面
用户名：
密码：
确定密码：
性别：	男女
技术：	java html jsp
国家：

u010010278

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马程序员 html学习笔记

-------Android培训、java培训、期待与您交流！ -------一.HTML简介html语言又叫超文本标记语言，是用于描述网页文档的一种语言。html语言使用简单，但是功能很强大。它是一种规范，也是一种标准，它通过标记符号来标记要显示的网页中的各个部分。html是一种非严谨性的语言，在使用中，对大小写不敏感，比如这两个标签的含义是一致的，都表示网页的开头和结束，一般来
复制链接

扫一扫