前端学习基础篇一

常用标签介绍

标题标签:<h1>~<h6>
盒子:<div> ,<span>
点击标签: <a>
段落标签:<p>
列表标签:ul>li [无序] ol>li [有序] dl>dt>dd [自定义列表]
单标签: <br />换行    <img /> 图片标签   <hr /> 一条线  <base />
其他常用标签: <b>   <strong> 加粗     <i>   <em> 倾斜    <u>   <ins> 加下划线    <s> <del> 加删除线
后者带有语义,前者只是进行了相关操作,推荐使用后者标签。
特使字符标签:
版权信息:   &copy;  ©   
人民币:  &yen;   ¥   
&:  &amp;   &  
注册商标:   &reg;  ®  
摄氏度:  &deg;   °  
正负号 :  &plusmn;   ±  
乘号:   &time;  ×  
除号:   &divide;  ÷  
平方2:   &sup2;  ²  
立方3:   &sup3;  ³
空格号:   &nbsp;

练习一:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--列表和自定义列表的使用-->
<h1>中国四大名著</h1>
<ol>
    <li>
        <h3><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559366614209&di=bbdcdf84cb95f9f4a9cf6cffc358ef00&imgtype=0&src=http%3A%2F%2Fimg1.gomein.net.cn%2Fimage%2Fprodimg%2Fbook_image%2Fimg%2F201207%2F39%2F1000240914%2F1000240914_800.jpg" alt="不好意思出错了" title="三国演义"width="150">三国演义</h3>
        <p>
        <!--  简介-->
           &nbsp;&nbsp;&nbsp; 《三国演义》(也称作《三国志通俗演义》)描写的是从东汉末年到西晋初年之间近一百年的历史风云。全书反映了三国时代的政治军事斗争,反映了三国时代各类社会矛盾的渗透与转化,概括了这一时代的历史巨变,塑造了一批咤叱风云的英雄人物。《三国演义》故事开始于刘备、关羽、张飞桃园三结义,结束于司马氏灭吴开晋,描写了东汉末年和三国时代魏、蜀、吴三国鼎立的局面及晋朝开国历史。文字浅显、人物形象刻画深刻、情节曲折、结构宏大。《三国演义》刻画了近200个人物形象,其中诸葛亮、曹操、关羽、刘备等人性格尤为突出。《三国演义》是中国第一部长篇章回体小说。
        </p>
    </li>
    <li>
        <h3><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559366495312&di=236f50f7ef9ee313c828193a6c57eb71&imgtype=0&src=http%3A%2F%2Fimg4.gomein.net.cn%2Fimage%2Fprodimg%2Fbook_image%2Fimg%2F201207%2F25%2F1000241541%2F1000241541_800.jpg" alt="不好意思出错了" title="西游记" width="150">西游记</h3>
        <p>
            &nbsp;&nbsp;&nbsp; 《西游记》是中国古代一部浪漫主义长篇神魔小说,主要描写了唐僧、孙悟空、猪八戒猪悟能、沙僧沙悟净师徒四人去西天取经,历经九九八十一难最后终于取得真经的故事。《西游记》内容分为三大部分:第一部分(一到七回)介绍孙悟空的神通广大,大闹天宫;第二部分(八到十二回)叙三藏取经的缘由;第三部分(十三到一百回)是全书故事的主体,写悟空等降伏妖魔,最终到达西天取回真经。《西游记》书中孙悟空这个形象,以其鲜明的个性特征,在中国文学史上立起了一座不朽的艺术丰碑。
        </p>
    </li>
    <li>
        <h3><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559366495314&di=dcb56a22f687b7281a2113755dfaeadc&imgtype=0&src=http%3A%2F%2Fimg11.360buyimg.com%2FpopWaterMark%2Fg14%2FM07%2F16%2F00%2FrBEhV1JfrXUIAAAAAAOXhlFcBTgAAETXQMDNE4AA5ee890.jpg" alt="不好意思出错了" title="红楼梦"width="100">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;红楼梦</h3>
        <p>
            &nbsp;&nbsp;&nbsp;《红楼梦》是章回体长篇小说,中国古代四大名著之首,原名《脂砚斋重评石头记》,又名《情僧录》、《风月宝鉴》、《金陵十二钗》、《还泪记》、《金玉缘》等。《红楼梦》是一部含笑的悲剧,描写了一个封建贵族家庭由荣华走向衰败的三代生活,而且还大胆地控诉了封建贵族阶级的无耻和堕落,指出他们的种种虚伪、欺诈、贪婪、腐朽和罪恶。红楼梦塑造的主要人物形象:《红楼梦》中的100多个人物形象各具姿态,大都有自己鲜明的个性特征,尤其是主要人物形象如贾宝玉、林黛玉、薛宝钗、贾母、王熙凤、史湘云、贾探春等,给我们留下了深刻的印象。
        </p>

    </li>
    <li>
        <h3><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559366495312&di=b6078f3cc940466527cd31ef23900a56&imgtype=0&src=http%3A%2F%2Fimg3.jarhu.com%2Fgoodimages%2F201207%2F27%2Fdi1343354269738.jpg" alt="不好意思出错了" title="水浒传" width="150">水浒传</h3>
        <p>
            &nbsp;&nbsp;&nbsp; 《水浒传》描写北宋末年以宋江为首的一百零八位好汉在梁山起义,以及聚义之后接受招安、四处征战的故事,塑造了宋江、吴用、李逵、武松、林冲、鲁智深等梁山英雄,形象地描绘了农民起义从发生、发展直至失败的全过程,深刻揭示了起义的社会根源,满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想,也具体揭示了起义失败的内在历史原因。《水浒传》是中国历史上最早用白话文写成的章回小说之一。
        </p>
    </li>
