前言:”不肯下一点功夫,永远不会明白自己从何而来,又将立足于何处。“
你好,我是梦阳辰,期待与你相遇,和我一起进入HTML的世界吧!
文章目录
01.HTML概述
02.HTML实战
03.实体符号
04.表格
05.背景颜色和背景图片
06.图片标签
07.超链接
08.列表
09.表单
10.div和span在网页中的应用
01.HTML概述
1.知识的引入:
关于系统的结构:
B/S架构:
Browser/Server(浏览器/服务器的交互形式)
Browser支持哪些语言:HTML CSS JavaScript
写HTML CSS JavaScript代码的叫做:WEB前端开发工程师。
前端的图片需要UI设计师完成。
S是服务器端Server,Server端的语言有很多:如c/c++,Java,python…等等。
B/s架构的系统有什么优缺点?
优点:升级方便,只升级服务器端代码即可。维护成本低。
缺点:速度慢,体验差,界面不炫酷,无法运行大型游戏。(否则卡死)
企业内部的解决方案都是采用B/S的系统,因为办公不需要选课,只要能做数据的增删改查即可。并且维护成本低。
如:京东、腾讯视频、百度等
C/S架构
Clienet/Server(客户端/服务器端的交互形式)
缺点:升级麻烦,维护成本较高。
优点:速度快,体验好,界面炫酷。(娱乐性的系统多数是C/S架构)
如:各种app。
2.什么是HTML:?
HTML 是用来描述网页的一种语言。
它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。使用HTML语言描述的文件需要通过WWW浏览器显示出效果。
HTML:Hyper Text Markup Language(超文本标记语言)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
有大量的标签组成,每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值">
标签>
标签>
标签>
HTML开发的时候使用普通的文本编辑器就可以,也可以使用专业的开发工具:DreamWeaver,HBuilder…
创建的文件扩展名是.html或.htm,直接采用浏览器打开HTML文件就是运行。
HTML是谁制定的?
W3C:世界万维网联盟
制订的协议:HTML/XML/http协议/https协议
W3C制定了HTML的规范,每个浏览器厂家都会遵守。
HTML目前最高版本是:HTML5.0,简称H5
为了方便中国web前端程序员的开发的网站,提供了大量的帮助文档,为开发提供方便。
W3school:先出现,和w3c没有关系。
W3cschool:后出现,和w3c没有关系。
02.HTML实战
1.第一个HTML:
梦阳辰,你好!
欢迎来到HTML!
2.基本标签
分段:
内容
标题字:
标题
标题
标题
标题
标题
标题
独目标记:
换行:
内容
内容
横线:
'red' width='50%'>
这里单引号,双引号都可以,甚至可以不用。
预留格式:
内容
其他:
删除字:
内容
插入字:
内容
粗体字:
内容
斜体字:
内容
:
'red' size ='50'>内容
数字的右上角加数:如10的平方
102
数字的右下角加数:
10m
03.实体符号
当内容与与HMTL语法相冲突时采用实体符号。
实体符号特点:以&开始,以;结束。
b<a>c
空格:
04.表格
1.画一个表格
表格
信息表
"center" border="1px" width="60%" height="150px">
"center">
a
a
a
b
b
b
"center">c
c
c
2.单元格合并
上下合并:删除下面的那行,上行的单元格加rowspan。
左右合并:随便删除哪个,剩余的哪个加colspan.
单元格合并
信息表
"center" border="2px" width="30%" height="150px">
"center">
a
a
a
a
a
"2">aaa
"center">a
a
3.th标签
第一行字段,比td多的是加粗和居中。
内容
内容
内容
4.thead,tbody,tfoot标签
这三个, 将表格分割。
thead表示头,tboby表示中间内容,tfoot表示脚。
05.背景颜色和背景图片
"en">
"UTF-8">
背景颜色和背景图片
"red" background="image/ma.jpg">
asdfa
06.图片标签
"en">
"UTF-8">
图片
"ma.jpg" width="100px" title="我是梦阳辰!"/>
"ma.jpg" height="200px"/>
07.超链接
通过超链接浏览器可以向服务器发送请求。
浏览器向服务器发送数据(请求:request)
服务器向浏览器发送数据(响应:response)
B/s结构的系统:每一个请求都会对应一个响应。
B–>请求—>s
s–>响应—>s
href:hot references 热引用
href属性为一个地址,可以是本地路径
超链接有一个target属性:
_blank:新窗口
_self:当前窗口(默认窗口)
_top:顶级窗口
_parent:父窗口
"en">
"UTF-8">
超链接
"http://www.baidu.com">百度一下
"https://www.taobao.com">淘宝
"https://www.taobao.com" target="_blank">淘宝
"https://www.taobao.com/">
"image/ma.jpg" width="30px"/>
淘宝
08.列表
"en">
"UTF-8">
列表
- 国
- 省
- 市
"I">
- 县
- 镇
"circle">
- 梦阳辰
"disc">
- 深圳
- 北京
- 上海
- 星空
"square">
- 杭州
- 西安
- 轻松玩编程
09.表单
例如以下就是一个表单:
表单用于接收用户的信息
表单展现之后,用户填写表单,点击提交后数据传入到服务器。
1.怎么画表单呢?
使用from标签画表单。
一个网页当中可以有多个表单。
"en">
"UTF-8">
表单
"http://192.168.112.34:2341/adf">
"submit" value="登录"/>
"button" value="按钮上的文本"/>
"http://www.baidu.com">
"text"/>
"submit" value="百度"/>
"http://localhost:8032/kj">
用户名"text"/>
密码"password"/>
"submit" value="登录"/>
"http://localhost:8080/jd/login">
用户名
"text" name="username" />
密码
"password" name ="usercode"/>
"center">
"2">
"submit" value="登录"/>
"reset" value="重置"/>
2.用户注册表单
form表单method属性:
get:采用get方式提交的时候,用户提交的信息会显示在浏览器的地址栏上。
post:采用post方式提交的时候,用户提交的信息不会显示在浏览器的地址栏上。post更安全
method不指定,为get.
超链接也可以提交数据给服务器,但是提交的内容是不变的。默认为get。
"en">
"UTF-8">
Title
"http://localhost:8080/jd/register" mothod="post">
用户名
"text" name="username"/>
密码
"password" name="usercode"/>
确认密码
"passcode"/>
性别
"radio" name="gender" value="1" checked/>男
"radio" name ="gender" value="0"/>女
兴趣爱好
"checkbox" name="hobby" value="basketball" checked/>篮球
"checkbox" name="hobby" value="study"/>学习
"checkbox" name="hobby" value="game"/>游戏
学历
简介
"submit" value="注册"/>
"reset" value="清空"/>
3.下拉列表支持多选
"en">
"UTF-8">
Title
4.file控件
可以用于选择文件,上传
"file"/>
5.隐藏域hidden控件
用于将数据提交给服务器,但不想让用户看见
"en">
"UTF-8">
Title
"http://localhost:8080/asdf" method="post">
"hidden" name="userid" value="111"/>
用户代码"text" name="usercode"/>
"submit" value="提交"/>
5.readonly和disabled
都表示只读。
但是readonly可以提交给服务器,disabled数据不会提交(即使有name属性也不会)
"text" name ="usercode" value="112" readonly/>
"text" name ="usercode" value="112" disabled/>
6.input控件的maxlength属性
表示最多输入的字符数量。
7.HTML中元素的id属性
1.在HTML文档中,任何元素(节点)都有id属性,id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
2.提交表单只和name有关
3.id的作用
为了让我们更好的获取元素。
javascript语言:可以对HTML文档当中的任意节点进行增删改操作!那么我们应该先通过id拿到节点对象。
4.HTML文档是一棵树,树上有很多节点,每个节点都有唯一的id.
DOM(Document)树。
"myform">
"text" id="username" name="username"/>
"text" id="usercode" name="usercode"/>
10.div和span在网页中的应用
1.div和span都可以称为图层。
图层是为了页面更好的布局,学过ps的小伙伴就估计知道图层的概念。
div会独自占用一行,而span不会独自占用一行。
table布局不灵活,太石板。
"en">
"UTF-8">
Title
hello Meng
hello Yangv>
Chen
Xingkongiv>
"sqan1">first span
"sqan1">second span