Html的基本操作简介

B/S与C/S系统架构的概述：
B/S架构：Browser/Server(浏览器/服务器)，页面渲染不好，但没有客户端压力。
C/S架构：Client /Server(客户端/服务器)，侧重于客户端体验，但需要版本更新。

Web开发分为前端和后台:
前端：HTML + CSS(了解) + JavaScript + Jquery + BootStrap(了解)
后台：Servlet + JSP + EL表达式 + JSTL标签库
做B/S架构的开发就是做Web开发。

一.HTML_简介
1.什么是HTML?
Hyper Text Markup Language 超文本标签语言 HTML不属于编程语言，属于标签/标记语言，这种语言由大量的成对儿的标签组成。

HTML语法。
<标记属性=“值”>
标记的内容
</标记>
或
<标记属性=“值”></标记>
或
<标记属性=“值” />

3.怎么开发HTML?
新建一个xxx.html或者xxx.htm的文件，然后使用记事本打开编写HTML代码就能开发。
常见的HTML开发工具有哪些？
Dreamweaver(网页制作三剑客之一)
WebStorm(Web前端开发利器：适合HTML、CSS、JavaScript、jQuery(JavaScript框架)、BootStrap(基于jQuery的前端UI框架)……)

4.怎么运行HTML?
只要使用浏览器将xxx.html或者xxx.html文件打开即可运行。

5.HTML与W3C?(最新版本是：HTML5.0，简称H5)
W3C是万维网联盟，HTML标准就是这个组织制定的。W3C制定了很多标准，后期会不断学习(http协议也是W3C制定的)。

由W3C万维网联盟制定HTML语法规范(写标签实现功能)
–为每一个人公平、便利的提供教育服务。
真正去实施这些规范(标签功能)的是其实是浏览器制造厂商。
这就产生了浏览器的差异性问题(兼容性问题)!
即有的规范A支持,但B觉得没有必要,B就不支持。

6.安装浏览器软件。
世界五大主流浏览器：
Internet Explorer 简称IE，微软公司旗下浏览器。
Google Chrome浏览器，谷歌公司旗下浏览器。
FireFox浏览器，简称FF浏览器，Mozilla公司旗下浏览器。
Safar浏览器，苹果公司旗下浏览器。
Opera浏览器，挪威厂商Opera旗下浏览器。

7.开发软件的选择(安装路径上不要有中文和空格)。
-WebStorm9.0.3(开发用)
-FireFox(运行测试用)

8.前端开发的在线帮助：http://www.w3school.com.cn/

9.Hello World示例

 <html>    告诉浏览器以下写的都是HTML语法<head lang="en">    头(这个网页的配置信息 + 这个网页的标题)<meta charset="UTF-8"><title></title></head><body>     身体(写的是在网页里面真正显示的内容)</body></html>

通过上面的第一个Hello World例子，我们知道了如下几件事：
标签的开始和结束究竟长啥样(标签是可以嵌套的)
HTML语法松散，不区分大小写
HTML语法松散，不够严谨(有些标签不写结束也不会影响显示结果)
但是有些标签必须严谨,例如
属性

该属性配置的是页面的编码格式,写上它,网页上不会出现中文乱码二.HTML_基本标签 1.HTML注释：浏览器运行该页面时，会忽视掉注释里面的内容。

2.段落标签：让您的文章形成一个个的自然段。

3.标题字：给您的文章加一个的标题(区别于页面标题title)，其字号是由大到小，h1最大。

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

4.换行

独目标签，也可以写做成“”或者写做成“
”。

5.align属性(设置对齐方式，很多标签都有该属性共用属性)

align="center"是h1标签的属性，该属性用来设置对齐方式 align是属性名 "center"是属性值还有其它取值：left、right。 HTML中的字符串可以使用双引号，也可以使用单引号括起来。

6.水平线

这里的内容也会居中

三.HTML_常用实体符号：小于号、大于号、空格。
< >

显示结果描述实体名称
空格
< 小于号 <

大于号 >
& and符号 &
" 双引号 "
’ 单引号 '(IE不支持)
¢ 分 ¢
£ 英镑 £
¥ 人民币元 ¥
§ 章节 §
© 版权 ©
® 注册商标 ®
× 乘号 ×
÷ 除号 ÷

四.HTML_表格

基本的表格：table_tr_td

table 表格
tr 行
td 列
颜色:红绿蓝
#xxxxxx(十六进制数)

