01HTML-----web基础知识、HTML入门

从今天开始也写关于前端的博客了,收录在web前端专栏,供学习参考,有不足之处,谢谢提醒

一.web基础知识(了解)

(1)Internet-网
  • 由若干电脑、手机、平板通过网线(WiFi)连接起来的结构
(2)基于Internet上的程序
1.C/S结构
  • Client/Server
  • 特点:必须通过指定的客户端软件才能访问的一种程序:如-桌面版QQ,… …
2.B/S结构
  • Browser/Server
  • 特点:通过 浏览器 就能访问服务器端的一种程序
    如 :网页版百度,网页版 QQ,网页版 京东,… …
(3)WEB
  • 什么是WEB
    WEB,是基于Internet上的一种应用程序(网页应用程序)
    WEB页面,简称WEB页(网页),就是保存在服务器端上的一个具体的页面( **.html / **.htm 作为结尾的文件)
  • WEB浏览器
    功能
    1、提交用户请求 (UA : User Agent)
    2、作为HTML 以及 脚本执行的 解释器
    3、以图形化的方式显示web页面
    主要浏览器产品
    1、Microsoft Internet Explorer (IE)
    2、Mozilla Firefox
    3、Google Chrome
    4、Apple Safari
    5、Opera Opera(欧朋)
    主要技术
    1、HTML
    2、CSS
    3、Javascript

二、HTML入门(重点)

(1)什么是HTML

Hyper Text Markup Language
超级 文本 标记 语言

1 - 超文本 :也是文本,但会具备特殊功能
普通文本 a : 普通字符 a
超文本 a : 表示超链接
普通文本 b : 普通字符 b
超文本 b : 加粗显示文本
2 - 标记 :超文本的表现形式
普通文本 a : a
超文本 a : <a></a>
3 - 语言 :具备一定的语法规范
HTML 也具备自己的语法规范

  • WEB页面(HTML页面)就是由 HTML 语言来进行开发的 ,以 .html 或 .htm 进行结尾的文件
  • 开发 & 运行网页的工具:
    1、记事本
    2、浏览器
(2)HTML 的基础语法

1 - 标记语法
HTML中用于描述功能的符号称为"标记"
标记在使用时,用尖括号 “<>”,标记的分类

  • 封闭类型的标记
    也称为 “双标记” , 必须成对出现
    语法:<标记>内容</标记>

  • 非封闭类型的标记
    也称为 “单标记”
    语法:<标记> 或 <标记/>

2 - 标记(元素)的嵌套
在一对标记中,允许出现另外一对(一个)标记
<标记1>
<标记2></标记2>
</标记1>
注意:嵌套标记的书写格式 – 被嵌套的标记要通过一个 缩进键(Tab) 来表示层级关系

  • Demo:编写一对 body 标记,在body标记中,嵌套一对 div标记,在 div 标记中 ,嵌套一对 a 标记,在 a标记中,嵌套一对 b 标记,b标记中,随意编写一些文本
<body>
					<div>
						<a>
							<b>这是一段测试文本</b>
						</a>
					</div>
				</body>

3- 标记的属性

  • 什么是属性
    用来修饰标记的效果的内容,就是属性

  • 语法
    1、属性必须声明在开始标记中
    2、属性与标记名称之间,用 空格 隔开
    3、属性的值 与 属性之间 使用 “=” 连接
    4、一个元素允许有多属性,多属性间,排名不分先后,中间用 空格 隔开即可

  • Demo:创建一个 div 标记 ,增加属性 ,设置 align 属性的值为 center ,设置 id 属性的值为 container,设置 title 属性的值为 这是一个div
    <div align="center" id="container" title="这是一个div"></div>

  • 四大标准属性:
    1、id :定义元素在页面中独一无二的名称
    2、title :鼠标悬停在元素上时,体现的文字
    3、class :引用 类选择器时使用(CSS中)
    4、style :定义 内联方式时使用(CSS中)

4- 注释

  • 语法:<!-- -->
  • 注意:
    1、注释不能嵌套
    2、注释不能出现在标记中

5 - HTML 文档结构
W3C :Word Wide Web Consortium (万维网联盟)

  • HTML文档的组成
    1、文档类型声明
    告知浏览器当前的HTML文档用的是哪个版本
    在网页的最顶端 <!doctype html>
    2、由一对 html 根标记,来表示页面的开始与结束

6 - <html> 标记

  • 包含两对子元素
    <head></head>
  • 包含的子元素(2对)
    <title>网页的标题</title>
    <meta charset="utf-8"/> – 能正常显示中文
  • <body></body>
    属性:
    1、text ,取值是一个颜色值(red,green,blue…)
    2、bgcolor ,取值也是一个颜色值
  • Demo
    1、在 htdoc 中,创建一个网页 01-first.html 文件
    创建一个 记事本,将 .txt 重命名为 .html
    2、搭建HTML网页结构
    添加 文档类型声明
    添加 html 根标记
    在以上的 Demo 基础上
    1、在 <html>中 增加 <head><body>
    2、为网页指定标题 - 我的第一个HTML文档
    3、指定网页的字符编码格式为 utf-8
    4、在 body 中 输出一句话 “我的第一个HTML页面”
    5、设置 body text为red,bgcolor为yellow
<!doctype html>
<!-- 2、HTML 根标记 -->
<html>
	<head>
		<!-- 增加网页标题 -->
		<title>我的第一个HTML文档 </title>
		<!-- 指定网页字符编码格式 -->
		<meta charset="utf-8"/>
	</head>
	<body text=red bgcolor=yellow>
		<p>
			我的第一个HTML页面
		</p>
	</body>
</html>
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值