码迷,mamicode.com
首页 > Web开发 > 详细

HTML 学习

时间:2018-02-20 17:32:15      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:ram   rpg   center   charset   height   set   数字   d3d   设置   

记录一下 HTML的学习

技术分享图片
1 <html><!-- html的标签,代表html文档的结束和开始 -->
2 <head><!-- 头部分,设置网页属性,可以设置标题 -->
3 <title>hello world </title><!-- 标题 -->
4 </head>
5     <body><!-- 正文部分,放置想要在页面上显示的内容 -->
6         hello world!
7     </body>
8 </html>
01helloworld
技术分享图片
 1 <html>
 2     <head>
 3         <title>排版标记</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8         
 9         对我说,<br>
10         永远永远,<br>
11         <p>
12         再次,
13         </p>
14         围绕着我。
15         <hr>
16     </body>
17 </html>
02排版标记
技术分享图片
 1 <html>
 2     <head>
 3         <title>03字体标记</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8         <h1>丢火车</h1><!-- 标题1,会自动加粗字体,且换行,H1是最大,至H6 -->
 9         <font color="red" size="6" face="楷体"></font>我说,<br><!-- font 字形设定,color(red),face(黑体),size(1-7) -->
10         永远永<sup></sup><br>
11         <u>再次,</u>
12         <p>围绕着我。</p>
13         <hr>
14     </body>
15 </html>
03字体标记
技术分享图片
 1 <html>
 2     <head>
 3         <title>转义字符</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8&nbsp;义字符<br>
 9&nbsp;&nbsp;&nbsp;&nbsp;&amp;nbsp;<br>
10&lt;&amp;lt;<br>
11&gt;&amp;gt;<br>
12&quot;&amp;quot;<br>
13         &reg; 注册标志&amp;reg;<br>
14         &copy; 版权&amp;copy;<br>
15         &trade; 商标&amp;trade;<br>
16     </body>
17 </html>
04转义字符
技术分享图片
 1 <html>
 2     <head>
 3         <title>05清单标记</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8        爱好:<br>
 9            <ul type="circle"><!-- 无序列表 ul type="circle""square"-->
10                 <li>sleep</li>
11                 <li>eat</li>
12                 <li>continue sleep</li>
13            </ul>
14            <ol type="I" start="10"><!-- 有序列表 ol type="A" "I"罗马数字 "1"数字 start="起始数字" -->
15                 <li>第一</li>
16                 <li>第二</li>
17                 <li>第三</li>
18            </ol>
19            <dl>
20                 <dt>rpg</dt><!-- 类别 dt 定义类名,dd定义单项名 -->
21                     <dd>仙剑</dd>
22                     <dd>轩辕剑</dd>
23                 <dt>棋牌</dt>
24                     <dd>飞行棋</dd>
25                     <dd>扑克</dd>
26            </dl>
27     </body>
28 </html>
05清单标记
技术分享图片
 1 <html>
 2     <head>
 3         <title>06图形标记</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8         <img src="多样性计算表达式.png" border="20" width="300" height="300" alt="很遗憾未加载成功" title="计算式"><br>
 9     <br>&lt;img src="图片文件位置" border="边框宽度" width height/// alt="未显示成功时提示字符" title="图片提示信息" &gt;
10     </body>
11 </html>
06图形标记
技术分享图片
 1 <html>
 2     <head>
 3         <title>07链接标记</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8         <a href="02排版标记.html" target="_blank">点击</a><br>
 9         <a href="http://www.baidu.com">百度</a>
10         <!-- 
11             href属性内容:
12                 协议名+协议内容
13                  -->
14     </body>
15 </html>
07链接标记
技术分享图片
 1 <html>
 2     <head>
 3         <title>08链接标记2</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8         <!-- A标签的锚功能(回到顶部) -->
 9         <a name="_abc"></a>
10         <img src="多样性计算表达式.png" border="20" width="300" height="300" alt="很遗憾未加载成功" title="计算式"><br>
11         <img src="多样性计算表达式.png" border="20" width="300" height="300" alt="很遗憾未加载成功" title="计算式"><br>
12         <img src="多样性计算表达式.png" border="20" width="300" height="300" alt="很遗憾未加载成功" title="计算式"><br>
13         <img src="多样性计算表达式.png" border="20" width="300" height="300" alt="很遗憾未加载成功" title="计算式"><br>
14         <a name="mid"></a>
15         <img src="多样性计算表达式.png" border="20" width="300" height="300" alt="很遗憾未加载成功" title="计算式"><br>
16         <img src="多样性计算表达式.png" border="20" width="300" height="300" alt="很遗憾未加载成功" title="计算式"><br>
17         <a href="#_abc">回到顶部</a>
18         <a href="#mid">转到中间</a>
19     </body>
20 </html>
08链接标记2
技术分享图片
 1 <html>
 2     <head>
 3         <title>09表格标记</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8 <table border="1" cellspacing="1" cellpadding="30" width="500">
 9         <tr>
10             <td align="center">姓名</td>
11             <th>年龄</th>
12         </tr>
13         <tr>
14             <td>Tom</td>
15             <td>10</td>
16         </tr>
17         <tr>
18             <td>Jack</td>
19             <td>20</td>
20         </tr>
21         <tr>
22             <td>Rose</td>
23             <td>21</td>
24         </tr>
25     </table>
26 </body>
27 </html>
09表格标记

10 框架frame

技术分享图片
 1 <html>
 2 <head>
 3 <title>框架 </title>
 4 <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5 </head>
 6     <frameset rows="30%,70%">
 7         <frame src="标题栏.html"/>
 8             <frameset cols="20%,80%">
 9                 <frame src="链接.html"/>        
10                 <frame src="内容1.html" name="_loc">
11                 
12             </frameset>
13         
14         
15     </frameset> 
16 </html>
框架主体
技术分享图片
 1 <html>
 2     <head>
 3         <title>标题栏</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8         <h1>This is frame</h1>
 9     </body>
10 </html>
标题栏
技术分享图片
 1 <html>
 2     <head>
 3         <title>链接</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8         <!-- A标签的锚功能(回到顶部) -->
 9         <a href="内容2.html" target="_loc">点此<br/>跳转</a>
10     </body>
11 </html>
链接
技术分享图片
 1 <html>
 2     <head>
 3         <title>内容1</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8         <img src="流程图.png" border="1" width="600" height="500" alt="很遗憾未加载成功" title="流程图"><br>
 9     <br>&lt;img src="流程图.png" border="边框宽度" width height/// alt="未显示成功时提示字符" title="图片提示信息" &gt;
10     </body>
11 </html>
内容1
技术分享图片
 1 <html>
 2     <head>
 3         <title>内容2</title>
 4         <meta http-equiv="content-type" content="text/html;charset=utf-8">
 5         <!-- 改变页面的解析编码表 -->
 6     </head>
 7     <body>
 8         
 9         对我说,<br>
10         永远永远,<br>
11         <p>
12         再次,
13         </p>
14         围绕着我。
15         <hr>
16     </body>
17 </html>
内容2

流程图:

技术分享图片

 

HTML 学习

标签:ram   rpg   center   charset   height   set   数字   d3d   设置   

原文地址:https://www.cnblogs.com/mrfri/p/8455408.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!