<table border="1" width="80%" align="center"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr bgcolor="#ECFFFF"><td>张三</td><td>男</td><td>23</td></tr><tr><td bgcolor="#8fbc8f">李四</td><td>男</td><td>21</td></tr>
</table>

th_thead_tbody_tfoot
th 表头用来替换td的，自动黑体居中

 thead      表格第一行，与书写顺序无关      tbody      表格中间部分，与书写顺序无关

tfoot 表格最后一行，与书写顺序无关

<tfoot><tr><td>田七</td><td>女</td><td>18</td></tr>
</tfoot>
<thead>
<tr><th>姓名</th><th>性别</th><th>年龄</th>
</tr>
</thead>

张三	男	23
李四	男	21
王五	男	22

3.单元格合并：colspan、 rowspan
colspan=“2” 纵向跨2列，但要确保有列能跨
rowspan=“2” 横向跨2行，但要确保有行能跨

<table border="1px" width="80%" align="center"><tbody><tr><td colspan="2" rowspan="40000">张三</td><td>男</td><td>23</td></tr><tr><td>李四</td><td>男</td><td>21</td></tr><tr><td>王五</td><td>男</td><td>22</td></tr>
</tbody><tfoot><tr><td>田七</td><td>女</td><td>18</td></tr></tfoot><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead>
</table>

五.HTML_图片

<img src=""  width=""  height=""  alt=""  title=""/>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><!--img  图片src属性指定要显示的图片(图片的路径)路径:相对路径：相对于你当前的位置绝对路径：复制图片的地址(URL)alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。“alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息，此时，浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯，它有助于更好地显示信息。
title属性将鼠标放在图像上，将能够看到这个文本。--><img src="img/1.jpg"/><img src="复制图片的地址(URL) "/>
</body>
</html>

六.HTML_超链接：在HTML页面中最常见的标签。

超链接其实是web站点中的导航，a_href属性_target属性

 <a href="http://baidu.com" target="_blank">百度</a><br>
<a href="03.表格.html">表格</a>

2.锚点

<a name="top"></a><img src="img/1.jpg"/><img src="img/1.jpg"/><img src="img/1.jpg"/><a href="#top">返回顶部</a>

3.图片超链接：首先要给我一张图片，然后告诉我点击这张图片要跳转到哪去

<a href=" http://baidu.com"><img src="img/1.jpg"/></a>

用户点击超链接和用户在浏览器地址栏上直接编写URL的区别与联系
联系
-都是对服务器发送请求
```
  区别-访问是否简单-能否携带"参数"
```

七.HTML_列表

<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><!--列表有序   ol无序   ul项     li--><ul><li>早餐</li><li>午餐</li><li>晚餐</li></ul><ol type="A"><li>早餐</li><li>午餐</li><li>晚餐</li></ol>
</body>
</html>

八.HTML_表单
1.

   form_text_password_submit<html><head lang="en"><meta charset="UTF-8"><title></title></head><body><!--1.表单的作用?收集用户的数据,并把数据发送给服务器进行处理2.表单    form-action属性:指定表单的提交地址3.表单元素-inputtype：text(输入框)  password(密码框)  submit(提交按钮)4.表单元素的提交要求-需要指定name属性值5.表单提交数据方式-GET(地址栏来传递表单参数 03.表格.html?username=abc&userpass=456&age=23)?前面是地址，?后面是参数，多个参数用  &  分开
--><form action="03.表格.html">账号:<input type="text" name="username"/><br>密码:<input type="password" name="userpass"/><br><input type="submit"/></form>
</body>
</html>

