【面向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、通过 转义字符 的特殊表现方式表示特殊效果    &lt; : <  (less than)    &gt; : >  (greater than)    &nbsp; : 空格    &copy; : ©    &yen; : ¥

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,... ...        作用:处理文本样式
原创粉丝点击