其实在学习前端开始之前，问过自己为什么要学，因为自己学的比较杂，直到现在刚刚毕业出来工作了，才明确了方向了，要往嵌入式方向走，但是随着时代的发展，在编程和智能硬件结合的越来越紧密，特别是物联网这一块，所以思考着这些，自己就开始学起前端了，也是因为他相对于其他编程语言来说，更简单一些，而且实现代码效果比较酷炫，最重要的一点还是上面自己所说的嵌入式，好了，开始写总结了。

一、实现一个小的网页demo:

在实现效果之前，先了解下面一些基本的知识点：

注：上面的<hr>它是单标签，也就是说不要写</hr>,<br>它也是单标签；上面的6级标题和office里面的word标题等级是一个意思

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>hahaha</title>

    </head>

    <body>

        <h1> i like the mcu! </h1>  //标题等级1

        <i> 2019.8.5</i>   //把文字弄成斜体

        <hr>   //有一个水平线出来

        <p>    //段落换行

            do you like the beef?

        </p>

        <p>

            yes,</br><b>i like it </b>  //<br>表示换行标签，<b>表示加粗字体

        </p>

    </body>

</html>

效果演示：

二、新闻列表动态显示连接效果：

还是一样，先了解一些基本知识;

这里我以下面的一个新闻页面来举例说明：

代码和演示出的效果如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>百度新闻</title>

    </head>

    <body>

        <h1>娱乐&nbsp;<img src="https://t10.baidu.com/it/u=72872058,622365330&fm=173&app=25&f=JPEG?w=218&h=146&s=B9B4CB144461F511E424D8DD030080A3"></h1>

        <hr>

        <ui>

            <li>

                <a href="http://baijiahao.baidu.com/s?id=1640947916207860993">杨紫，邓伦马思纯，王源潘粤明，马伊琍，海清，朱丹，唐禹哲</a>

            </li>

            <li>

                <a href="http://baijiahao.baidu.com/s?id=1640986424135539802">香港最美千金何超莲撇男友夜店狂欢，自曝美丽是因为混血</a>

            </li>

            <li>

                <a href="http://baijiahao.baidu.com/s?id=1640951135668808400">拿下八个代言，被预言“第二个吕燕”，撞脸林永健的贾晨宇不简单</a>

            </li>

            <li>

                <a href="http://baijiahao.baidu.com/s?id=1640952530954430031">《好莱坞往事》：很暴力，很昆汀</a>

            </li>

        </ui>

        <ol>

            <li>

                <a href="http://baijiahao.baidu.com/s?id=1640947916207860993">杨紫，邓伦马思纯，王源潘粤明，马伊琍，海清，朱丹，唐禹哲</a>

            </li>

            <li>

                <a href="http://baijiahao.baidu.com/s?id=1640986424135539802">香港最美千金何超莲撇男友夜店狂欢，自曝美丽是因为混血</a>

            </li>

            <li>

                <a href="http://baijiahao.baidu.com/s?id=1640951135668808400">拿下八个代言，被预言“第二个吕燕”，撞脸林永健的贾晨宇不简单</a>

            </li>

            <li>

                <a href="http://baijiahao.baidu.com/s?id=1640952530954430031">《好莱坞往事》：很暴力，很昆汀</a>

            </li>

        </ol>

    </body>

</html>

说明：上面的演示效果里面的小标题，点击的话，是可以进去看到内容了。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------每天进步一点点，日积月累你也会成仙！！！！！！