radio_checkbox_value
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><!--1.表单元素-inputradio(单选)需要给单选按钮相同的name属性，说明它们是同一组的单选按钮，因为同一组的单选按钮之间才有“互斥效应”。单选按钮提交时除了要指定name属性，还需要指定其value属性。checkbox(复选框) 可以多选， name属性值相同，但value属性值不同。2.value属性：其作用就是指定 提交参数的值。即name指定提交参数的名，而value指定 提交参数的值。
--><form action="03.表格.html">账号:<input type="text" name="username"/><br>密码:<input type="password" name="userpass"/><br>性别:<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女<br>偶像:<input type="checkbox" name="like" value="1"/>张三<input type="checkbox" name="like" value="2"/>李四<input type="checkbox" name="like" value="3"/>王五<input type="checkbox" name="like" value="4"/>田七<br></form>
</body>
</html>

 select_option_file
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><!--1.表单元素-input-select(下拉列表框)-option(列表选项)-file(文件选择框)-只是提供一个样式，并没有真的实现把文件上传到服务器的功能。-一定不要忘记指定其name属性值，因为不指定name属性值就不会提交参数。
--><form action="03.表格.html">账号:<input type="text" name="username"/><br>密码:<input type="password" name="userpass"/><br>性别:<input type="radio" name="sex" value="1"/>男的<input type="radio" name="sex" value="0"/>女的<br>偶像:<input type="checkbox" name="like" value="1"/>张三<input type="checkbox" name="like" value="2"/>李四<input type="checkbox" name="like" value="3"/>王五<input type="checkbox" name="like" value="4"/>田七<br>部门:<select name="dept"><option value="10">开发部</option><option value="20">运维部</option><option value="30">售后部</option></select><br>头像:<input type="file" name="img"/><br></form>
</body>
</html>

textare_hidden_reset_button
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><!--1.表单元素
-textare(文本域)以行和列的配置来控制它最初的大小。
一定不要忘记指定其name属性值，因为不指定name属性值就不会提交参数。-inputhidden(隐藏域)   在页面上是看不见的，但是表单提交时会提交参数。reset(重置按钮)恢复表单的最初值button(普通按钮)
--><form action="03.表格.html">账号:<input type="text" name="username"/><br>密码:<input type="password" name="userpass"/><br>性别:<input type="radio" name="sex" value="1"/>男的<input type="radio" name="sex" value="0"/>女的<br>偶像:<input type="checkbox" name="like" value="1"/>张三<input type="checkbox" name="like" value="2"/>李四<input type="checkbox" name="like" value="3"/>王五<input type="checkbox" name="like" value="4"/>田七<br>部门:<select name="dept"><option value="10">开发部</option><option value="20">运维部</option><option value="30">售后部</option></select><br>头像:<input type="file" name="img"/><br>简介:<textarea rows="10" cols="30" name="info"></textarea><br><input type="hidden" name="nosee" value="yousee"/><br><input type="submit"/><input type="reset"/><input type="button"/></form>
</body>
</html>

value_selected_checked
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><!--1. value属性：除了可以设置参数的值，还可以设置默认值。注：file(文本选择框)不用设置默认值，因为不能保证文件一定存在。textarea(文本域) 不能用value属性设置默认值，可以直接把其默认值写在标签中间即可。2.checked属性：设置单选按钮或复选框被默认选中。3.selected属性：设置下拉列表框中的某个选项被默认选中。--><form action="03.表格.html">账号:<input type="text" name="username" value="请输入你的银行卡号"/><br>密码:<input type="password" name="userpass" value="123456"/><br>性别:
<input type="radio" name="sex" value="1" checked/>男的
<input type="radio" name="sex" value="0"/>女的<br>偶像:<input type="checkbox" name="like" value="1"/>张三<input type="checkbox" name="like" value="2" checked/>李四<input type="checkbox" name="like" value="3"/>王五<input type="checkbox" name="like" value="4" checked/>田七<br>部门:<select name="dept"><option value="10">开发部</option><option value="20">运维部</option><option value="30" selected>售后部</option></select><br>头像:<input type="file" name="img" /><br>简介:<textarea rows="10" cols="30" name="info" >这个家伙很懒,什么也没留下....</textarea><br><input type="hidden" name="nosee" value="yousee"/><br><input type="submit" value="注册"/>
<input type="reset" value="重填"/>
<input type="button" value="关机"/></form>
</body>
</html>

6.表单知识点总结

 size_maxlength_multiple_readonly_disabled_get_post
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><!--1.浏览器发送请求方式有哪些-地址栏-超链接-表单2.size属性和maxlength属性-size属性可以控制输入框的宽度，但并不能控制输入框中输入多少个字符。-maxlength属性就是控制输入框中可以最多输入多少个字符。3. select(下拉列表框)如何设置显示多个选项，并且支持多选？multiple:多选4.readonly、disabled的区别？readonly属性：只读信息会随表单提交，用户只能看不能改，鼠标可以选中。disabled属性：不可用信息不会随表单提交，鼠标也不可以选中!5.表单提交的get和post方式(method)？-GET(地址栏  ?  &)-POST(请求体)--><form action="03.表格.html" method="post">账号:<input type="text" name="username"  size="5" value="bjhk" readonly/><br>密码:<input type="password" name="userpass" size="10"/><br>部门:<select name="dept" multiple><option value="10">开发部</option><option value="20">运维部</option><option value="30">售后部</option><option value="40">售前部</option><option value="50">收银部</option></select><br><input type="submit" value="注册"/><input type="button" value="同意" disabled/></form>
</body>
</html>

