HTML基础教程-CSDN博客

本文链接：https://blog.csdn.net/daqi1983/article/details/119331397

一、html简介

它是一门描述网页的语言，HyperText MarkUp Language,超文本标记语言。

* 超文本：超出文本的范畴，指的在网页上面可以描述文本、图片、视频等内容

* 标记：用不同的标签把同样的内容标记出不同的含义。

* 语言：html就是用户和浏览器交互的工具，简单来讲，浏览器会解析html的标记，以特定的效果给展示出来

二、 html的主要组成部分：

*文档的声明<!DOCTYPE>: 声明了html的类型和版本号

*html的根标记<html> </html>:标识html的开始和结束

*html的头部标记<head> </head>:设置与页面相关的信息

*html的主体标记<body> </body>：在页面展示内容。

三、html的书写规范：

1.html的文件后缀名可以是“.html”或者“.htm”。

2.html文件的格式：

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

<html>
 <head>
   <title>insert title here</title>
 </head>
 <body>
 这是我的第一个html
 </body>
</html>

3.html文件必须以<html>开始，以</html>结束

4.html语法不区分大小写

四、html作用

它用来编写网页，在网页通过html标记来描述文本、图片、视频等内容

五、标记分类

1.单标记：

空标记，就是没有结束标记的称之为单标记。

语法：<hr /> ,<br />

2.双标记：

体标记，就是这个标记有开始和结束。

语法：<font>内容</font>

六、常见标记

文本控制和文本样式标记

1.段落标记<p></p>和换行标记<br />

段落标记：段落与段落之间会自动换行。

2.文本样式标记<font>内容</font>

常用的属性：

face 用来描述字体的样式

size 用来描述字体的大小，最大取值为7

color 用来描述字体的颜色，取值三种形式：

* 用英文单词表示：red, green,blue

* 用16进制的数据表示：#ff0000

* 用rgb三原色表示：rgb(255,255,0)

3.其它标记：

标题标记：<h1></h1>,<h2></h2>-------<h6></h6>

字体样式标记：<b></b>,<i></i>,<u></u>

图像标记：

1.图像标记：在网页上引入图片

语法：<img src="图像的url" />

常用的属性：src 用来引入图片

width 描述图片的宽度

height 用来描述图片的高度

border 用来描述图片的边框

注意：图片的路径分为绝对路径和相对路径（同级目录，上级目录，下级目录）

注释标记：

，注释标记的内容不会显示在网页上面。

表格标记：

1.表格的作用：将数据更加有条理的显示出来，用来规划网页。

2.语法：

<table>
    <tr>
        <td>单元格的内容</td>
    </tr>
</table>

tr:表示行(常用的属性 align 描述表格内的内容显示位置)

td:表示单元格，合并行：rowspan,合并单元格：colspan

th:表头，大多数浏览器会把表头显示为粗体居中的文本。

常用的属性：

border:给表格添加边框。

width: 描述表格的宽度

align:描述表格的位置

cellspacing:描述边框的厚度

cellpadding：描述文字与边框的距离

合并操作：

1.要确定表格有多少行和多少列

2.要确定合并的是行，还是列。

表单标记：

表单简介：把用户输入的数据提交到服务器端，简单来说，表单用来让用户输入数据，表单把数据封装起来，提交到指定的位置。

表单组成：

>>> 表单控件：用户输入数据，比如说输入用户名，输入密码。

>>> 提示信息：告诉用户输入框要输入什么值。

>>> 表单域：标识表单的开始和结束，语法：例如：<form> 提示信息：表单控件</form>

1.创建表单

比如：

<form action="htmlDemo01.html" method="post" name="登录表单">

    用户名：<input type="text" name="username" /><br/>
    密码：<input type="password" name="psw" /><br/>
    <input type="submit" value="提交" />

</form>

常用的属性：action 表示表单要提交的位置、

method:表单提交的方式，常用的有get提交和post提交，默认提交方式是get

get和post区别：

1、get提交：数据会显示在浏览器的地址栏，不安全，提交的数据大小是有限制。

2、post提交：数据不会显示在地址栏，是安全的，提交的数据大小没有限制。

2.表单控件：<input />

输入框控件的属性type:

文本框：text

密码框：password

单选按钮：radio

复选按钮：checkbox

上传按钮：file