HTML语言
HTML快速入门第一讲
二.HTML是什么?
HypeText 超文本 Markup 标记 Language 语言
HypeText 有能力
Markup <>
Language
2.HTML的特点.
- 文件以.html或者.htm为后缀
- 使用浏览器执行
- 用<>来做标记
- 可以嵌套js脚本
三.HTML的基础语法
①标记
标记,标签,元素,节点,对象
使用html提供的关键字,放在<>中,形成一定的功能
- 双标记,封闭类型标记
<关键字>内容区域</关键字>
<b>内容区域</b>
- 单标记, 非封闭类型标记----空标记
<关键字> 或者 <关键字/>
<input> <img> <br>
② 嵌套
在双标签的内容区域部分,可以编写其它标记,形成功能的叠加
注意:语义要求,我们在写嵌套的时候,一定要添加缩进,语义错误 语法错误
不符合语言意义,不影响代码的结果 代码写错了,结果就不对
③ 属性和值
作用修饰当前元素
<关键字 属性=“值” 属性=“值” 属性=“值” 属性=“值”></关键字>
html预定义的属性
自定义属性:<div align="center" xzq="yanyuan">123</div>
属性值: 1. 可以使用单引号,双引号,不加引号,推荐双引号
2. 如果值是数值,不写单位默认单位为px
属性的分类
1. 通用属性,对所有元素都有效的属性
id="" 元素在页面中的唯一标识符
title="" 鼠标悬停在元素上时,显示的文本
style="" css中,定义内联样式
class="" css中,引用类选择器
2. 专有属性,只对某些元素生效的属性
④注释
不会被解析运行的文本
<!-- 我是注释 -->
加注释的快捷键Ctrl+/
要求:
- 注释不能嵌套注释
- 标签的<>中不能写注释
四.HTML的文档结构
- 文档类型的声明
<!DOCTYPE html>
告诉浏览器,当前html文档是使用h5的规则编写的( h5的文档声明) <html>
标签
网页的开始和结束
<html></html>
1.必须是这个页面的根元素,必须是最外层元素
2.一个页面有且只有一对<head>
定义网页的全局信息
<head></head>
1.<title></title>
网页的标题
2.<meta>
元数据,修饰当前页面的数据
<meta charset="utf-8">
chrome62以上自动解析中文
<meta name="description" content="">
<meta name="Keywords" content="">
<body>
网页的主体,可视区域
<body></body>
真正编写显示标签的地方
属性:bgcolor=“pink” 设置背景色
text=“purple” 设置字体颜色- 学习html
1.关键字+功能
2.属性+值
背就完事!!!! 加油
五.文本标记
- 标题元素
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
功能:- 独占一行
- 字号大小有变化 h1最大,h6最小
- 字体加粗
- 上下有垂直距离
属性:align: left/center/right (所有独占一行的元素都有效)
默认缺省值 left
- 段落元素
<p></p>
功能:独占一行
上下有垂直距离
属性:align:left/center/right - 分隔线
<hr size="50" width="50%" align="left" color="yellow"/>
size=“50” 粗细
width=“50%” 宽度 取值
1. %占父元素宽度的百分比
2. 以px为单位的数字
align=“left” 水平对齐方式,默认缺省值是center
color=“yellow” 分隔线颜色
4.空格折叠现象
浏览器会把项目中所有文本中出现的空格和回车,解析成一个空格展示
回车要使用<br>
5.预格式化标签
让文本在页面中的显示,与代码中的格式相同
保留了代码中所有回车和空格
<pre></pre>
6.特殊符号(实体)
空格
<
<
>
>
©
©
®
®
×
×