什么是HTML？HTML怎么学？HTML基础教程
1.一般我都是在记事本中写HTML文件，也有很多人用DreamWeaver，这个随意~~
2.HTML的一般结构如下：
<html>----以<html>开始，以</html>结束，表示之间的文档是HTML
<head>----HTML文档的头部，主要放文档的标题信息
<title>未使用CSS的HTML文件</title>
</head>
<body>----HTML的主体部分
<h1>未使用CSS的HTML文件</h1>
<hr>----在网页中插入一条水平线
<p>未使用CSS的HTML文件</p>
</body>
</html>
3.标记语法
(1)标记在使用时必须用尖括号"<>"括起来；标记的大小写作用相同；
(2)单标记：<标记名称>，例如<br>它表示换行；
(3)双标记：<标记>内容</标记>
例如：<em>第一：</em>，它表示突出对“第一：”的显示；
(4)：标记可以包含标记本身，即可以嵌套使用
<html>
<head>
<title>请输入密码</title>
</head>
<body>
<form>
<table border="1", width="321">
<tr>
<td>请输入密码</td>
</tr>
<tr>
<td>密码<input type="password" name="text1"></td>
</tr>
</table>
</form>
</body>
</html>
4. 属性语法
大多数单标记和双标记的始标记内部都可以包含一些属性
<标记名字 属性1 属性2 ...>
例如单标记<img>表示在文档当前位置插入一幅图片
<img src="1.jpg" width="652px" height="1249px" alt="博客">
其中src属性规定显示图像的路径，width属性设置图像的宽度，height属性设置图像的高度，alt属性规定图像的代替文本，src属性为必需属性，其他属性为可选属性。
5. HTML文件命名：
(1)文件的扩展名要以.html或.htm结束；
(2)文件名中只可由英文字母、数字或下划线组成；
(3)文件名中不要包含特殊符号，如空格、￥等；
(4)文件名师区分大小写的，在Unix和Windows主机中有大小写的不同；
(5)网站首页文件名默认是index.htm或index.html；
6. 编写HTML文件的注意事项：
(1)所有标记都要用尖括号<>括起来；
(2)成对出现的标记不要漏写；
(3)采用标记嵌套的方式可以为同一个信息应用多个标记，如<tag1><tag2>同一个信息</tag2></tag1>；
(4)在代码中，不区分大小写；
(5)任何空格或回车在代码中都无效，插入空格或回车有专用的标记，分别是 , <br>；
(6)标记中不要有空格；
(7)标记中的属性，可以用双引号("")引起来，也可以不引；
<hr color=red> 等价于 <hr color="red">
7.<p></p>表示插入段落文字；
8.绘制表格：三个成对标记<table></table>、<tr></tr>、<td></td>
<table width="650" border="1"> ----<table>是制作表格的标记，其后的属性依次为表格宽度，边框粗细
<tr>----<tr>表示插入行，一对<tr>表示一行
<td>----<td>表示一列
HTML基础教程<br>
作者：王占金等
<br>----<br>表示换行，单标记
定价49.00元<br>
</td>
<td>
<img src="1.jpg" width="69px" height="92" alt="HTML">
</td>
</tr>
<tr>
<td>
搜索引擎营销-网站流量大提速<br>
作者：（美）亨特<br>
定价：69.80元<br>
</td>
</tr>
</table>
9. 设置页面标题：<title>页面标题</title>；
10. 设置基地网址<base>
(1)<base>标记一般用于设计文件的URL地址；
(2)一个HTML文件只能有一个<base>标记，同时该标记必须放于头部文件中；
(3)<base href="文件路径" target="目标窗口">
href用于设置网页文件链接的地址，target用于设置页面显示的目标窗口。
例如：
<html>
<head>
<title>设置基地网址</title>
<base href="http://www.Broad View.com.cn">
</head>
<body>
2007年1月16日，电子工业出版社<a href="index">博文视点</a>公司召开了一次晚会。
</body>
</html>
11.定义元信息<meta>
(1)该标记的主要功能是定义页面中的一些信息，但这些信息不会出现在网页中，而会在源文件中显示；
(2)<meta>标记通过一些属性来定义文件爱你的信息，例如，文件爱你的关键字、作者信息、网页过期时间等，HTML文件的头部文件可以有多个<meta>标记；
(3)基本语法：
<meta http-equiv="" name="" content="">
http-equiv属性用于设置一个http的标题域，但确定值由content属性决定，name属性用于设置元信息出现的形式，content用于设置元信息出现的内容。
12.设置页面关键字--keywords
(1)基本语法：<meta name="keywords" content="value">
(2)语法说明：keywords用于说明定义的是关键字，value用于说明该网页定义的关键字，可以是多个关键字；
(3)例子：
<html>
<head>
<title>设置关键字</title>
<meta name="keywords" content="计算机、英语、经管、财会、职场"> ----此行代码表示在该HTML文件中定义的关键字为“计算机、英语、经管、财会、职场”，当利用搜索引擎搜索图书时，输入任何一个关键字都可以搜索到该网页。
</head>
<body>
......
</body>
</html>
13. 设置页面过期时间--expires
(1)基本语法： <meta http-equiv="expires" content="value">
(2)语法说明： expires用于设计页面过期时间，content属性设置具体过期时间值；
(3)例子：
<html>
<head>
<title>设置页面过期时间</title>
<meta http-equiv="expires" content="FRI,1 Jun 2017 00 00 00 GMT">
</head>
<body>
......
</body>
</html>
14.设置页面背景
(1)基本语法：<body bgcolor="">
(2)语法说明：bgcolor可以设置网页的背景颜色；
(3)例子：
<html>
<head> ...</head>
<body style="background-color:blue">----此行代码表示：将网页背景颜色设置为蓝色，也可以设置为 red white等，也可以十六进制数表示，例如“#00ff00”，或者rgb(0,0,0)的形式
......
</body>
</html>
15.设置页面边距
(1)基本语法：<body topmargin=value leftmargin=value rightmargin=value bottommargin=value>
(2)语法说明：topmargin 设置到顶端的距离
leftmargin设置到左边的距离
rightmargin设置到右边的距离
bottommargin设置到低端的距离
(3)例子：
<html>
<head>......</head>
<body topmargin=0 leftmargin=20 rightmargin=20 bottommargin=180>
2016年5月9日，阴雨
</body>
</html>
16.设计正文颜色
(1)基本语法：<body text=""> ...</body>
(2)语法说明：利用text属性设置文档的颜色时，还可以进行其他设置，例如：背景、字体等；
(3)例子：
<html>
<head>......</head>
<body text="white" bgcolor="red">
2016年5月9日，阴雨
</body>
</html>
17.添加注释 <!-->
注释信息不会在网页中显示，可以放在HTML文件的任何地方
<!--请在此添加注释语句-->
18. 添加空格
在主体中使用，一个 代表空一个字符
19.添加删除线 <del></del>
使用成对标记<del></del>，在主体中添加
<body>
<del>请在此输入需要添加删除线的文字</del>
</body>
20. 插入特殊符号
符号对应代码
&&
TM &trade
￥¥
等~~
21.设置文字标注标记<ruby>
<ruby>
被说明的文字（当代最可爱的人）
<rt>
文字的标注（志愿者）
</rt>
</ruby>
22.简单文字修饰（加粗、斜体、下划线）
<body>
普通文字的显示<br>
<b>加粗文字的显示</b>
<i>斜体文字</i>
<u>给文字加下划线</u>
</body>
23.确定文字上下标-<sup>/<sub>
<body>
<sup>上标内容</sup>
<sub>下标内容</sub>
</body>
24.设置地址文字<address>
在网页中添加地址文字，是为了更方便地突出显示联系方式，将联系人的地址信息突出显示
<body>
<address>请在此添加地址信息</address>
</body>
25.设置等宽文字 <tt> <samp> <code> <kdd>
多数情况用在英文文字显示中
<body>
<tt>打字机风格显示</tt>
<code>等宽文字设置内容</code>
<samp>等宽文字设置内容</samp>
<kdd>键盘输入</kdd>
</body>
26.段落<p></p>----双标记
回车<br>----单标记，强制性换行，可以放在<p></p>之间使用
预格式化<pre></pre>
利用<pre></pre>标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落；
设置段落缩进<backquote>
利用一对<backquote></backquote>标记可以缩进5个字符
插入并设置水平线<hr>
水平线的属性有：align---水平线对齐方式，取值有3种：left，right和center
width---水平线的长度，如500px
size---水平线的粗细
color---水平线的颜色，如red
noshade---水平线是否有阴影
标题标记<hn>，其中n为数字1-6，共分6级，数字越小，字体越大，表示越重要
27.插入列表
列表类型标记符号
定义列表<dl></dl>
无序列表<ul></ul>
目录列表<dir></dir>
有序列表<ol></ol>
(1)插入定义列表<dl></dl>
<dl>
<dt>联系人<dd>*** ----<dt>定义名称部分，只在<dl>中使用
<dt>联系地址<dd>北京市海淀区----<dd>解释说明部分，只在<dl>中使用
<dt>邮政编码<dd>100876
</dl>
输出结果为：
联系人
***
联系地址
北京市海淀区
邮政编码
100876
(2)插入无序列表<ul></ul>
<ul>
<li>联系人：***</li>
<li>联系地址：北京市海淀区</li>
<li>邮政编码：100876</li>
</ul>
输出结果为：
·联系人：***
·联系地址：北京市海淀区
·邮政编码：100876
补充：无序列表<ul>中用type属性来控制行的标号
type=disc 设定一个实心圆点的行标号，表示默认项，如上面所示；
type=circle 设定一个空心圆点作为行标号；
type=square 设定一个方形实心点作为行标号；
(3)插入有序列表<ol></ol>
<ol>
<li>联系人：***</li>
<li>联系地址：北京市海淀区</li>
<li>邮政编码：100876</li>
</ol>
输出结果为：
1.联系人：***
2.联系地址：北京市海淀区
3.邮政编码：100876
补充：有序列表的顺序是由属性type和start来设置的。type表示标号的类型，start表示列表的标号从第几项开始
type=1 表示用数字标号（默认项）
type=A 表示用大写字母
type=a 表示用小写字母
type=I 表示用大写罗马数字
type=i 表示用小写罗马数字
(4)嵌套定义列表
<dl>
<dt>网页三剑客
<dd>Dreamweaver
<dd>Flash
<dd>Fireworks
<dt>编程三剑客
<dd>VB
<dd>VF
<dd>VC
</dl>
显示结果为：
网页三剑客
Dreamweaver
Flash
Fireworks
编程三剑客
VB
VF
VC
(5)嵌套有序与无序列表
<ul>
<li>水果类
<ol>
<li>苹果</li>
<li>香蕉</li>
</ol>
</li>
<li>蔬菜类
<ol>
<li>萝卜</li>
<li>白菜</li>
</ol>
</li>
</ul>
显示结果为：
·水果类
1.苹果
2.香蕉
·蔬菜类
1.萝卜
2.白菜
28.超链接
一般而言，一个网站的文件都是在同一个目录下的
在HTML文件中提供了三种路径：绝对路径，相对路径，根路径
在HTNL文件中，超链接可以分为内部链接和外部链接。所谓内部链接：指网站内部文件之间的链接；所谓外部链接，指网站内的文件链接到站点内容外的文件。
(1)绝对路径：只文件的完整路径，包括文件传输的协议http，ftp等，一般用于网站的外部链接，例如：http://ysu.edu.cn, ftp://202.206.251.100
(2)相对路径：只相对于当前文件的路径，它包含了从当前文件指向目的文件的路径。同时只要是处于站点文件夹之内，即使不属于同一个文件目录下，相对路径建立的链接也适合。采用相对路径是建立两个文件之间的相互关系，可以不受站点和所处服务器位置的影响。
相对位置如何输入
同一目录输入要链接的文档
链接上一目录先输入"../"，再输入目录名
链接下一目录先输入目录名，后加"/"
(3)根路径：适合内部链接的建立，一般情况下不使用根路径，以"/"开头，后面紧跟文件路径。
29.超链接的建立
(1)插入内部链接： <a href="index.htm">链接内容</a>
(2)插入外部链接： <a href="http://ysu.edu.cn">燕山大学</a>
(3)设置图像映射：
基本语法：<img src="URL" usemap=""></img>
<map name="">
<area shape="" coords=" , , " href="URL">
</map>
语法说明：<img>标记表示插入图像文件，src表示插入图像的路径，<map>标记表示插入图像的映射；<area>标记表示图像映射区域；shape属性表示映射区域形状：rect表示矩形区域，circle表示椭圆形区域，poly表示多边形区域；coords表示感应区域的坐标。
30.表格
(1)<table></table>表示插入一个表格；
(2)<tr></tr>表示插入一行，<td></td>表示插入一列；
(3)<caption></caption>表示插入表格标题，用于<table>和<tr>之间；
(4)设置表格表头<th>：将要作为表头的一行，列标记<td>改为<th>即可；
(5)设置划分结构表格<thead>、<tbody>、<tfoot>
所谓划分结构表格，指将一个表格分成三个部分在网页上显示
<thead></thead>表示定义一组表头行
<tbody></tbody>表示定义表格主体部分
<tfoot><tfoot>表示为表格添加一个标准
(6)设置表格的标记属性
<table width="" border="" frame="" rules="">
width设置表格的宽度border设置表格边框的粗细frame设置表格边框的样式rules设置表格内部边框的属性
above 显示上边框，border显示上下左右边框， below显示下边框， hsides显示上下边框，lhs显示左边框，rhs显示右边框，void 不显示边框，vsides 显示左右边框；
all 显示所有内部边框
groups 显示介于行列之间的边框
none 不显示内部边框
cols 显示列边框
rows 显示行边框
(7)设置表格行：<tr align="" valign="">
align设置行内容的水平对齐：left（左对齐），right，center
valign调整行内容的垂直对齐：top（顶端对齐），middle，bottom，baseline（基线）
(8)设置跨行：rowspan
<table>
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
显示结果为一个两行三列的表格，但是第一列的两个表格合并为一个了，即跨行。
(9)设置跨列：colspan
<table>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
显示结果为：
一个两行三列的表格，但是第一行的前两列表格合并为一个表格。
转载于:https://www.cnblogs.com/xiaozhu520/p/9944405.html
什么是HTML？HTML怎么学？HTML基础教程相关推荐
- 绘画如何入门？学绘画基础教程
绘画如何入门?学绘画基础教程!没有基础的话建议先从素描开始临摹,然后用软件建模,接着过渡到线稿.素描作为最基础的课程,需要你从最最最最基础的地方来看,就是人体.为了帮助有兴趣的朋友理解大多数人会选择绘 ...
- 一起学 mybatis 基础教程
我也才刚刚开始学习mybatis 有很多不懂得地方和大家探讨,准备把我自己学习mybatis的一些心得和大家分享. mybatis 基本教程 mybatis + maven 环境搭建 mybatis ...
- python是干什么用的视频-python基础教程千锋最新视频学完之后可以做什么
从目前来看,人工智能异常火爆,而Python作为人工智能首选语言自然受到了欢迎,而且Python语言在学术上也很受青睐.就算不是计算机专业的人,很多都在学习python.那么python基础教程千锋最 ...
- python零基础怎么学-零基础如何入门Python
零基础学习编程,和学习任何一门实用技能都同样需要经历3个阶段:理解->模仿->应用 正如我们在婴儿时期学习说话的时候,最初是看着图片理解文字的含义,然后是模仿父母的发音,逐渐才能学会表达自 ...
- 带你学python基础：列表List
在上一节中带你学python基础:变量和基本数据类型中,已经讲到了列表List如何创建和简单的使用,在这一节中,我们将更加细致入微的了解一下List更多的操作! 一.列表是什么? 列表是什么就是:一个 ...
- 字符串从右截取_跟运维组学Python基础day04(字符串str的索引和切片)
内容回顾 跟运维组学Python基础 day03 格式化输出 %s name = input('Pleases input your name: ') # Zanaoprint('My name is ...
- 学PS基础：Photoshop 技能167个
学PS基础:Photoshop 技能167个 经典的Photoshop技巧大全,如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级水平.绝对不是广告噢. 常见技巧 经典的Photoshop技巧大全 ...
- 计算机应用基础专业宣传手册,用微课学·计算机应用基础简介，目录书摘
内容简介: <用微课学·计算机应用基础>是依据<中等职业学校计算机应用基础教学大纲>编写,旨在培养学生掌握计算机应用的基础能力.主要内容包括:个人计算机组装.文字录入训练.宣传 ...
- 小姐姐用一周的时间，偷偷带你学Python，从小白到进阶，全站式保姆的Python基础教程导航帖（已完结）
第一部分.基础知识目录 小姐姐带你们偷偷的学Python,然后你们要惊呆所有人(第一天) 小姐姐带你们偷偷的学Python,然后你们要惊呆所有人(第二天) 小姐姐带你们偷偷的学Python,然后你们要 ...
- 计算机应用技术学教程,最新计算机应用技术基础教程 科技大学教育读本.pdf
最新计算机应用技术基础教程 主 编 李立勇 副主编 成颖红 丁嘉良 编 委 郭正宇 陈 洁 吴克鸿 电子科技大学出版社 前 言 目前,计算机已经成为我们日常生活中的一部分,我们可以通过计算机订 车票. ...
最新文章
- 特斯拉纯视觉FSD版本Bug频发！马斯克：不认真测试的车主就取消资格
- 去耦电容和旁路电容详解
- postman 以全局变量活用 Token
- iphone练习之手势识别(双击、捏、旋转、拖动、划动、长按）UITapGestureRecognizer...
- chromebook刷机_您可以购买的最好的Chromebook，2017年版
- 第一节 接口概述 [转贴]
- oracle中dblink怎么用,Oracle中建立了dblink怎么使用
- jquery生成二维码图片
- spring 监听器
- 基于WCF的通道网络传输数据压缩技术的应用研究
- Java mail 接受网易126和163邮件时数目不全
- 如何在64位win7中使用未有签名的驱动程序
- Excel学习笔记4||数据处理函数ROUND、INT、TRUNC、MAX、MIN、ROW、COLUMN
- 电脑没声音怎么调出来？让电脑重新“开口说话”，黑客仅用了2招
- MySQL - Failed to open the referenced table XXX
- 开发规约：接口统一返回值格式 [resend]
- 邮件html签名手机电脑不一致,HTML电子邮件签名不能在iPhone上正确渲染
- Python实战小项目—绘制玫瑰花送给女朋友叭
- opencv C++图像/视频旋转 90度 180度 270度
- spark streaming 整合kafka 报错 KafkaConsumer is not safe for multi-threaded access