</ol>
<hr />
<h2>自定义列表</h2>

<dl>
    <dt>江西省
    <dd>上饶市</dd>
    <dd>南昌市</dd>
    <dd>赣州市</dd>
    <dd>九江市</dd>
    </dt>
    <dt>浙江省
    <dd>温州市</dd>
    <dd>台州市</dd>
    <dd>杭州市</dd>
    <dd>宁波市</dd>
    </dt>
    <dt>山东省
    <dd>青岛市</dd>
    <dd>济南市</dd>
    <dd>济宁市</dd>
    </dt>
    <dt>江苏省
    <dd>南京市</dd>
    <dd>南通市</dd>
    <dd>无锡市</dd>
    <dd>苏州市</dd>
    </dt>
    <dt>广东省
    <dd>珠江三角洲</dd>
    <dd>深圳市</dd>
    <dd>广州市</dd>
    <dd>澳门行政区</dd>
    <dd>汕头市</dd>
    </dt>
</dl>

<p><span>版权信息:&copy;&nbsp;上海资产评估有限集团</span> &nbsp;&nbsp;&nbsp;&nbsp;<span>注册商标:&reg;</span>北京市工商管理局</p>
</body>
</html>

练习二:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <base href="#" target="_blank"/>
    <title>webTest_01</title>
</head>
<body>
<!--标签的练习-->
<p><span><i>姓名</i>:<span>少年</span></span>&nbsp;&nbsp;&nbsp;<span><em>学号</em>:<span>57515241574854</span></span>&nbsp;&nbsp;&nbsp;<span><s>专业:</s> <span>电子通信工程</span></span>&nbsp;&nbsp;&nbsp;<span><del>学院: </del> <span>自动化学院</span></span></p>

<h2><strong><ins>目录</ins></strong></h2>
<h3><a href="#task_1" target="_self">作业一</a></h3>
<h3 ><a href="#task_2" target="_self">作业二</a></h3>

<h3 id="task_1"><b><u>作业一</u></b></h3>
<img src="../img/img.jpg" alt="图片莫名其妙的丢失了" title="作业题目图片" width="400"/>

