HTML基本知识和常用的标签
系统结构
**
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
微信
支付宝
…
HTML
什么是HTML
HTML: Hyper Text Markup Language （超文本标记语言）
由大量的标签组成，每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名=“属性值” 属性名=“属性值”>
</标签>
</标签>
</标签>
超文本: 流媒体、图片、声音、视频…
怎么开发HTML
HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder…
怎么运行HTML
直接采用浏览器打开HTML文件就是运行。
HTML是谁制定的
W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5.
我们这里学习HTML4.0（主要是学习一下HTML的基础用法。）
W3C制定了很多规范：
HTML/XML/http协议/https协议…
为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
w3school:先出现的，和W3C没有关系
w3cschool：后出现的，和W3C没有关系
HTML语法
基本标签
段落标记：<p></p>
标题字：<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
换行：<br/>独目标记
水平线：<hr/>
预留格式：pre
粗体字：<b></b>
斜体字：<i></i>
插入字：<ins></ins>
删除字：<del></del>
右上角加字：<sup></sup>
右下角加字：<sub></sub>
font标签：<font size="3" color="red"></font>
实体符号
空格：
大于号：>
小于号：<
表格
基本表格
<table border="像素" width="像素或百分比" height="像素或百分比" align="center"><tr align="center"><td>test</td><td>test</td><td>test</td></tr><tr><td align="center">test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td></tr>
</table>
行合并：rowspan
列合并：colspan
背景颜色和背景图片
bgcolor background
图片
（1）<img src="" width="" height="" alt="" title=""/>
（2）只设置图片的宽度，高度等比例缩放，不建议设置高度，设置高度容易失真。
超链接或热链接
（1）超链接的作用
向服务器发送请求，链接到某个资源
（2）链接到网络中的某个资源
<a href="http://www.baidu.com"></a>
（3）链接到本地的某个资源
<a href="本地文件的相对路径或绝对路径都可以"></a>
（4）图片做超链接
<a href=""><img/></a>
（5）超链接的target属性
_blank
_self
_parent
_top
（6）用户点击超链接和在浏览器地址栏上直接输入URL是完全相同的效果，只不过超链接更傻瓜式。
列表
有序列表
<ol type="1/A/a/I"><li>中国<ol><li>北京</li><li>天津</li><li>上海</li></ol></li><li>美国</li><li>日本</li>
无序列表
<ul type="disc/circle/square"><li>中国<ul><li>北京</li><li>天津</li><li>上海</li></ul></li><li>美国</li><li>日本</li>
</ul>
表单
用户名 密码
（1）action属性等同于超链接的href属性，填写请求的url
（2）input标签属于输入域标签，input标签的type属性是text，表示文本框，是password，表示密码框
（3）input标签的type是submit表示提交按钮，该按钮可以提交表单，所谓表单的提交是发送请求url，并携带数据给服务器。
（4）所有按钮的value属性都是用来设置按钮上显示的文本内容
（5）发送请求并提交数据时，数据格式遵循HTTP协议，所有浏览器都会采用这种格式：url?name=value&name=value&name=value…，其中name是input标签的name属性，value是input标签的value属性
（6）文本框和密码框的value不需要开发人员指定，用户填写的数据就是value。
（7）submit按钮放到form标签外面无法提交表单
（8）普通按钮不具备提交表单的能力。
orm表单的method属性：
（1）method不写或写上get都属于get请求，method写post才是post请求
（2）get请求在HTTP协议的请求行上提交数据，最终提交的数据会显示在浏览器地址栏上
（3）post请求在HTTP协议的请求体中提交数据，最终提交的数据不会显示到浏览器地址栏上
（4）只有当使用form表单，并且method属性设置为post才是post请求，其他请求均为get，超链接也是get请求。
下拉列表怎么显示多个条目，怎么支持多选
（1）支持多选：multiple=“multiple”
（2）显示多个条目：size="3
举例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册的表单</title></head><body><!--用户注册：用户名密码确认密码性别兴趣爱好学历简介--><br><br><br><br><br><br><br><br><!--form表单method属性get：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏。post：采用post方法提交的时候，用户提交的信息不会显示在浏览器的地址栏上。method属性不指定，或者指定get，这种情况下都是get只有当method指定为post的时候，才是post请求。--><!--超链接是get请求，不是post请求--><a href="http://localhost:8080/oa/save?uername=abc&password=121">提交</a><form action="http://192.168.0.1:8080/jd/save" method="post"><table align="center" ><thead><tr align="center"><td colspan="2"><h1>用户注册</h1></td></tr></thead><tbody><tr align="center"><td>用户名</td><td><input type="text" name=username></td></tr><tr align="center"><td>密码</td><td><input type="password" name=userpwd></td></tr><tr align="center"><td>确认密码</td><td><input type="password" ></td></tr><tr align="center"><td>性别</td><td><input type="radio" name="usersex" value=1 checked>男<input type="radio" name="usersex" value=2>女</td></tr><tr align="center"><td>兴趣爱好</td><td><input type="checkbox" name="interest" value="smoke" checked>抽烟<input type="checkbox" name="interest" value="drink">喝酒<input type="checkbox" name="interest" value="firehead">烫头</td></tr><tr align="center"><td>学历</td><td><select name="grade"><option value="high">高中</option><option value="dz">大专</option><option value="bk" selected>本科</option><option value="ss">硕士</option></select></td></tr><tr align="center"><td>简介</td><!--文本域没有value属性--><td><textarea rows="10" cols="60" name="introduce"></textarea></td></tr><tr align="center"><td colspan="2"><input type="submit" value="注册"> <input type="reset" value="清空"></td></tr></tbody></table></form></body>
</html>
file控件
（1）文件上传时使用
（2）
hidden控件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>file控件</title></head><body><!--file控件：文件上传使用--><input type="file"><form action="http://localhost:8080/oa/save" ><!--隐藏域：网页上看不到，但是表单提交的时候会自动提交到服务器--><input type="hidden" name="userid" value="1111">用户代码<input type="text" name="usercode"><input type="submit" value="提交"></form></body>
</html>readonly与disabled
（1）readonly：只读，不能修改，提交表单时数据会提交
（2）disabled：只读，不能修改，提交表单时数据不会提交
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>readonly disabled</title></head><body><!--readonly和disabled相同点：都是只读不能修改。但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）。--><form action="http://localhost:8080/taobao/save">用户代码<input type="text" name="usercode" value="111" readonly><br>用户姓名<input type="text" name="username" value="zhangsan" disabled><br><input type="submit" value="提交"></form></body>
</html>
input控件的maxlength
maxlength 属性规定输入字段的最大长度，以字符个数计。
HTML中元素的id属性和class属性
1、在HTML当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识，所以在同一个HTML文档当中，id值不能重复。
2、表单提交数据的时候，只和name有关系，和id无关
3、id有什么用?
JavaScript语言：可以对HTML文档中的任意节点进行增删改操作。
id的存在让我们获取元素（节点）更方便
4、HTML文档是一棵树，树上有很多节点，每一个节点有自己唯一的id
讲述HTML文档是一棵树（DOM树），树上有很多节点，每个节点一般都会有id属性，id属性具有唯一性，在同一个文档中不能重复，id是该节点的唯一标识。后期所学的javascript语言可以对DOM树上的节点进行增删改，达到动态效果。javascript主要通过节点的id来获取该元素。
div和span属性
理解div是一种图层，div主要使用在网页布局方面，通过后期所学的CSS可以设置div的宽度、高度、位置等样式。div比table的布局更加灵活。
1、div和span是什么？有什么用？
div和span都可以成为“图层”。
*图层的作用是为了保证页面可以灵活的布局。
*div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
3、div和span的区别？
div默认独占一行（默认情况下）
span不会独占一行
HTML基本知识和常用的标签相关推荐
- 2、前端开发：HTML知识总结——常用H5标签
h1-h6标签 标题标签,粗体或大号,h1为一级标题,最粗最大. 搜索引擎使用标题为您的网页的结构和内容编制索引. 因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很 ...
- 5-struts2知识补充( 常用的struts2的标签,数据回显,防止重复提交）
目录: ognl 常用struts2标签 数据回显 防止数据重复提交 1)ognl:Object Graph Navigation Language 简介:ognl工作在视图层,可以简化数据的访问操作 ...
- HTML5常用基础标签
HTML5中的标签众多,有时新手刚入门前端很容易步入误区,即想要一把抓掌握所有的知识,其实全部掌握效果不尽人意,相反会让我们学习受挫,效率低下,因此"片面"的学习有助于我们提高学习 ...
- Beetl模板 以@为定位符常用的标签和方法
Beetl模板 以@为定位符常用的标签和方法 1.如何使用layout @layout("/common/_container.html",{pluginis:["ztr ...
- [Jsp] 如何在JSP页面快速输出从Servlet接收的数据_看JSTL常用C标签的威力
JSTL的常用C标签 1)c:out 单值输出 语法: <c:out value="" /> <c:out value=""></ ...
- HTML一些常用的标签
html常用的标签一般用以下这些: div.p.span.img.h1~h6.from.table.th.td.a.br.ul.li.ol.button.input.nav.main.section. ...
- 你应该更新的Java知识之常用程序库
些库有的解决了平时常见又重要的问题,有的则让Coding变得更惬意,值得全速跟进了解! 原文 在很多人眼中,Java已经是一门垂垂老矣的语言,但并不妨碍Java世界依然在前进.如果你曾离开Java,云 ...
- db2 replace函数的用法_SQL基础知识：常用字符处理函数
原标题:SQL基础知识:常用字符处理函数 作者:丶平凡世界
- 显示多文档标签_HTML常用基础标签，前端从入门到精通
首先,我们来理解一下一个网页的基本组成 代码如下 一个网页是有许许多多的标签对组成的,即开始标签-结束标签,都是成对出现(当然我们后面会说的还存在单标签,表示自闭合标签,例如: ) 对上述的标签先来解 ...
最新文章
- 火星无人机同款技术全部公开！高通还特意给Plus了一下
- 教授爆笑讲解超级玛丽
- C++函数模板Demo - win32 版
- AI理论知识整理（1）-数列（1）
- RequireJS 主要函数
- Android内部存储与外部存储解析
- openjdk8 项目结构_OpenJDK织机和结构化并发
- Android9.0 setMasterVolume流程分析(二十三)
- PHP实现Restful风格的API（转）
- 网络之美：JavaScript中Get和Set访问器的实现
- onclick与addEventListener的区别
- 设备指纹技术分析和应用分析
- 经济均衡问题及其应用 (一)：根据供需函数 确定市场的清算价格
- （一）理解word2vec：原理篇
- 放开后经济会变好吗？越南是怎样度过的？
- HTML和css结合的第二种方式 head中用style语句
- matlab 点顺时针排序,按顺时针顺序对点排序？
- java 生成banner 服务 字体
- 元宇宙：未来or骗局？
- Eclipse入门教程