HTML基础学习-html规范、操作思想、常用标签（重点：表单）

最新推荐文章于 2021-12-30 16:37:49 发布

RenSLei

最新推荐文章于 2021-12-30 16:37:49 发布

阅读量632

点赞数 2

分类专栏： javaweb Html

本文链接：https://blog.csdn.net/renshilei123/article/details/80097055

版权

JavaWeb_Html_学习笔记

1、html的简介：

什么是html?

-HyperText Markup Language :超文本标记语言，网页语言

**超文本：超出文本的范畴，使用html可以轻松实现这样的操作

**标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>

**网页语言：所有的内容都是要通过网页展现出来的

第一个html程序：

-创建一个java文件.java

-创建一个html文件.html或者文件.htm

-如何运行html文件？直接通过浏览器就可以运行。

-代码：

<font size="5" color="red">这是我的第一个htmlc程序!</font>

那么要学什么？

学标签，学习查询，记住常用的标签

html的规范（重要）

1、一个html文件开始标签和结束的标签：<html> </html>类似java方法的{ }
2、html包含两部分内容：

（1）、<head>设置相关信息</head>

（2）、<body>显示在页面的相关信息都写在body里面</body>

3、html的标签有开始标签和结束标签

- <head></head>

4、html的代码不区分大小写的

5、有些标签没有结束标签

-比如换行标签，<br>没有</br>,必须在标签内结束:<br/>

-又如：<hr/>一条水平线

6. 举例：

<html>  

    <head>

        <title>这是一个标题</title>

    </head>

    <body>

        <font size="5" color="red">这是我的第一个htmlc程序!</font><br/><hr/>

        这是我的第一个html程序2

    </body>

</html>

html的操作思想（重点理解）

网页中有很多的数据，不同的数据可能需要不同的显示效果，这个时候就需要使用标签把要操作的数据包起来，通过修改标签的属性值来改变标签内的数据的样式变化。

一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。

2、html中常用的标签：文字标签和注释标签

a、文字标签：修改文字的样式

- <font></font>

- 属性：

size：文字的大小，取值1-7，超出7默认就是7（最大）

color:文字的颜色

-两种表示方式：

**英文单词：red green blue black white yellow gray......

**使用十六进制数来表示：#ffffff,每两位表示一个颜色：RGB三原色

-通过工具来实现不同的颜色 #66cc66

b、注释标签

-html的注释：不会显示在页面上的。注：!是英文的!

3、标题标签、水平线标签和特殊字符

*标题标签
<h1></h1> <h2></h2> <h3></h3> ....... <h6></h6>
从h1到h6，大小依次变小，同时会自动换行
*水平线标签
-<hr/>
-属性：
**size：大小，取值1-7；
**color:颜色
-代码：<hr size="5" color="blue"/>

*特殊字符：
-想要在页面上显示：<html>:是网页的开始！
-需要对特殊字符进行转义：
<: <
>: >

空格： 

&:&

代码示例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>标题标签、水平线标签和特殊字符</title>
 </head>
 <body>
	<!--演示标题标签-->
	<h1>标题一</h1>
	<h2>标题二</h2>
	<h3>标题三</h3>
	<h6>标题一</h6>

	<!--演示水平线标签-->
	<hr size="5" color="blue"/>

	<!--演示特殊字符-->
	< html >:是    网页的开始！

 </body>
</html>

4、列表标签

-比如现在显示这样的效果：
重庆大学
财务处
人事部
后勤部
**<dl></dl>:表示列表的范围
**在dl里面 <dt></dt>:上层内容
**在dl里面 <dd></dd>:下层内容
-代码：
<dl>
<dt>重庆大学</dt>
<dd>财务部</dd>
<dd>人事部</dd>
<dd>后勤部</dd>
</dl>
-想要在页面上显示：

1.财务处
2.人事部
3.后勤部

a.财务处
b.人事部
c.后勤部

i.财务处
ii.人事部
iii.后勤部

**<ol></ol>: 有序列表的范围
-属性 type：设置排序的方式：1（默认） a i

**在ol标签里面<li>具体内容</li>
-代码：
<ol>
<li>财务处</li>
<li>人事部</li>
<li>后勤部</li>
</ol>

-想要在页面上显示：
特殊符号（方框）财务部
特殊符号（方框）人事部

**<ul></ul>:无序列表范围
属性：type:空心圆circle、实心圆disc（默认）、实心方块square
在ul标签里面 <li> </li>
-代码：
<ul>
<li>财务处</li>
<li>人事部</li>
<li>后勤部</li>
</ul>

代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>列表标签</title>
 </head>
 <body>
		<!--列表标签-->
  		<dl>
			<dt>重庆大学</dt>
			<dd>财务部</dd>
			<dd>人事部</dd>
			<dd>后勤部</dd>
		</dl>

		<hr/>
		<!--有序列表-->

		<ol type="a">
			<li>财务处</li>
			<li>人事部</li>
			<li>后勤部</li>
		</ol>

		<hr/>
		<!--无序列表-->

		<ul type="circle">
			<li>财务处</li>
			<li>人事部</li>
			<li>后勤部</li>
		</ul>
 </body>
</html>

5、图像标签(****)

*<img src="图片路径">
-属性：
src:图片的路径
width:图片的宽度
height:图片的宽度

alt：图片上显示的文字。把鼠标移动到图片上，停留片刻显示内容
注：这个alt属性不常用，因为有些浏览器不支持（没有效果）

代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>图像标签</title>
 </head>
 <body>

  <img src="事务.jpg"width="400"height="300"alt="这是图片的文字">

 </body>
</html>

最低0.47元/天解锁文章

RenSLei

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习-html规范、操作思想、常用标签（重点：表单）

JavaWeb_Html_学习笔记1、html的简介：什么是html? -HyperText Markup Language :超文本标记语言，网页语言 **超文本：超出文本的范畴，使用html可以轻松实现这样的操作 **标记：html所有的操作都是通过标记实现的，标记就是标签，&lt;标签名称&gt; **网页语言：...
复制链接

扫一扫