Some html basic syntax and practical learning

     In fact, before the front end of the learning begin, ask yourself how to learn, because they learn more complex, until now, just graduated out of work, only a clear direction, and the direction you want to go to the embedded, but with the development of the times, in smart programming and hardware combination of increasingly close, especially things this one, so think of these, and that they began to learn the front-end, but also because he is compared to other programming languages, simpler, and the effect of the implementation code relatively cool, the most important thing is what he said above, embedded, well, began to write a summary.

First, to achieve a small web demo:

Prior to achieve results, first understand some basic knowledge of the following points:

Note: The above <hr> it is a single label, that is to say do not write </ hr>, <br> it is also a single label; above six titles and office inside word title is a mean rating

<! DOCTYPE HTML > 
< HTML > 
    < head > 
        < Meta charset = "UTF-. 8"  /> 
        < title > hahaha </ title > 
    </ head > 
    < body > 
        < h1 of > I like The MCU! </ H1 of > / / title level. 1 
        < I > 2019.8.5 </ I >    // put the text italic inflicted
         < HR >    // out of a horizontal
         < P >// paragraph return
            at The Beef like you do? 
        </ the p- > 
        < the p- > 
            yes, </ br > < b > i like IT </ b > // <br> newline tag, <b> represents a bold 
        </ the p- > 
    < / body > 
</ HTML >

Demonstration effect:

Second, the connection effect dynamic display news list:

Still the same, to understand some of the basics;

Here I am in the following to illustrate a news page:

And demonstrates the effect of the code as follows:

<!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>

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

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

 

Guess you like

Origin www.cnblogs.com/1121518wo/p/11306552.html