100字范文 > 零基础学前端之HTML全套基础教程【学习笔记】

零基础学前端之HTML全套基础教程【学习笔记】

时间：2019-11-28 17:28:41

【前端总路线学习笔记】

文章目录

HTML全套基础教程【学习笔记】1.系统结构2.软件环境准备3.HTML概述4. 我的第一个HTML5. HTML的基本标签6.HTML的实体符号7. 表格*8.单元格的合并9. 表格的其他标签thead tbody tfoot10. 背景色和背景图片11. HTML图片img标签12. HTML超链接及其作用12. HTML列表13. HTML-form表单*****1. 表单form2.表单实例：用户注册的表单3.其他form 控件14. HTML中元素的id属性15.TML中的div和span

HTML全套基础教程【学习笔记】

1.系统结构

B/S架构：

Browser / Server （浏览器/服务器的交互形式。）

Browser支持哪些语言：HTML CSS JavaScript

写HTML CSS JavaScript代码的这波人职位叫做：WEB前端开发工程师。（Java程序员目前来看也需要会一些前端的东西。）

前端页面上的图片需要UI设计师完成。（PS对java程序员来说没有太高的要求。）

S是服务器端Server，Server端的语言很多：C C++ Java python…（我们主要是使用Java语言完成服务器端的开发）

B/S架构的系统有什么优点和缺点？

优点：升级方便，只升级服务器端代码即可。维护成本低。缺点：速度慢、体验不好、界面不炫酷

企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业内部更注重维护的成本。

B/S架构的系统有哪些代表？

京东

百度

天猫

…

C/S架构

Client / Server （客户端/服务器端的交互形式。）

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

优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）

常见的C/S架构的系统：

QQ微信支付宝…

2.软件环境准备

世界五大主流浏览器

Internet Explorer 简称ie，微软公司旗下浏览器

google chrome浏览器，google旗下浏览器，追求简洁、快速、安全，个人认为是最好用、速度最快的浏览器。

firefox浏览器，简称FF浏览器，mozilla公司旗下浏览器（第一次安装打开快）

safari浏览器，苹果公司旗下浏览器，在苹果系统下是很优秀的浏览器（不需要安装）

opera浏览器，挪威厂商opera旗下浏览器（不需要安装）

3.HTML概述

什么是HTML？怎么开发HTML？怎么运行HTML？ HTML: Hyper Text Markup Language （超文本标记语言）

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

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

超文本: 流媒体、图片、声音、视频…

HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm

HTML也有专业的开发工具，例如：DreamWeaver、HBuilder…

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

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

HTML/XML/http协议/https协议… 为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。 w3school:先出现的，和W3C没有关系w3cschool：后出现的，和W3C没有关系

4. 我的第一个HTML

HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm

HTML也有专业的开发工具，例如：DreamWeaver、HBuilder…

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

不加注释的代码

<html><head><title>网页的标题</title></head><body>网页的主体内容，欢迎学习HTML！</body></Html>

加注释的代码

<!doctype html><html><head><title>网页的标题</title></head><body>网页的主体内容，欢迎学习HTML！</body></html>

5. HTML的基本标签

上面是注释格式

段落标记

<p>段落内容</p>

标题字：：是HTML预留的格式，和word中的标题字相同

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

换行标记

<br> (换行标记，br标签是一个独目标记)

横线，是独目标记，

<hr>* <hr color="red" width="50%">* color和width都是hr标签的属性* 这里属性值引号可以是双引号，单引号，也可以没有

预留格式

<pre>内容</pre><pre>for(int i = 0; i < 10; i++){System.out.println("i = " + i);}</pre>若没有<pre>内容</pre>，原内容不会换行，需要使用相关标签

其他标签

<del>删除字</del><ins>插入字</ins><b>粗体字</b><i>斜体字</i>右上角加字（10的平方）：10<sup>2</sup>右下角加字（10m）：10<sub>m</sub>字体标签：<font color="red" size="50">字体标签</font>居中标签：<center>内容</center>

上述标签使用代码

<!doctype html><html><head><title>HTML的基本标签</title></head><body><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。<h1>标题字</h1><h2>标题字</h2><h3>标题字</h3><h4>标题字</h4><h5>标题字</h5><h6>标题字</h6>hello world!hello <br>world!<hr><hr color="red" width="50%"><hr color='green' width=30%><pre>for(int i = 0; i < 10; i++){System.out.println("i = " + i);}</pre><del>删除字</del><ins>插入字</ins><b>粗体字</b><i>斜体字</i>10<sup>2</sup>10<sub>m</sub><font color="red" size="50">字体标签</font></body></html>

6.HTML的实体符号

<html><head><title>实体符号</title></head><body>b<a>cb<a>cabcdef<br>a          bc</body></html>

7. 表格*

* 一个表：<table></table>* 一行：<tr></tr>* 一个格：<td></td>* th 标签也是单元格标签，比td多的是居中、加粗。例：三行三列表：<table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>* table的属性border="1px" 设置表格的边框为1像素宽度。width 表格的宽度 width="300px" 宽度为三百像素width="60%" 占网页的60% ，同网页变化height 表格的高度使用和宽度类似align 对齐方式，也可以是tr td 的属性 align="center" 居中对齐

