【面向HTML--入门】
来源:互联网 发布:智能课程表软件 编辑:程序博客网 时间:2024/06/01 07:52
1、HTML概述
HTML(Hyper Text Markup Language):超文本标记语言
超文本:具备特殊功能的文本
普通文本:a超文本:a,功能为超链接普通文本:b超文本:b,加粗显示文本
标签:Markup,规范了 超文本的组成形式
超文本a:<a>超文本b:<b>
语言:Language,具备特定的语法规范
HTML是网页的设计语言,由HTML编写的语言的文件 以 .html 或 .htm 结尾。并且由浏览器负责运行
HTML开发及运行工具: 1、开发工具 记事本,超级记事本(Editplus) 2、运行环境(工具) 各款浏览器(IE,Firefox,Chrome,Safari,Opera)
2、HTML基础语法
1、标记语法
什么是标记?
在HTML中,用于描述功能的符号称为 标记
标记在使用过程中,必须用 <> 括起来
1、标记分类: 1、封闭类型标记 2、非封闭类型标记2、标记语法 1、封闭类型标记:必须成对出现 <标记>内容</标记> 注意:封闭类型标记必须有结束 </> ex: 1、a标签<a>百度</a> 2、b标签<b>百度</b> 2、非封闭类型标记:也称为 空标记,单标记 语法: <标记> 或 <标记/> ex: <br/> <hr/> <img>
2、元素
元素,即标记,标签
1、元素嵌套:在一个元素中,允许出现另一个元素,形成更为复杂的语法结构 ex: <a> <img> </a> 注意: 1、嵌套时注意顺序 <p><a></p></a> 错误 2、嵌套格式-缩进 被嵌套的内容前要通过 Tab 键表示缩进 <div> <p> <span></span> </p> </div>
3、属性和值
属性用来修饰元素的
语法: <标记 属性="值" 属性="值"></标记> ex: <p align="center"></p> 属性:align:当前元素的文本的水平对齐方式 值:center:居中对齐标准属性: 又称为通用属性,页面上所有的标记都会具备的属性 1、id 页面元素独一无二的标识 2、title 鼠标移入到元素上时所以是的内容 3、class(css中用) 定义元素的类选择器 4、style(css中用) 定义元素行内样式
4、注释
注释是不会被浏览器所解释运行的
<!-- 这里面的内容,都是被注释掉的 -->注意: 1、注释不能嵌套注释 <!-- <!-- <!-- --> --> --> 2、注释不能位于 <> 中
5、HTML 和 XHTML
1、HTML4.01 1999年12月24日 发布HTML4.01标准2、XHTML1.0 2000年01月26日 发布XHML1.0标准 与 HTML4.01几乎相同 更严格,更纯净的HTML版本 要求单标记必须有结束: <br/> <br> xhtml1.0 错误 <p align=center></p> xhtml1.0 中错误3、HTML5 目标:实现更为简洁的HTML 能少写就少写 能不写就不写 <p align="right"></p> 正确 <p align=right></p> 正确 <input readonly> 正确 <input readonly="readonly">正确
3、文档结构
1、文档类型声明
作用:指定文档的版本和类型语法: 页面最顶端 <!doctype html>
2、html页面
语法:<html></html> 又称为 html根标记 内容:两个子元素 1、<head></head> 网页头部 作用:定义页面中的全局信息 包含如下内容: 1、<title>网页标题</title> 2、<meta charset="utf-8"> 作用:指定网页的编码格式为utf-8 告诉浏览器按照utf-8的方式解析内容 注意:网页文件的编码也必须为 utf-8 1.title:定义文档的标题 <title>网页标题</title> 2.meta:定义网页的基本信息:编码格式,关键字,描述等,主要针对 "搜索引擎" <meta charset="utf-8" /> 作用:指定网页的编码格式为utf-8,告诉浏览器按照utf-8的方式解析内容 注意:网页文件的编码也必须为 utf-8 <meta name="keywords" content="关键词1,关键词2,关键词3"> 作用:定义网页关键字 <meta name="description" content="描述信息"> 作用:定义网页描述信息 3.base标签:设置超链接的基本设置,可以统一设置超链接的打开方式 <base target=”_blank”/> 所有超链接均打开一个新页面 4.<script>:定义或引用javascript 5.<style>:定义内部样式 6.<link>:引入外部样式 2、<body></body> 网页主体 包含的是显示个用户去看的内容 属性: 1、text 控制整个页面的文本颜色 2、bgcolor 控制整个页面的背景颜色
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>面向HTML</title></head><body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p></body></html>
3、文本标记
a、特殊字符
1、在html中,任意多个空格,和回车,最后都会被解析成1个空格2、由<>所包裹的文本,会当成标记被解析3、通过 转义字符 的特殊表现方式表示特殊效果 < : < (less than) > : > (greater than) : 空格 © : © ¥ : ¥
b、文本标记
1、文本样式 <b></b> 加粗 <i></i> 斜体 <u></u> 下划线 <s></s> 删除线 <sup></sup> 上标 <sub></sub> 下标2、文字标签:<font> </font> 作用:修改文字的样式 属性: size:文字的大小 取值范围1-7,超出7默认还是7 color:文字的颜色3、标题元素 作用:以标题的方式显示文本 表现方式: 1、垂直的空白距离 2、不同的标题字体大小不同,加粗显示 3、独占一行 语法: <hn></hn> n : 1~6 <h1></h1> : 1级标题 <h6></h6> : 6级标题4、段落元素 作用:在页面中表示一段独立的文本 表现形式: 1、具备垂直空白 2、独占一块 语法: <p></p> 注意:p标记不能嵌套块级元素的(块元素看下面 10、行内元素 和 块级元素)5、换行元素 语法:<br> 或 <br/>6、分割线元素 作用:在页面中显示线条 语法: <hr> 或 <hr/> 属性: 1、size :尺寸,大小(以 px 为单位) 2、width :宽度 (以 px 为单位) 3、align :线条的水平对齐方式,取值,left,center,right 4、color:颜色7、预格式化 作用:保留源文档中的格式。即保留源文档中所有的 回车和空格 语法: <pre></pre>8、块分区元素 - div 作用:为元素分组,实现网页布局 表现形式: 1、独占一行 语法: <div></div>9、行内分区元素 - span 作用:设置同一行文本的不同样式 语法: <span></span>10、行内元素 和 块级元素 1 、块级元素 默认情况下,每个块级元素独占一行,即元素前后都会有换行 如:p,div,h1~h6,pre,... ... 作用:用在布局 2、行内元素 不会换行,可以和其它的行内元素或文本在一行内显示 如:span,s,b,i,u,sup,sub,... ... 作用:处理文本样式
阅读全文
1 0
- 【面向HTML--入门】
- html 入门
- HTML 入门
- html入门
- HTML入门
- html入门
- HTML入门
- 入门Html
- HTML入门
- html入门
- html入门
- html入门
- html入门
- HTML入门
- html入门
- HTML入门
- HTML入门
- HTML 入门
- Spark的性能调优
- 走穿java23种设计模式-5原型模式
- IICvs SPI
- 大学生职业规划
- 数据库经典面试问题-核心概念
- 【面向HTML--入门】
- C++开源项目
- 优雅降级和渐进增强
- java.lang.NoClassDefFoundError: javax/servlet/SessionCookieConfig
- C++:STL常用函数模块总结(vector)
- leetcode 384. Shuffle an Array 数组洗牌
- arm-a8 点亮LED
- 「MICCAI 2017」Reading Notes
- 自定义View