一、前端学习之HTML编写静态页面

最新推荐文章于 2024-06-02 20:58:14 发布

码上有钱.

最新推荐文章于 2024-06-02 20:58:14 发布

阅读量6.5k

点赞数 4

分类专栏：前端文章标签： HTML学习 HTML入门 HTML手册

本文链接：https://blog.csdn.net/wangyangaiceshi/article/details/88857653

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本人也是前端入门小白先从HTML开始学起

最近花了3天时间学完HTML基础并练了一个Demo 算是温习一下

1、如图:

2、代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>HTML练习Demo</title>
   </head>
   <body>
       
       <h1>加多宝</h1><br />
       <br />
       <hr />
       <div style="width: 100;">
           <p style="text-align: center;">首页
                     日志
                     相册
                     音乐
                     收藏
                     关于我</p>
           <hr />
       </div>
       
       <div id="you" style="width:20%;position:absolute;right:10px;text-align:left;">
           <hr style="width:0px;height:300px;position:absolute;right:350px;"/>
           <p style="font-size: 40px;color: saddlebrown;">置顶文章</p>
           <hr />
           <p>HTML初学者-王阳同学</p>
           <p>努力到未能为力</p>
           <p>拼搏到感动自己</p>
           <p>为测试开发打下良好基础</p>
           <hr />
       </div>
       
       <div>
           <h2 style="text-align: left;">1、website Demo测试标题</h2>
           <p style="size: a3; text-align: start;">北京时间2019-0-27-22-13</p>
           <div style="width: 70%;">
               <ol>
                   <li>真可惜！我不是漂亮女孩，我的这个开头也不好。但开头不好，并不妨碍下面的干货不好噢。下面这80个Python学习教程，涵盖了从Python入门，到基础巩固，再到进阶强化的各类练习项目。就像......就像一个长相一般，但灵魂有趣的女孩子哇。好啦我退下啦，请自便哦。</li>
               </ol>
           </div>
           <h2 style="text-align: left;">2、website Demo测试标题</h2>
           <p style="size: a3; text-align: start;">北京时间2019-0-27-22-13</p>
           <div style="width: 70%;">
               <ol>
                   <li>真可惜！我不是漂亮女孩，我的这个开头也不好。但开头不好，并不妨碍下面的干货不好噢。下面这80个Python学习教程，涵盖了从Python入门，到基础巩固，再到进阶强化的各类练习项目。就像......就像一个长相一般，但灵魂有趣的女孩子哇。好啦我退下啦，请自便哦。</li>
               </ol>
           </div>
           <h2 style="text-align: left;">3、website Demo测试标题</h2>
           <p style="size: a3; text-align: start;">北京时间2019-0-27-22-13</p>
           <div style="width: 70%;">
               <ol>
                   <li>真可惜！我不是漂亮女孩，我的这个开头也不好。但开头不好，并不妨碍下面的干货不好噢。下面这80个Python学习教程，涵盖了从Python入门，到基础巩固，再到进阶强化的各类练习项目。就像......就像一个长相一般，但灵魂有趣的女孩子哇。好啦我退下啦，请自便哦。</li>
               </ol>
           </div>
           <hr />
           <p style="text-align: center; color: aqua;">版底@王阳于北京时间晚上10点24分</p>
       </div>

</body>
</html>

3、HTML标签整理:

1.<p></p> 标签也表示段落的意思

2.<a></a> 超链接与href一起使用

3.<img /> 定义图片与src一起使用

4.<br> 换行

5.<hr/> 水平线

6. 注释

7.<base> 描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

8.<link> 标签定义了文档与外部资源之间的关系，标签通常用于链接到样式表

9.<style> 标签定义了HTML文档的样式文件引用地址

10.<script> 标签用于加载脚本文件如： JavaScript

11.<meta> 标签- 使用实例 http://www.runoob.com/html/html-head.html

12.<table>定义表格 <tr><td><th>

13.<ul> 定义无序序列 <li> style="list-style-type:circle" 来定义显示的序号

14.<ol> 有序序列 <li> type="" 可以使用type定义显示序号

15.<dl> 自定义标签 <dt>自定义列表 <dd>自定义列表项

16.<div> 页面布局与css连用

17.<span> 内元素进行组合

18.<form> 表单

19.type="radio" 单选框

20.type="checkbox" 复选框

21.<select>下拉框 <option>

22.<textarea>文本框 rows高 cols宽

23.<iframe> 设置窗口

24.<script> JavaScript标签

25.position:absolute 绝对的意思

4、HTML小手册

HTML 速查列表

HTML 速查列表. 你可以打印它，以备日常使用。

HTML 基本文档

<!DOCTYPE html> <html> <head> <title>文档标题</title> </head> <body> 可见文本... </body> </html>

基本标签（Basic Tags）

<h1>最大的标题</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>最小的标题</h6> <p>这是一个段落。</p> <br> （换行） <hr> （水平线）

文本格式化（Formatting）

<b>粗体文本</b> <code>计算机代码</code> <em>强调文本</em> <i>斜体文本</i> <kbd>键盘输入</kbd> <pre>预格式化文本</pre> <small>更小的文本</small> <strong>重要的文本</strong> <abbr> （缩写） <address> （联系信息） <bdo> （文字方向） <blockquote> （从另一个源引用的部分） <cite> （工作的名称） <del> （删除的文本） <ins> （插入的文本） <sub> （下标文本） <sup> （上标文本）

链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a> 图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a> 邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a> 书签： <a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a>

图片（Images）

样式/区块（Styles/Sections）

h1 {color:red;} p {color:blue;}

</style> <div>文档中的块级元素</div> <span>文档中的内联元素</span>

无序列表

有序列表

定义列表

表格（Tables）

框架（Iframe）

表单（Forms）

实体（Entities）

如果有不规范的地方请多多指点

另外如果有想热爱"IT"工作的可以加QQ:294402584 一起学习,共同进步

码上有钱.

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
一、前端学习之HTML编写静态页面

本人也是前端入门小白先从HTML开始学起最近花了3天时间学完HTML基础并练了一个Demo 算是温习一下1、如图:2、代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>HTML练习Demo</tit...
复制链接

扫一扫

专栏目录