<!doctype html><html><head><title>表格</title></head><body><br><br><br><br><br><br><br><br><center><h1>员工信息列表</h1></center><hr><table align="center" border="1px" width="60%" height="150px"><tr align="center"><td>a</td><td>b</td><td>c</td></tr><tr><td>d</td><td>e</td><td>f</td></tr><tr><td>x</td><td>y</td><td align="center">z</td></tr></table></body></html>

8.单元格的合并

注意：

“rowspan删除下面的格子”

“colspan删除哪一个无所谓，反正在一行里面在一起”

例：三行三列表的合并：<table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>行合并方法：删格(删掉的是下面的格子)（就是不写），另一个位置加上rowspan = "数字"<table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td rowspan = "2"></td></tr><tr><td></td><td></td></tr></table>列合并方法<table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td rowspan = "2"></td></tr><tr><td colspan="2">d</td><td></td></tr></table>

示例代码

<!doctype html><html><head><title>表格单元格合并，以及th标签</title></head><body><table border="1px" width="50%"><tr><th>员工编号</th><th>员工薪资</th><th>部门名称</th></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>a</td><td>b</td><td rowspan="2">f</td></tr><tr><td colspan="2">d</td></tr></table></body></html>

9. 表格的其他标签thead tbody tfoot

在table中不是必须的，只是这样做便于后期的JS代码的编写。

三个不同分类的表格不能相互合并

示例代码

<!doctype html><html><head><meta charset="gbk"><title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写。</title></head><body><table border="1px" width="50%"><thead><tr><th>员工编号</th><th>员工薪资</th><th>部门名称</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>a</td><td>b</td><td rowspan="2">f</td></tr><tr><td colspan="2">d</td></tr></tbody><tfoot><tr><td>1</td><td>2</td><td>3</td></tr></tfoot></table></body></html>

10. 背景色和背景图片

这里开始使用HBuilder编辑

<!DOCTYPE html><html><head><meta charset="utf-8"><title>背景颜色和背景图片</title></head><body bgcolor="red" background="C:\Users\Administrator\Desktop\1224_163037.png"></body></html>

11. HTML图片img标签

<!DOCTYPE html><html><head><meta charset="utf-8"><title>图片img</title></head><body><img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"/><img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"></img><br><br><br><img src="img/bd_logo1.png" /></body></html>

12. HTML超链接及其作用

<!DOCTYPE html><html><head><meta charset="utf-8"><title>超链接热链接</title></head><body><a href="">百度</a><a href="/">百度新闻</a><a href="/">京东商城</a><a href="/">天猫</a><a href="/">126邮箱</a><br><br><a href="007-背景颜色和背景图片.html">007</a><a href="/"><img src="img/hao123.png" width="120px"/></a><a href="/" target="_self"><img src="img/hao123.png" width="120px"/></a></body></html>

12. HTML列表

<!DOCTYPE html><html><head><meta charset="utf-8"><title>列表</title></head><body><ol type="I"><li>水果<ol type="a"><li>苹果</li><li>西瓜</li><li>桃子</li></ol></li><li>蔬菜<ol><li>西红柿</li></ol></li><li>甜点</li></ol><ul type="circle"><li>中国<ul type="square"><li>北京<ul type="disc"><li>东城区</li><li>西城区</li><li>海淀区</li><li>朝阳区</li></ul></li><li>天津</li><li>上海</li></ul></li><li>美国</li><li>日本</li></ul></body></html>

13. HTML-form表单*****

表单示例：用来收集用户信息：

1. 表单form

表单有什么用？

收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。怎么画一个表单？

使用form标签画表单。一个网页当中可以有多个表单form。表单最终是需要提交数据给服务器的 form标签有一个action属性，这个属性用来指定服务器地址：action属性用来指定数据提交给哪个服务器。action属性和超链接中的href属性一样。都可以向服务器发送请求（request）表单内部使用的标签 input type有多种形式，看下面示例感受作用submit button text password reset

<!DOCTYPE html><html><head><meta charset="utf-8"><title>表单form</title></head><body><form action="http://192.168.111.3:8080/oa/save"><input type="submit" value="登录"/><input type="button" value="设置按钮上显示的文本"/></form><a href="">百度</a><form action=""><input type="submit" value="百度" /></form><br><br><form action="http://localhost:8080/jd/login">用户名<input type="text" /><br>密码<input type="password" /><br><input type="submit" value="登录" /></form><form action="http://localhost:8080/jd/login"><table><tr><td>用户名</td><td><input type="text" name="username" /></td></tr><tr><td>密码</td><td><input type="password" name="userpwd" /></td></tr><tr align="center"><td colspan="2"><input type="submit" value="登录" />      <input type="reset" value="清空" /></td></tr></table></form><input type="submit" value="登录" /><input type="reset" value="清空" /></body></html>

