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基础操作 一. 前言与学习计 ...
随机推荐
- python中list切片详解
语法:[start:stop:step] step代表切片步长:切片区间为[start,stop),包含start但不包含stop 1.step > 0,从左往右切片 2.step <0, ...
- # webpack 打包工具（vue）
vue-webpack 打包工具 我的github iSAM2016 不是教程,是自我总结 目录 webpack.base.conf.js webpack.dev.conf.js webpack.pr ...
- git命令（转）
git工作模式 工作区(代码) 暂存区 版本区(提交区.历史区) 初始化 git config --global user.name *** git config --global user.emai ...
- Mysql数据库（0）习题分析
1.查询表中第二高工资的Id,如果没有,返回NULL.此题的关键是如果遇到Empty set,就必须要返回NULL. (1)使用子查询. offset ) AS SecondHighestSalary ...
- LeetCode刷题笔记（3）Java位运算符与使用按位异或（进制之间的转换）
1.问题描述 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 算法应该具有线性时间复杂度并且不使用额外空间. 输入: [4,1,2,1,2] 输 ...
- cacti1.2.7安装教程+Centos7|Cacti1.2.x+Centos7+Spine1.2.7零基础手把手教学
cacti1.2.7安装教程+Centos7|Cacti1.2.x+Centos7+Spine1.2.7零基础手把手教学 教程地址: 链接:http://note.youdao.com/notesha ...
- SpringBoot2.1.9+dubbo2.7.3+Nacos1.1.4构建你的微服务体系
简单几步使用最新版本的DUBBO构建你的微服务体系 NACOS注册中心 从github下载最新版本的nacos 上传至服务器并解压 单机启动sh startup.sh -m standalone na ...
- 读书笔记-《Maven实战》-2018/5/3
5.7依赖调解 1.当一个项目有以下依赖关系的时候:A->B->C->X(1.0).A->D->X(2.0),X作为A的传递依赖而拥有两个版本,Maven为了解决以上问题 ...
- python中生成器及迭代器
列表生成式 列表生成式是python内部用来创建list的一种方法,其格式形如: L = [x*8 for x in range(10)] print(L) 此时会得到结果:[0, 8, 16, 24 ...
- [考试反思]1023csp-s模拟测试84：精妙
一套很奇怪的题.单调性+神仙dp/搜索+随机化. 但是说实在的,思路都很不错. 考场上显然乱搞没什么好说的. 虽说T2剪枝打错变量名掉了20分... T1:Smooth 暴力各有不同,最暴力的想法就是 ...