HTML基础学习心得分享
开始学些Html的时候主要进行一些简单的静态网页的处理：
1、HTML 标题
HTML 标题（Heading）是通过 h1-h6 加中括号<>等标签进行定义的。
2、HTML 段落
HTML 段落是通过
标签进行定义的。
3、HTML 链接
HTML 链接是通过《a》标签进行定义的。
4、HTML 图像
HTML 图像是通过 标签进行定义的。
5、HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
6、HTML 元素语法
a、HTML 元素以开始标签起始
b、 HTML 元素以结束标签终止
c、 元素的内容是开始标签与结束标签之间的内容
d、 某些 HTML 元素具有空内容（empty content）
e、 空元素在开始标签中进行关闭（以开始标签的结束而结束）
f、 大多数 HTML 元素可拥有属性
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>
显示结果为：
一个两行三列的表格，但是第一行的前两列表格合并为一个表格。
如果你现在正在纠结是否继续学前端，如果你害怕半途而废不知道从何开始，如果你觉得这篇文章对你还是有很大帮助的话，不介意的话可以加下我刚刚建立的一个学习交流群，有很多相关资料和学习视频：907694362
HTML基础学习心得分享的更多相关文章
- Java基础学习心得笔记
对于很多只会C语言的初学者而言,面对java基础语法学习,反而感觉很难,其实其中最大的问题不是语法难,而是一种编程思想的转变.面向过程就是把你的代码封装成函数,然后依次去做一件事情,面向过程是把你要做 ...
- Java基础学习经验分享
很多人学习Java,尤其是自学的人,在学习的过程中会遇到各种各样的问题以及难点,有时候卡在一个点上可能需要很长时间,因为你在自学的过程中不知道如何去掌握和灵活运用以及该注意的点.下面我整理了新手学习可 ...
- 【转】【收藏】LINQ学习心得分享--------（二）LINQ语法详解
原地址:http://blog.csdn.net/xuemoyao/article/details/8053444 通过上一章节的学习,相信大家已经掌握了学习LINQ的前期的准备知识.在这一节里, ...
- sql server 数据库基础学习心得 思维导图
- C#基础学习心得（一）
类的成员 数据成员:字段,常量(const) 函数成员:方法,属性,索引器,构造函数,析构函数,事件 类的声明 实例成员:对象相关性,不同于同一类的其他实例 静态成员:常量,static修饰的字段,方 ...
- C#基础学习心得（二）
索引器 class Program { static void Main(string[] args) { Employee e1 = new Employee(); e1[0] = "三& ...
- 我的WebX框架学习总结与心得分享
最近学习了webx框架, 利用博客园跟大家分享一下自己的学习心得; 周建旭 2014-08-21 网上关于webx的资料少的可怜, 怎么办? 这种情况下不用去求助别人求人只会耽误时间, 不用畏惧; ...
- Emacs学习心得之 基础配置
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础配置 1.前言2.基础配置 一.前言 本篇博文记录了Emacs的一 ...
- Emacs学习心得之 基础操作
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础操作 1.前言与学习计划2.Emacs基础操作 一. 前言与学习计 ...
随机推荐
- opencv::Mat属性
OpenCV支持JPG.PNG.TIFF等常见格式图像文件加载 加载图像 Mat imread( const String& filename, int flags = IMREAD_COLO ...
- 点击任何位置隐藏所需隐藏的元素 (无BUG/jQuery版)
1>第一种分两步 1) :对document的click事件绑定事件处理程序,使其隐藏该div 2) :对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调 ...
- tkinter基础-标签、按钮
本节内容: 明白标签.按钮的使用 实现简单的点击界面 Tkinter 简称tk,在python中属于内置模块,不需要进行安装,可直接引用,import tkinter 一. 首先我们做一个如图所示的图 ...
- ESP8266开发之旅 应用篇① 局域网应用 ——炫酷RGB彩灯
1.前言 这一篇,博主将教大家怎么去实现一个WiFi RGB彩灯. 先来一个博主已经实现功能的图片,如下: 当然,博主也拍了运行视频,请点击 传输门. 1.1 知识储备 ...
- The usage of Markdown---标题
更新时间:2019.09.14 目录: 1. 序言 2. 标题 2.1 类Atx形式 2.2 类Setext形式 3. 总结 1. 序言 Markdown是一种纯文本的标记语言,只要熟悉M ...
- Java基础（五）继承和多态
1.多态 先来看一个例子,其中Employee类是父类,Manager类继承了Employee类: public static void main(String[] args) { // constr ...
- unity 内置shader
几个有用的Unity 内置shader: (一)Standard RenderingMode:Opaque为实体渲染,更改Color的透明通道不会有影响:Cutout会把图片的透明通道显示出来,非严格 ...
- fenby C语言 P26
指针 地址 类型+“*”+变量名=指针变量 int *p1;//指向整型变量的指针变量p1 float *p2;//指向浮点型变量的指针变量p2 char *p3;//指向字符型变量的指针变量p3 “ ...
- 2018.8.9 python中的动态传参与命名空间
主要内容: 1.函数参数 ----动态传参 2.名称空间与作用域 3.函数的嵌套 4.global,nonlocal关键字 一.函数参数 ------动态传参 形参的第三种:动态传参 动态传参分为两种 ...
- Jdk14都要出了，还不能使用 Optional优雅的处理空指针？
1. 前言 如果你没有处理过空指针,那么你不是一位真正的 Java 程序员. 空指针确实会产生很多问题,我们经常遇到空的引用,然后又想从这个空的引用上去获取其他的值,接着理所当然的碰到了 NullPo ...