<p>&nbsp;&nbsp; bar chart shows the value of china’s online tourism market and the growth rate
    compared to previous year from the year 2008 to the year 2017.<br />It can be seen abviously
    that the value of china’s online tourism market was rising all the time during the past decade.<br />
    However the speed of growing almost was dropping in the last ten years.
</p>
<p>
    &nbsp;&nbsp; we can see,there was maximum rate of growth in 2010 which reached up to 53.7 percent
    comparing to the rate 27.0 percent last year. <br />
    It was only year which achieved the increasement of the growth rate during the past ten years. <br />
    After the year 2010,with the rapid development of china’s online tourism,the value of china’s online tourism market was growing steadily,but the rate of increase was declining smoothly.
</p>
<p>
    &nbsp;&nbsp;In short ,in my opinion,the china’s online tourism will be rise in the future ,even though the
    Growth rate may be below we expected.
</p>
<hr />

<h3 id="task_2"><strong><ins>作业二</ins></strong></h3>
<p>
   &nbsp;&nbsp; we enter the information age, users will receive a large number of push messages every day, but how to enable users to obtain effective information, as well as avoid being disturbed by junk information, is an urgent problem to be solved.
    <br />
    Our research focuses on designing a good hadoop based h-icsr algorithm cloud computing recommendation system to solve this problem.
    <br />
    This research will be used to improve user satisfaction, and users will receive the information they want.Avoid the enterprise pushed useless information, achieve a win-win situation for both enterprises and users.
</p>
<p>
    &nbsp;&nbsp;This research aims to improve the enterprise e-commerce recommendation system, so that users can obtain useful information and avoid the interference of junk information.
    <br />
    It is generally divided into three steps.
    First, we use the android client to send the request;
    second, the web server accepts the request; <br />
    finally, the Hadoop cluster runs the h-icsr algorithm offline and pushes a user.
    This research system will provide users with personalized and effective information, reduce the invalid push behavior of enterprises, and thus reduce the waste of enterprise resources.
</p>
<!--一新窗口打开-->
---------------------->详情关注博客: <a href="http://www.baidu.com">百度详情</a>
---------------------->登录走一波: <a href="../login.html" >登录</a>
<!--常用的特殊字符-->
<h2>特殊字符</h2>
P标签信息:&nbsp;&nbsp; &lt;p &gt;&nbsp;&nbsp;
版权信息:&nbsp;&nbsp; &copy;&nbsp;&nbsp;
人民币:&nbsp;&nbsp; &yen;&nbsp;&nbsp;
&和好:&nbsp;&nbsp;&amp;&nbsp;&nbsp;
注册商标:&nbsp;&nbsp; &reg;&nbsp;&nbsp;
摄氏度:&nbsp;&nbsp; &deg;&nbsp;&nbsp;
正负号 :&nbsp;&nbsp; &plusmn;&nbsp;&nbsp;
乘号: &nbsp;&nbsp;&times;&nbsp;&nbsp;
除号: &nbsp;&nbsp;&divide;&nbsp;&nbsp;
平方2: &nbsp;&nbsp;&sup2;&nbsp;&nbsp;
立方3: &nbsp;&nbsp;&sup3;
空格号: &nbsp;
<!--图片地址绝对路径和相对路径-->
<img src="https://static.firefoxchina.cn/img/201905/8_5cf083434cec70.jpg" alt="意外丢失了"  />
<img src="../img/firefoxdownload.jpg" alt="意外丢失了" />
<!--无序列表-->
<ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>栗子</li>
    <li>水蜜桃</li>
    <li>
        <h4>干货</h4>
        <p>核桃,杏仁...</p>
    </li>
</ul>
<!--有序列表-->
<ol>
    <li>世界第一等</li>
    <li>想你的夜</li>
    <li>放飞理想</li>
    <li>自由飞翔</li>
</ol>
</body>
</html>

快捷键: ! + Tab html:5 + Tab 快速生成html5结构。
ul>li×5 h3>p×4 ul>li×5>p×2>span×3 …

猜你喜欢

转载自blog.csdn.net/weixin_43629719/article/details/90731283