版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
欢迎大家去我的个人技术博客看看,点赞收藏注册的都是好人哦~
https://xiaowu.xyz
思考了很久决定还是从最基础的html开始,千里之行始于足下。HTML很容易学习!你会喜欢它的!(html标签/html基础)
一、网页介绍
最开始,我们需要知道,一个完整的网页是怎么样从大脑中,从图纸上,慢慢到最后大家能通过链接点击进入网站的。
1、首先我们需要有一个域名,有了这个域名,我们做好了网站就可以租用服务器,绑定这个域名从而让用户来访问。
类似于 https://www.xiaowu.xyz 或者 http://www.baidu.com
或者简写成只写域名xiaowu.xyz,都是可以从浏览器的链接栏输入去直接访问网站的,这样的一段英文和符号的组合,就是一个链接,而域名 只是中间的一段:xiaowu.xyz
最前面的http://或(https://)就是http协议,是基于TCP/IP协议的一套互联网传输协议。
HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准。
HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。
好了,现在假设我们已经拥有了一个域名,我们进入下一步。
2、我们需要去租一个服务器,常见的服务器运营商有国内有:阿里云,腾讯云,七牛云,又拍云等。
国外有:cloudfire,godaddy等。
很多很多,这里不一一列举。
3、接着就是网站的建设了,需要收集资料,规划网站,UI出设计图,前端工程师写前台页面,也就是我们看到的那些花里胡哨的页面、非常炫酷的特效等等。后台工程师开发后台功能,建立数据库,然后整合在一起,把做好的一整套网站传到服务器上,用户就可以访问了。
4、网站的推广,网站做好了之后,没有用户访问也是没有太多作用了,这里就需要相应的推广人员去做网站的推广,常见的形式有挂其他各大网站的广告位,做搜索引擎的优化,SEO排名等等。
5、网站的维护,一个网站会出现的问题会有很多,我们开发完网站之后,可能还要进行版本的更新,增加新功能或者修改出现的bug,一个网站并不是传到服务器就不用管了,还需要默默的进行维护,防止出现问题。
差点给整跑题了,回归正题,今天,我们的任务是html的基础。
那么。。。
什么是HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,
HTML 标签通常是成对出现的
这是一段文本
我是一个标题
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
我们可以这样理解:
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:
(下面是一段html代码)
小五技术blog
我是一个标题
这是一段文本
例子解释
与 之间的文本描述网页
与 之间的文本是可见的页面内容与
之间的文本被显示为标题与
之间的文本被显示为段落
二、html发展历史
XHTML指可扩展超文本标记语言(标识语言)(EXtensible HyperText Markup Language)是一种置
标语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。
HTML5指的是HTML的第五次重大修改(第5个版本)(HTML5 是 W3C 与 WHATWG 合作的结果)
组织解析:
(1)W3C(World Wide Web Consortium) 万维网联盟,创建于1994年是Web技术领域最具权威和
影响力的国际中立性技术标准机构。
W3C (制定了结构(xhtml、xml)和表现(css)的标准,非赢利性的。)
(2)ECMA(European Computer Manufactures Association)欧洲电脑厂商联合会
ECMA制定了行为(DOM(文档对象模型),ECMAScript、bom)标准
(3)WHATWG网页超文本应用技术工作小组是:
一个以推动网络HTML 5 标准为目的而成立的组织。在2004年,由Opera、Mozilla基金会和
苹果这些浏览器厂商组成。
三、html的基本语法
1、<常规标记>
<标记 属性=“属性值” 属性=“属性值”> 双标记
2、空标记、单标记
<标记 属性=“属性值” />
说明:
1.写在<>中的第一个单词叫做标记,标签,元素。
2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”号内。
3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
4.空标记没有结束标签,用“/”代替。
四、HTML常用的标记
1、文本标题(h1-h6)
最重要的标题H1
次要栏目或标题-小标题H2
再次要栏目或分类小标题H3
文中分类小标题H4
五级标题
六级标题
2、段落文本(p)
段落文本内容
3、空格
4、换行
强制换行
5、加粗
加粗内容
加粗内容
6、文字倾斜
7、水平线
8、插入图片
注:所要插入的图片必须放在站点下
① title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,HTML的绝大多数标
签都支持title属性,title属性就是专门做提示信息的。
② alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在
原本加载图片的地方。
9、div和span的用法
div :没有具体含义,统称为块标签,
用来设置文档区域,是文档布局常用对象
span:文本结点标签
可以是某一小段文本,或是某一个字。
10、数据表格的作用及组成 作用:显示数据
表格组成
注意:一个tr表示一行,一个td表示一列(一个单元格)
*数据表格的相关属性
1)width="表格的宽度"
2)height="表格的高度"
3)border="表格的边框"
4)bgcolor="表格的背景色" bg=background
5)bordercolor="表格的边框颜色"
6)cellspacing="单元格与单元格之间的间距"
7)cellpadding="单元格与内容之间的空隙" 这俩必须给table,其他随便给
8)对齐方式:align="left/center/right";
9)合并单元格属性:
colspan=“所要合并的单元格的列数"合并列;
rowspan=“所要合并单元格的行数”合并行;
合并之后需要把多余的单元格删除
11、超链接的应用
语法:
空链接
属性:target:页面打开方式,默认属性值_self。属性值:_blank 新窗口打开
12、列表(ul,ol,dl)
*无序列表
(unordered list)
(list item)
*有序列表
(ordered list)
*自定义列表
(definition list)
- 名词
(definition term)
- 解释
(definition description)
13、表单的作用及组成 表单的作用:用来收集用户数据(常见的地方为登录,注册,用户信息收集)
1)、表单框
2)、文本框
3)、密码框
4)、提交按钮
或者
5)、重置按钮
扩展知识点:Html废弃的标签都有哪些?
1. u : 可以加下划线
2. del strike s : 删除线
3. basefont:规定页面上的默认字体颜色和字号 只有IE低版本浏览器
4. big 标签呈现大号字体效果。
5. center 居中效果
6. font 字体标签
7. tt 呈现类似打字机或者等宽的文本效果。