新手学习html的一些总结
2015-05-28 23:46
323 查看
HTML学习——基本概念
HTML标记
基本形式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
语法形式：<标记名称 属性1=“值1”属性2=“值2”......>组件资料</标记名称>
1.<!--->注释文字，注释的文字不会在浏览器中出现
2.<title>用于标记HTML文件的标题名称和主题内容，他讲显示在浏览器的标题栏中。
3.<body>是HTML文件的主题。
文字版面
1.<nobr>是的每行文字字数在不同大小的浏览器窗口中显示相同，既不进行换行。
2.<br>用于换行
3.<p>被其标记的文字表示在同一段落中。（p是表示不同段落，br则知识表示换行相当于word中的enter键）
其中p标签可以有align属性用来表示段落的对其：left center right分别表示向左中右对其。
4.<pre>表示保留原始的排版，即表示在编辑的时候怎样在浏览器中也是表示成什么样。
5.<hr>表示水平分割线。它带有属性size width align color nishade等，分别表示粗细，宽度，对齐，颜色，3d阴影
6.< >表示空格。
7.<center>表示居中，其所包括的内容在浏览器中处于居中对齐。
8.<blockquote>向右缩进。
9.<hn>用于标记网页的标题文字。
它也具有对齐属性：align
10.<font>用于控制文字的字体，颜色，大小。
其性质有face color size
11.<b>文字以粗字体显示
<i>文字以斜字体显示
<u>加以下划线显示
<s>加以删除线的方式显示
<big>以放大字体显示
<small>以缩小字体显示
<sup>以上标字体显示
<sub>以下表字体显示
<strong>文字以加强强调样式显示
<em>文字以强调样式显示
<address>用来显示邮箱于网址
<code>用来说明程序代码于指令
12.特殊符号的表示
“<”->&it
“>”->>
“&”->&
“"”->"
13.body的标记属性
<bgcolor>背景颜色<background背景图片<text>网页文字颜色
文字列表设计
1.<ol>用于编号列表标记
example：
<body>
<ol>
<li>周宇涛1
<li>周宇涛周宇涛2
<li>周宇涛周宇涛周宇涛3
</ol>
</body>
<ol>中的属性type。语法有type=1，A，a，I，i
<ol>中的属性start。语法 start=n (n=2，c等)
2.<ul>用于项目符号列表的设计
example：
<body>
<ul>
<li>周宇涛1
<li>周宇涛周宇涛2
<li>周宇涛周宇涛周宇涛3
</ul>
</body>
.PNG)
<ul>属性type
语法：type=“circle，disc，square”分别表示空心圆，实心圆，方块。
3.其他
menu，lh。
比较ul，menu，lh
<ul>
<li>周宇涛1
<li>周宇涛周宇涛2
<li>周宇涛周宇涛周宇涛3
</ul>
<menu>
<li>周宇涛1
<li>周宇涛周宇涛2
<li>周宇涛周宇涛周宇涛3
</menu>
<lh>
<li>周宇涛1
<li>周宇涛周宇涛2
<li>周宇涛周宇涛周宇涛3
</lh>
.PNG)
由此可见lh缩进最少，其次为ul，menu的缩进最大
4.说明项目标记
语法：
<body>
<dl>
<dt><b><i>前言</i></b>
<dd>领导是影响人们资源女里的行为<br />
群体目标所采取的行动<br />
<dt><b><i>领导力</i></b>
<dd>领导是影响人们资源女里的行为<br />
群体目标所采取的行动<br />
</body>
.PNG)
5.ul，ol等标记的组合使用。
example：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>组织行为-领导</h1>
<ul>
<li>领导的效能理论，依据
<ol>
<li><font color="blue">领导的权利基础</font>
<ul>
<li><font color="green ">强制权利</font>
<li><font color="green ">奖赏权利</font>
</ul>
<li><font color="blue ">领导理论</font>
<ul>
<li><font color="green ">特质轮</font>
<li><font color="green ">情景论</font>
</ul>
</ol>
</ul>
</body>
</html>
结果：
表格的建立
表格的建立需要<table><th><tr><td>四个标记完成
相关说明：
表格的起始标记<table></table>用来表示一个表格组件，是由<tr>横行<td>单元行<th>标题单元行组成
<tr>标记用于定义表格的一行，在一组<tr>标记将建立一列表格，也可以包括另外两个标记定义的单元格
<td>用于定义表格的单元格，但是只能放在<tr>中
<th>用于定义表格内的标题单元格，此单元格中的文字以粗字体显示
.png)
1.
<table>的表格外框相关属性<border><cellspacing><cellpadding>
<border>用于控制表格边框的宽度；
<cellspacing>用于控制单元边框到表格边框的距离；
<cellpadding>用于控制文字到四周边框的距离；
.png)
2.
表格的控制
<height>表示表格高度
<width>用来控制整个表格的宽度；
<bordercolor>用于控制表格边框颜色；
<bgcolor>用于设置表格背景颜色；
<align>用于表格水平对齐；
3.
表格行的控制
相关属性都是在<tr>中进行的。
<height>设置单元格的高度；
<boedercolor>用于控制表格某行的外框颜色；
<bgcolor>用于控制行的背景颜色；
<align>用于行的文字水平对齐方式；
<valign>用于行的文字垂直对齐方式；
4.
单元格的控制
相关属性设置在<td>或<th>中
<bordercolor>控制表格内某单元的边框颜色；
<bgcolor>控制表格内某单元的背景的颜色；
<align>控制单一单元内文字的水平对齐方法；
<valign>控制某单元格的文字，分别为上中下；
<colspan>控制表格中某单元格合并右方的单元格，蛋刀水平延伸单元格的效果；
语法：<td(th) colspan=n>（简言之就是吧该单元向右n个单元格合并成一个）
<rowspan>控制表格中某个单元格合并下方的单元格，达到垂直延生单元格的效果
<width>控制单元格的宽度（将整列单元格都设置）
<caption>用于建立表格的标题，含有谁属性align（top或则bottom）
HTML标记
基本形式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
语法形式：<标记名称 属性1=“值1”属性2=“值2”......>组件资料</标记名称>
1.<!--->注释文字，注释的文字不会在浏览器中出现
2.<title>用于标记HTML文件的标题名称和主题内容，他讲显示在浏览器的标题栏中。
3.<body>是HTML文件的主题。
文字版面
1.<nobr>是的每行文字字数在不同大小的浏览器窗口中显示相同，既不进行换行。
2.<br>用于换行
3.<p>被其标记的文字表示在同一段落中。（p是表示不同段落，br则知识表示换行相当于word中的enter键）
其中p标签可以有align属性用来表示段落的对其：left center right分别表示向左中右对其。
4.<pre>表示保留原始的排版，即表示在编辑的时候怎样在浏览器中也是表示成什么样。
5.<hr>表示水平分割线。它带有属性size width align color nishade等，分别表示粗细，宽度，对齐，颜色，3d阴影
6.< >表示空格。
7.<center>表示居中，其所包括的内容在浏览器中处于居中对齐。
8.<blockquote>向右缩进。
9.<hn>用于标记网页的标题文字。
它也具有对齐属性：align
10.<font>用于控制文字的字体，颜色，大小。
其性质有face color size
11.<b>文字以粗字体显示
<i>文字以斜字体显示
<u>加以下划线显示
<s>加以删除线的方式显示
<big>以放大字体显示
<small>以缩小字体显示
<sup>以上标字体显示
<sub>以下表字体显示
<strong>文字以加强强调样式显示
<em>文字以强调样式显示
<address>用来显示邮箱于网址
<code>用来说明程序代码于指令
12.特殊符号的表示
“<”->&it
“>”->>
“&”->&
“"”->"
13.body的标记属性
<bgcolor>背景颜色<background背景图片<text>网页文字颜色
文字列表设计
1.<ol>用于编号列表标记
example：
<body>
<ol>
<li>周宇涛1
<li>周宇涛周宇涛2
<li>周宇涛周宇涛周宇涛3
</ol>
</body>
<ol>中的属性type。语法有type=1，A，a，I，i
<ol>中的属性start。语法 start=n (n=2，c等)
2.<ul>用于项目符号列表的设计
example：
<body>
<ul>
<li>周宇涛1
<li>周宇涛周宇涛2
<li>周宇涛周宇涛周宇涛3
</ul>
</body>
<ul>属性type
语法：type=“circle，disc，square”分别表示空心圆，实心圆，方块。
3.其他
menu，lh。
比较ul，menu，lh
<ul>
<li>周宇涛1
<li>周宇涛周宇涛2
<li>周宇涛周宇涛周宇涛3
</ul>
<menu>
<li>周宇涛1
<li>周宇涛周宇涛2
<li>周宇涛周宇涛周宇涛3
</menu>
<lh>
<li>周宇涛1
<li>周宇涛周宇涛2
<li>周宇涛周宇涛周宇涛3
</lh>
由此可见lh缩进最少，其次为ul，menu的缩进最大
4.说明项目标记
语法：
<body>
<dl>
<dt><b><i>前言</i></b>
<dd>领导是影响人们资源女里的行为<br />
群体目标所采取的行动<br />
<dt><b><i>领导力</i></b>
<dd>领导是影响人们资源女里的行为<br />
群体目标所采取的行动<br />
</body>
5.ul，ol等标记的组合使用。
example：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>组织行为-领导</h1>
<ul>
<li>领导的效能理论，依据
<ol>
<li><font color="blue">领导的权利基础</font>
<ul>
<li><font color="green ">强制权利</font>
<li><font color="green ">奖赏权利</font>
</ul>
<li><font color="blue ">领导理论</font>
<ul>
<li><font color="green ">特质轮</font>
<li><font color="green ">情景论</font>
</ul>
</ol>
</ul>
</body>
</html>
结果：
表格的建立
表格的建立需要<table><th><tr><td>四个标记完成
相关说明：
表格的起始标记<table></table>用来表示一个表格组件，是由<tr>横行<td>单元行<th>标题单元行组成
<tr>标记用于定义表格的一行，在一组<tr>标记将建立一列表格，也可以包括另外两个标记定义的单元格
<td>用于定义表格的单元格，但是只能放在<tr>中
<th>用于定义表格内的标题单元格，此单元格中的文字以粗字体显示
1.
<table>的表格外框相关属性<border><cellspacing><cellpadding>
<border>用于控制表格边框的宽度；
<cellspacing>用于控制单元边框到表格边框的距离；
<cellpadding>用于控制文字到四周边框的距离；
2.
表格的控制
<height>表示表格高度
<width>用来控制整个表格的宽度；
<bordercolor>用于控制表格边框颜色；
<bgcolor>用于设置表格背景颜色；
<align>用于表格水平对齐；
3.
表格行的控制
相关属性都是在<tr>中进行的。
<height>设置单元格的高度；
<boedercolor>用于控制表格某行的外框颜色；
<bgcolor>用于控制行的背景颜色；
<align>用于行的文字水平对齐方式；
<valign>用于行的文字垂直对齐方式；
4.
单元格的控制
相关属性设置在<td>或<th>中
<bordercolor>控制表格内某单元的边框颜色；
<bgcolor>控制表格内某单元的背景的颜色；
<align>控制单一单元内文字的水平对齐方法；
<valign>控制某单元格的文字，分别为上中下；
<colspan>控制表格中某单元格合并右方的单元格，蛋刀水平延伸单元格的效果；
语法：<td(th) colspan=n>（简言之就是吧该单元向右n个单元格合并成一个）
<rowspan>控制表格中某个单元格合并下方的单元格，达到垂直延生单元格的效果
<width>控制单元格的宽度（将整列单元格都设置）
<caption>用于建立表格的标题，含有谁属性align（top或则bottom）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html初步 （一）
- html文件转换成pdf和word
- html元素id 和name的用法区别
- ScriptManager控件的使用
- 动力火车
- 在 html 中用加色法混合颜色
- @Html.Raw()
- 一些自己学习的html代码（锚，动态改变文本和链接，有序无序列表等）
- HTML的meta标签常用属性整理
- HTML
- 给HTML初学者的30条最佳实践
- 你可以使用HTML&nbsp;Meta标签来做…
- 给HTML初学者的30条最佳实践
- HTML中head头标签
- 给HTML初学者的30条最佳实践
- 即使不编程，你也应该学会HTML和CS…
- 即使不编程，你也应该学会HTML和CS…
- 提高 DHTML 页面性能
- HTML标签属性大全
- MVC-Html.Label（TextBox、TextArea、RadioButton、CheckBox）