九.

HTML_ id_div_span3.div4.span<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><!--div为块级元素默认自己独立一行(div自己独占一行，谁都不能和我在一起)span为行级元素默认有多大内容就占多大地方(谁都可以和我在一起)多用于美工的页面布局使用-->a<div>this is div</div>ab<span>this is span</span>b
</body>
</html>
十.HTML_ iframe：在一个网页之中显示另外一个网页。
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<iframe src="http://taobao.com" width="80%" height="100" name="hk" ></iframe><br>
<a href="http://taobao.com" target="hk">淘宝</a><br>
<a href="http://jd.com" target="hk">京东</a>
</body>
</html>

十一.

HTML_frameset_frame
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><a href="04.emp.html" target="hk">员工管理</a><br><a href="04.dept.html" target="hk">部门管理</a><br>
</body>
</html><!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>员工管理界面
</body>
</html><!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>部门管理界面
</body>
</html><!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<!—
我要按列来分，一列占20%，另一列占80%，*表示占剩下的所有。
frameset就是frame的集合，里面放的全都是frame。
整个页面没有被刷新，只是刷新了部分页面。
-->
<frameset cols="20%,*"><frame src="04.menu.html"><frame src="04.emp.html" name="hk">
</frameset>
</html>

Html的基本操作简介相关推荐

Redis的安装以及基本操作简介
所有与大数据相关的服务都必须在linux上运行,redis提供了linux和windows的版本,但是为了系统更加稳定,推荐使用linux作为服务器. Linux版redis的安装,这里选择cento ...
第六天 02.mysql数据库的基本操作和密码爆破
mysql数据库的基本操作简介: 数据库是什么存储数据的仓库,数据是有组织的进行存储. mysql是一种关系数据库管理系统使用工具:phpstudy mysql 默认端口 3306 一. ...
抓起整个网站离线浏览的软件Teleport Pro
百科名片 Teleport Pro由美国Tennyson Maxwell公司开发,曾被PC Magazine评为"编辑选择奖".ZDNet评为五星.它可以完全或部分下载一个网站上的 ...
佳星计费系统服务器时间异常,佳星计费管系统.doc
佳星计费管理系统使用说明目录操作系统安装的基本需求数据库服务器的操作系统安装注意事项前台收银机的操作系统安装注意事项佳星计费管理系统安装步骤数据库计费监控端的安装注意事项前台收银机的 ...
企业知识分享+团队协作神器之Confluence
目录一.Confluence简介二.知识库软件对比三.快速安装confluence 7.4.6版本四.confluence基本操作简介 4.1.创建空间(Space) 4.2.配置空间权 ...
matlab 5.3 完整,MATLAB 5.3实用教程
前言上篇 MATLAB入门第一章 MATLAB概述 1.1 认识MATLAB 1.1.1 MATLAB的历史 1.1.2 MATLAB 5.3的构成 1.1.3 MATLAB 5.3的特点 1.2 ...
kubernetes V1.6.4 分布式集群的部署及service负载均衡
1,kubernetes的基本概念和术语 1.1 kubernetes与微服务的简介最近几年,微服务一词经常被IT的技术界人士提及,简单介绍的话,微服务架构就是将原本单独部署运行的大型软件拆分为一个 ...
nvme-cli使用
作者 QQ群:852283276 微信:arm80x86 微信公众号:青儿创客基地 B站:主页 https://space.bilibili.com/208826118 参考 Intel ISDCT, ...
【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )
文章目录一. ConstraintLayout 简介 1. 引入约束布局 ( 1 ) 约束性布局作用和简介 2. 约束简介 ( 1 ) 约束个数要求 ( 2 ) 约束设置与显示位置 ...
mysql 视图教程_MySQL视图简介及基本操作教程
前言视图是数据库系统中一种非常有用的数据库对象.MySQL 5.0 之后的版本添加了对视图的支持. 认识视图视图是一个虚拟表,其内容由查询定义.同真实表一样,视图包含一系列带有名称的列和行数据,但 ...

Html的基本操作简介

Html的基本操作简介相关推荐

最新文章

热门文章