HTML
html概述:超文本标记及语言
作用:让开发人员和浏览器交互
超文本:网站上的资源,比如文本、图片、视频、音频、链接、表格、列表等等
标记:也叫标签、元素、结点等,就是用尖括号(<>)括起来的一组内容,例如:
<head> <body> <div> <span> <table>等
HTML是最基础的开发网页的语言。
语言:交流工具
- 概述
- HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。
- 官网
- HBuilderX-高效极客技巧 (dcloud.io)
- 安装
- 解压即可
- 界面
- 使用
- 项目结构说明(记忆)
结构 | 说明 |
---|---|
css | 存储css样式文件 |
img | 存储图片、文本、音频、视频等等网站资源 |
js | 存储js脚本文件 |
index.html | 当前项目的欢迎页面 |
html书写规范
-
语法
<开始标签 属性1=“值1” 属性2=“值2”>标签内容</结束标签>
-
一般情况下,有开始标签,也有结束标签,标签是成对出现
-
如果只有开始标签,没有结束标签,自关闭标签
-
一般情况下, 标签名称要求小写,前后一致
-
标签属性,只能放到开始标签中
文件标签
-
概述
- 一个html的基本组成部分
-
分类
- html : 声明当前文件是一个html文档
- head : 设置当前页面的属性,往往不可显示
- body : 设置当前页面的内容,往往会显示
-
代码实现
<!DOCTYPE html>
<!-- 声明当前是一个html文档 -->
<html>
<!-- 设置当前页面的属性 -->
<head>
<!-- 设置字符集 -->
<meta charset="utf-8" />
<!-- 设置页面的标题 -->
<title>欢迎来到前端世界</title>
</head>
<!-- 设置当前页面的内容 -->
<body>
fuck world
</body>
</html>
注意事项
- 一个html文件的后缀名是".html"、".htm"
标签属性
-
body属性
- background、text、bgcolor
- 颜色取值(16进制值、颜色名称
-
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签属性</title>
</head>
<body text="green" bgcolor="pink" background="img/girl1.jpg">
hello world
</body>
</html>
文本标签之br标签
-
概述
- 插入一个简单的换行符。
-
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>br标签</title>
</head>
<body>
hello<br/>
world
</body>
</html>
文本标签之p标签
-
概述
- 定义段落。会自动在其前后创建一些空白。
-
常用属性
- align : 规定段落中文本的对齐方式。
-
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>p标签</title>
</head>
<body>
<p align="center">hello</p>
<p>world</p>
</body>
</html>
文本标签之font标签
-
概述
- 规定文本的字体、字体尺寸、字体颜色。
-
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font标签</title>
</head>
<body>
<font face="楷体" color="red" size="7">helloworld</font>
</body>
</html>
文本标签之标题标签
-
概述
- 可定义标题。
定义最大的标题。
定义最小的标题。
- 可定义标题。
-
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<h1 align="center">这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
img标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>img标签</title>
</head>
<body>
<img src="img/girl2.jpg" alt="图片无法显示!!!" width="200px" height="110px" border="10px"/>
</body>
</html>
列表标签
-
概述
- ol、ul都是由列表项(li)组成
-
分类
- 有序列表 : order list (ol)
- 无序列表 : unorder list (ul)
-
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>