2.表单实例：用户注册的表单

注意：确认密码没有提交，减轻服务器压力，若是两次密码不同，可在浏览器以其他方式拦截input的type的其他选项 radio(单选按钮) checkbox(多选按钮) radio(单选按钮)的value必须指定来进行提交，而且若是两个单选按钮只可以选一个，这两个的name必须相同，多个也是如此加checked默认选中checkbox(多选按钮)除了可以多选，使用方法都与单选按钮radio相同表单除了有input标签，还有select标签，select标签需要name ，在其内部需要option标签，这个标签需要value，默认选择需要添加selected

表单内部标签文本域属性有 rows cols name 没有value属性rows行高 cols列宽这两个属性设置大小 form表单method属性： get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。method属性不指定，或者指定get，这种情况下都是get。只有当method属性指定为post的时候才是post请求。剩下所有的请求都是get请求。post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来。超链接也可以提交数据给服务器，但是提交的数据都是固定不变的

超链接是get请求。不是post请求，即提交的网址中提交的信息不能隐藏，

格式：action?name=value&name=value&name=value&name=value&name=value…

<!DOCTYPE html><html><head><meta charset="utf-8"><title>用户注册的表单</title></head><body><form action="http://localhost:8080/jd/register">用户名<input type="text" name="username"/><br>密码<input type="password" name="userpwd" /><br>确认密码<input type="password"/><br>性别<input type="radio" name="gender" value="1" />男<input type="radio" name="gender" value="0" checked/>女 <br>兴趣爱好<input type="checkbox" name="interest" value="smoke"/>抽烟<input type="checkbox" name="interest" value="drink" checked/>喝酒<input type="checkbox" name="interest" value="fireHair" checked/>烫头<br>学历<select name="grade"><option value="gz">高中</option><option value="dz">大专</option><option value="bk" selected>本科</option> <option value="ss">硕士</option></select><br>简介 <textarea rows="10" cols="60" name="introduce"></textarea><br><input type="submit" value="注册" /><input type="reset" value="清空" /></form><a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a></body></html>

3.其他form 控件

下拉列表支持多选 multiple=“multiple”

选择或取消选中时需要按着ctrl键进行鼠标点击

<!DOCTYPE html><html><head><meta charset="utf-8"><title>下拉列表支持多选</title></head><body><select multiple="multiple" size="2"><option>河北省</option><option>河南省</option><option>山东省</option><option>山西省</option></select></body></html>

file控件上传文件使用

<!DOCTYPE html><html><head><meta charset="utf-8"><title>file控件</title></head><body><input type="file" /></body></html>

隐藏域hidden控件网页上看不到，但是表单提交的时候数据会自动提交给服务器运行下面代码，地址栏会发现提交了userid=111，但是网页上没有显示并不是为了安全，提交的信息没必要让用户看到，为了美观

<!DOCTYPE html><html><head><meta charset="utf-8"><title>file控件</title></head><body><form action="http://localhost:8080/oa/save"><input type="hidden" name="userid" value="111" />用户代码<input type="text" name="usercode" /><input type="submit" value="提交" /></form></body></html>

只读 readonly disabled

readonly和disabled相同点：都是只读不能修改。

但是readonly可以提交给服务器，

disabled数据不会提交（即使有name属性也不会提交。）

<!DOCTYPE html><html><head><meta charset="utf-8"><title>readonly disabled</title></head><body><form action="http://localhost:8080/taobao/save">用户代码<input type="text" name="usercode" value="110" readonly /><br>用户姓名<input type="text" name="username" value="zhangsan" disabled /><br><input type="submit" value="提交数据" /></form></body></html>

maxlength 设置文本框中可输入的字符数量

<!DOCTYPE html><html><head><meta charset="utf-8"><title>maxlength</title></head><body><input type="text" maxlength="3" /></body></html>

14. HTML中元素的id属性

在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。注意：表单提交数据的时候，只和name有关系，和id无关。id有什么用？

javascript语言：可以对HTML文档当中的任意节点进行增删改操作。

javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。

id的存在让我们获取元素（节点）更方便。HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。

javascript主要就是对这棵DOM树上的节点进行增删改的。DOM(Document)树。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML中元素的id属性</title></head><body id="mybody"><form id="myform"><input type="text" id="username" name="username"/><input type="password" id="userpwd" name="userpwd"/></form></body></html>

15.TML中的div和span

div和span是什么？有什么用？

div和span都可以称为“图层”图层的作用是为了保证页面可以灵活的布局。图层就是一个一个的盒子，div嵌套div就是盒子套盒子。div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。

其实最早的网页是采用table进行布局的，但是table不灵活，太死板。

现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。

div和span的区别？

div独自占用一行（默认情况下）span不会独自占用一行。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML中的div和span</title></head><body><div id="div1">我是一个DIV</div><div id="div2">我是一个DIV</div><span id="span1">我是一个SPAN标签</span><span id="span2">我是一个SPAN标签</span><div id="div3"><div><div>test</div></div></div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。