Web前端----HTML入门

最新推荐文章于 2024-09-10 14:15:01 发布

xxyneymar

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量467

点赞数

分类专栏： javaWeb 文章标签： html 前端

本文链接：https://blog.csdn.net/xxyneymar/article/details/120648726

版权

本文是关于HTML的入门教程，介绍了HTML的基本概念、B/S与C/S架构的优缺点，以及HTML4.0的基础语法。内容包括：HTML文件创建、基本标签如段落、标题、换行、图片、超链接、列表、表单等，还涵盖了表单的常用元素如input、select、hidden等，并讲解了id属性和div、span的布局作用。

摘要由CSDN通过智能技术生成

2.13 readonly和disabled

2.14 input控件的maxLength属性

2.15 元素的id属性

2.16 div和span

1.简介

1.1 系统架构

①B/S架构：Browser / Server。浏览器/服务器的交互形式。

优点：升级方便，只升级服务器端代码即可，维护成本比较低。

缺点：速度慢(因为很多数据都需要从服务器端下载过来)、体验不好、界面不炫酷。

②C/S架构：Client / Server。客户端/服务器端的交互形式。

优点：速度快，体验好，界面炫酷。

缺点：升级麻烦，维护成本较高。

1.2 HTML概述

HTML：Hyper Text Markup Language(超文本标记语言)。超文本即流媒体、图片、音频、视频等。

由大量的标签组成，每一个标签都有开始标签和结束标签。

<标签>

<标签属性名="属性值" 属性名="属性值">

</标签>

HTML开发的时候使用普通的文本编辑器即可，创建的文件扩展名是.html或.htm\。

直接采用浏览器打开HTML文件就是运行。

HTML是W3C(World Wide Web，世界万维网联盟)制定的，W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范，HTML程序员也会按照这个规范去写代码。HTML规范目前最高的版本是HTML5.0，简称H5。此处只进行HTML4.0的学习，主要学习一下HTML的基础用法。

W3C制定了很多规范：HTML、XML、http协议、https协议...

2.HTML的基础语法

2.1 第一个html文件

①html的注释

②加上代码"<!doctype html>"就是表示HTML5语法，去掉就表示HTML4.0

③HTML不区分大小写，语言松散不严格。

<!--
    1.这是html的注释
	2.加上代码“<!doctype html>”就表示HTML5语法。去掉就表示HTML4.0
	3.HTML不区分大小写，语法松散不严格。
-->
<!doctype html>
<!--根-->
<html>
    <!--头-->
    <head>
	     <meta charset="GBK">
	     <!--网页标题，显示在网页左上角-->
	     <title>网页的标题</title>
	</head>
	<!--体-->
	<body>
	     网页的主体内容，欢迎学习HTML！
	</body>
</html>

2.2 基本标签

1.段落标记 <p></p>

2.标题字 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

3.换行标记 <br> 注意换行标记是一个独目标记，不能加</br>

4.横线标记 <hr>

5.预留格式 <pre></pre> 中间代码写成什么样，就在网页上怎么显示。

6.删除字 <del></del>

7.插入字 <ins></ins>

8.粗体字 <b></b>

9.斜体字 <i></i>

10.右上角加字 <sup></sup>

11.右下角加字 <sub></sub>

12.字体标签 <font></font>

2.3 实体符号

实体符号的特点是以&开始，以;结束。

大于号>、小于号<可能与标签符号产生冲突，所以要引用实体符号。

①小于符号 <

②大于符号 >

③空格符号  

2.4 表格

1.一张表格：<table></table>

2.表格中的一行：<tr></tr>

3.表格中每行内的一格(即某行某列那一格)：<td></td>

一些属性：

border：设置表格的边框

width：设置每一格的宽度

height：设置每一格的高度

align：对齐格式

4.相邻单元格合并。行合并rowspan，列合并colspan。

<th></th>：也是单元格标签，但是会自动加粗居中。

<!doctype html>
<html>
    <head>
	     <title>表格单元格合并，以及th标签</title>
	</head>
	<body>
	     <!--注意事项：
		      1.row合并的时候，删除“下面的”单元格【行合并】
			  2.col合并的时候，对删除哪个没有要求【列合并】
		 -->
		 <table border="1px" width="50%">
		      <tr>
			       <!--
				   <td>员工编号</td>
				   <td>员工薪资</td>
				   <td>部门名称</td>
				   -->
				   <!--th标签也是单元格标签，比td多的是居中、加粗。-->
			       <th>员工编号</th>
				   <th>员工薪资</th>
				   <th>部门