自学WEB前端-1（HTML）

最新推荐文章于 2025-12-16 21:51:40 发布

原创最新推荐文章于 2025-12-16 21:51:40 发布 · 263 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文介绍了作者自学Web前端的起点——HTML，并阐述了Web的学习路线。解释了B/S架构和资源分类，强调HTML作为静态资源的基础作用。还简单提到了HTML的标记语言特性以及GET和POST请求的区别。

WEB前端学习路线之HTML

Web的学习路线

作为一个大学IT狗，我的大学生活真的是什么都没学会，玩游戏看视频，王者也荣耀了，电影也看完了，突然觉得很无聊，发现自己专业课什么也没学到，公司要求肯定是达不到，于是想自己学点东西，做点东西，就从Web前端开始吧。

Web的学习路线

HTML—>CSS—>JavaScript—>jQuery—>BootStrap—>Less—>ES6—>MySQL—>PHP—>AJAX—>Node.js—>Vue.js—>Angular.js—>Git
学习web首先要了解B/S架构，为什么呢？因为B/S架构即浏览器和服务器架构模式，是对C/S架构的一种变化或者改进的架构，通过B/S架构可以更好的对web程序进行开发维护。
首先，了解资源的分类，便于我们更好的理解web的各个部分。

一、资源分类

资源分类
- 静态资源：
  - 使用静态网页开发技术发布的资源。
    特点：所有用户访问，得到的结果是一样的。如：文本，图片，音频，视频，Html，Css，JavaScript。
    如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎可以来展示静态资源。
- 动态资源：
  - 使用动态网页开发技术发布的资源。
    特点：所有用户访问，得到的结果可能不一样的。如：jsp/servlet，php，asp…
    如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，发送给浏览器来展示静态资源。

二、静态资源之HTML

HTML 用于搭建基础网页，展示网页内容
HTML全称Hyper Text Markup Language 即超文本标记语言
超文本：用超链接的方法将各种不同空间的文字信息组织在一起的网状文本
标记语言：由标签构成的语言 <标签名称>

基础

      1.标签可以嵌套
注：需要正确嵌套，不能你中有我，我中有你。

		<!--错误嵌套-->
		<html>   <head>
		</html> </head>  

		<!--正确嵌套-->
		<html>  <head>
		</head></html>

      2.在开始标签中可以定义属性。
      	属性是键值对构成，值需要用引号“”引起来。
      3.HTML不区分大小写，但是官方推荐用小写。

      2.文件标签
		 <html>      根标签。
		 <head>      头标签。用于指定文档的一些属性，引入外部的资源。
		 <title>     标题标签。
	 	 <body>      体标签 。
	 	 <!DOCTYPE>  声明是html文档。
      3.文本标签
	 	 注释 <!-- 注释内容 -->
		 <h1></h1>  一级标题标签  。
		 <h2></h2>  二级标题标签    。（标签有1~6级）
	 	 <p></p> 段落标签。
	 	 <br></br> 换行标签。
		 <hr></hr> 展示一条水平线。
			 hr标签属性：
		 		color：颜色   
		 		width：宽度
		 		size：高度
		 		align：对齐方式
		 <b></b>：字体加粗。
		 <i></i>：字体斜体。
		 <center></center>：文本居中。
		 <font></font>：字体标签。
			 字体标签属性：
		  		color：颜色
					RGB （red,green,blue）
						写法1 reg(值1，值2，值3)   值范围：0~255    例如 rgb（0，0，255）
						写法2（推荐）#值1值2值3     值范围：00~FF    例如 #FF00FF
		 		width：宽度
					 默认数值的单位：     px 即 像素
			 		 数值％：           占比相对于父元素的比例
      4.图片标签
		 src    规定显示图像的 URL。
		 alt    规定图像的替代文本。
      5.列表标签
	 	 有序列表
			<ol>
				<li>
				</li>
			</ol>

	  	 无序列表
			<ul>
				<li>
				</li>
			</ul>
    6.链接标签
	   <a>  定义一个超链接
	     属性：
	         href          规定链接的目标 URL。
	         download      指定下载链接。
	         target        规定在何处打开目标 URL。仅在 href 属性存在时使用。
    7.div和span
           <div> 标签       本身并不代表任何东西，使用它可以标记区域
           <span> 标签      对元素进行分组，使它们以不同的样式显示  
    8.语义化标签
           <header>   页眉
           <footer>   页脚
    9.表格标签
	  	<table>	    定义一个表格
		<caption>	定义表格标题。
		<th>	    定义表格中的表头单元格。
		<tr>	    定义表格中的行。
		<td>	    定义表格中的单元。
		<thead>		定义表格中的表头内容。
		<tbody>		定义表格中的主体内容。
		<tfoot>		定义表格中的表注内容（脚注）。
		<col>		定义表格中一个或多个列的属性值。
		<colgroup>	定义表格中供格式化的列组。
		<td  colspan="1">文本</td>   1表示所占行数为1
		<td  rowspan="2">文本</td>   2表示所占列数为2

    10.表单标签	
    
		<form>		定义一个HTML表单，用于用户输入。
	属性								值               	  	描述  
accept-charset					character_set		规定服务器可处理的表单数据字符集。
action	        					URL	        	规定当提交表单时向何处发送表单数据。
autocompleteNew						on	
									off				规定是否启用表单的自动完成功能。
enctype					application/x-www-form-urlencoded
							multipart/form-data
								text/plain			规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）
method								get
									post			规定用于发送表单数据的 HTTP 方法。
name								text			规定表单的名称。
novalidateNew					novalidate			如果使用该属性，则提交表单时不进行验证。
target								_blank
									_self
									_parent
									_top			规定在何处打开 action URL。
		<input>			定义一个输入控件
		<textarea>		定义多行的文本输入控件。
		<button>		定义按钮。
		<select>		定义选择列表（下拉列表）。
		<optgroup>		定义选择列表中相关选项的组合。
		<option>		定义选择列表中的选项。
		<label>		定义 input 元素的标注。
		<fieldset>		定义围绕表单中元素的边框。
		<legend>		定义 fieldset 元素的标题。
		<datalist>		规定了 input 元素可能的选项列表。
		<keygen>		规定用于表单的密钥对生成器字段。
		<output>		定义一个计算的结果

get和post的区别：
get
请求参数会在地址栏中显示，参数会封装在请求行中。
请求参数的长度是限制的。
不太安全。
post
请求参数不会在地址栏中显示。
请求参数的长度是没有限制的。
比较安全。
11.表单项标签
input 通过type属性可以改变元素展示样式
select 下列表
textarea 文本域
hidden 隐藏域,用于提交一些信息