HTML 入门第一课

HTML 简单认识
HTML(HyperText Markup Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言,也是制作网页的最基本的语言,它可以直接由浏览器执行。

1.HTML 是用来描述网页的一种语言。

2.HTML 指的是超文本标记语言: HyperText Markup Language

3.HTML 不是一种编程语言,而是一种标记语言

4.标记语言是一套标记标签 (markup tag)

5.HTML 使用标记标签来描述网页

6.HTML 文档包含了HTML 标签及文本内容

7.HTML文档也叫做 web 页面

由 HTML 组成的网页的基本结构

文档类型声明 <!DOCTYPE html> –这是html5的声明方法

头部标记(<head>….</head>)

包含文档的标题信息,头部标记都不可或缺!

主体标记(<body>…..</body>)

包含了文档的内容

中文编码声明(<meta charset = “utf-8”>)

HTML常用标签
<p>…</p> 定义一个段的块级标记 | <br /> 换行标记 | <h1> …<h6> 标题标记

<ul> </ ul> 无序列表标记,表示列表所包含的项是没有先后顺序的!列表项使用<li>表示。

<ol> </ ol> 有序列表标记,表示列表所包含的项是有先后顺序的!列表项使用<li>表示。

<dl> </ dl> 定义列表,定义列表至少包含一条术语(dt)或一条说明(dd)

<dt> </ dt> 标明一个术语要说明的对象

<dd> </dd> 列表项说明

<b> </b> 或 <strong> </strong> 文本加粗

<i> </i> 或 <em> </em> 文本倾斜

<div> </div> 块级元素 | <span> </ span> 行内元素 | <hr /> 分隔线 | <del> <del /> 删除线

< img > 图像的行内标记

<img src = “lianhua.jpg ” alt = “莲花之美”>

src 是图片的路径参数;

网页设计中的所有文件,原则上都必须放置在一起,即在同一个文件夹下(这个文件夹是网页的“根”文件夹)

相对路径:参照自身的位置,而定义的路径,叫做相对路径

相对路径有三种表示方法:

1.Html文档和图片在同一个目录下,直接写图片名称

2.Html文档和图片所在的文件夹在同一个目录下,先写文件夹名称,再写图片名称

3.Html文档所在文件夹和图片所在文件夹在同一个目录下,则需要先用”../ ”找到根目录,

再写图片所在文件夹的名称,最后写图片名称

-> 图片大小 <img width = “ ” height = “ “ />

网页中长度单位多使用 px ,即像素。

-> 图标替代文体 <img alt = “图片替代的文本内容” />

在网络较慢的环境中,如果没有出现图片,将以文本替代图片显示

-> 图片提示 <img title = “提示文本” />

在鼠标放置图片上时提示的文本。多数标签都有此属性,但浏览器的支持不全面!

HTML 文字排版标记
1.<big></big> 定义大字体的文字 不符合标准网页设计的理念,不赞成使用.

2.<small></small> 定义小字体的文字

3.<sup></sup> 上标

4.<sub></sub> 下标

HTML 特殊符号
“&lt;” 和 &gt;” “<” 和 “>” | &laquo; &raquo; << >>

&lsaquo; &rsaquo; < > | &copy; 版权 &amp &

超链接
<a> </a> 通过使用属性href来指定要链接的url,标签的内容可以为文本也可为其他标签

①<a href=”2.html”>点击进入2网页</a>,点击文字进入2.html

②<a href=”2.html”><img src=”two.jpg” /></a>,点击图片进入2.html

① a:link:未访问链接 ,如 a:link {color:blue}
② a:visited:已访问链接 ,如 a:visited{color:blue}
③ a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue}
④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue}

锚点的使用

1.定义锚点<a id=“zj”>第三章</a>

2.定义指向该锚地的链接<a href=“#zj”>点击查看第三章</a>

下载链接的使用

如果url指向的不是一个html文件,那么点击时将下载该文件

表格的基本结构
1)<table> </ table> 定义表格的基本框架

2)<tr> </tr> 定义表格的行

3)<td> </td> 定义表格行内单元格

4)<th> </th> 定义表格行内单元格(标题),自动将文本加粗,居中对齐

表单

表单的组成:一个表单有三个基本组成部分:

1)表单标签:这里面包含了处理表单数据所用程序的url,以及数据提交到数据服务器的方法。

2)表单域:包含了文本框,密码框,隐藏域,多行文本框,复选框,下拉框和文件上传框等。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