html的一些基本语法学习与实战的更多相关文章

  1. Golang 语法学习笔记

    Golang 语法学习笔记 包.变量和函数. 包 每个 Go 程序都是由包组成的. 程序运行的入口是包 main. 包名与导入路径的最后一个目录一致."math/rand" 包由 ...

  2. Swift高级语法学习总结（转）

    Swift高级语法学习总结 1.函数 1.1 func funcNmae()->(){} 这样就定义了一个函数,它的参数为空,返回值为空,如果有参数和返回值直接写在两个括号里就可以了 1.2 参 ...

  3. Swift基础语法学习总结(转)

    Swift基础语法学习总结 1.基础  1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift使用print和println打印,它的传参是一个泛型 ...

  4. Swift高级语法学习总结

    Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.函数 1.1 func funcNmae()->(){} 这样就定义了一个函数,它的参数为空,返回值为空,如 ...

  5. Swift基础语法学习总结

    Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.基础  1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift ...

  6. NGUI 学习笔记实战之二——商城数据绑定（Ndata）

    上次笔记实现了游戏商城的UI界面,没有实现动态数据绑定,所以是远远不够的.今天采用NData来做一个商城. 如果你之前没看过,可以参考上一篇博客   NGUI 学习笔记实战——制作商城UI界面  ht ...

  7. Robot Framework语法学习（一）

    Robot Framework语法学习: 一.变量的声明.赋值与使用 1.变量标识符:每个变量都可以用  变量标识符 ${变量名} 来表示. 2.变量声明:可以在TestSuite上点右键或者在Edi ...

  8. 深度学习入门实战（二）-用TensorFlow训练线性回归

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者 :董超 上一篇文章我们介绍了 MxNet 的安装,但 MxNet 有个缺点,那就是文档不太全,用起来可能 ...

  9. MarkDown语法 学习笔记 效果源码对照

    MarkDown基本语法学习笔记 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 下面将对Markdown的基本使用做一个介绍 目 ...

随机推荐

  1. hive 常用的 join 操作 实例

    test_a 表 id value 1 java 2 python 3 c++ test_b 表 id value 1 java 2 go 3 php 4 c++ 1. join 计算的是笛卡尔积,不 ...

  2. BZOJ 1067：[SCOI2007]降雨量（RMQ+思维）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1067 题意:…… 思路:首先我们开一个数组记录年份,一个记录降雨量,因为年份是按升序排列的,所以我们 ...

  3. django ORM中的RelatedManager(关联管理器)

    关联管理器应用在 一对多的表 或者 多对多的表 多对多表中的用法: 在多对多的表中 正向查询 #基于对象的查询 #正查 # author_obj = Author.objects.get(id=1) ...

  4. Appium+python自动化（十八）- 你难道是猴哥失散多年的混血弟弟还是妹妹？？？- Monkey事件（超详解）

    操作事件简介 Monkey所执行的随机事件流中包含11大事件,分别是触摸事件.手势事件.二指缩放事件.轨迹事件.屏幕旋转事件.基本导航事件.主要导航事件.系统按键事件.启动Activity事件.键盘事 ...

  5. C语言学习书籍推荐《C语言程序设计 现代方法(第2版)》下载

    下载地址:点我 C语言仍然是计算机领域的通用语言之一,但现在的C语言已经和当初的时候大不相同了.本书主要的一个目的就是通过一种“现代方法”来介绍C语言,书中强调标准C,强调软件工程,不再强调“手工优化 ...

  6. windows快速创建文本文档的几个方法快捷键和

    1. 在平常使用电脑中要经常用到在左面创建文本文档txt最笨重的方法就是右键但是这样非常的慢,有没有什么快捷键呢 2. 快捷键 快捷键就是Win+R ,键入notepad 然后回车就可以编辑了 是不是 ...

  7. 剑指offer第二版-8.二叉树的下一个节点

    描述:给定一棵二叉树和其中的一个节点,找出中序遍历序列的下一个节点.树中应定义指向左节点.右节点.父节点的三个变量. 思路: 1.如果输入的当前节点有右孩子,则它的下一个节点即为该右孩子为根节点的子树 ...

  8. NOIP 2017 惊魂记

    考完了NOIP三周后才开始补……然后又补了一周…… DAY -1: 晚上吃了一顿送行宴散伙饭,然后默默地看了一遍之前所有考试后写的题解,再读了几遍板子,然后和QTY一起和达哥又一次在外面谈了一个小时, ...

  9. I/O：Reader

    FileReader: /* 用来读取字符文件的便捷类.此类的构造方法假定默认字符编码和默认字节缓冲区大 小都是适当的.要自己指定这些值,可以先在 FileInputStream 上构造一个 Inpu ...

  10. 《ElasticSearch6.x实战教程》之简单的API

    第三章-简单的API 万丈高楼平地起 ES提供了多种操作数据的方式,其中较为常见的方式就是RESTful风格的API. 简单的体验 利用Postman发起HTTP请求(当然也可以在命令行中使用curl ...