HTML小白初步学习教程3
沉沙 2018-10-25 来源 : 阅读 1172 评论 0

摘要:本篇教程探讨了HTML小白初步学习教程3,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。

本篇教程探讨了HTML小白初步学习教程3,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。

<

先看效果图,需要什么效果就再去研究代码比较好:

有一点,align color size等等的比较常用的属性可以在很多标记中使用

图一:

image
复制代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="jinggege">
  <meta name="Keywords" content="words,html">
  <title>文本内容1</title>
 </head>
 <body text="purple">
 <!--标题党设置-->
 <h1>最大的标题</h1>
 <h2 align="center">依次减小,从一至六</h2>
 <h6 align="right">最小的一级字,不知道看不看得清</h6>
 <center>
 <!--文字格式档-->
 <font face="华文彩云">华文彩云的字体</font>&nbsp&nbsp&nbsp&nbsp
 <!--face可以跟多种字体,face=“体1,体2,...”哪个先有用哪个,没有就用下一个-->
 <font face="五彩缤纷,隶书">五彩缤纷,隶书是哪一个呢</font></br></br>
 <font face="黑体" size="1">一号大小的黑体字,好小呐</font>&nbsp&nbsp&nbsp&nbsp
 <font size="5">5号字的效果=</font> 
 <font size="+2">默认字号+2</font></br></br>
 <font color="#0066FF">在font中,颜色可以随意改变,不用通篇一种颜色了</font></br></br>
 <font color="#348473">
 <strong>注意,注意!</strong><b>加粗字体出没</b>
 <em>妈呀,</em><I>吓歪了</I><cite>斜体出现</cite>
 &nbsp&nbsp&nbsp&nbsp
 <b><u>加粗的下划线</u><b>
 &nbsp;&nbsp;&nbsp;&nbsp;
 <u>用"   "空格没有用,得用"&nbsp;&nbsp;&nbsp"</u>
 </font></br></br>
 <font size="5" color="#0CF0E0">2<sup>3</sup>=8</br>x<sub>n</sub>+y<sub>m</sub>=?</font></br></br>
 <font size="4" color="#E35E7C"><s>删除线</s><strike>有两种标记</strike></br></br>
 <code><font size="3" color="#126523"> 页面等宽</br>What does it mean?</font></code></br><!--用samp标记也一样-->
 <font size="3" color="#126523">What dose it mean?</br>Do you find the differences?</font></br></br>
 <font color="#F300000">特殊符号,均由“&+”构成:&nbsp;&nbsp; &quot, &lt, &gt, &copy, &reg, ...</font>
 </body>
</html>

复制代码

 

图二:

image
复制代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="jinggege">
  <title>段落</title>
  <!--align color size 可四处安家-->
 </head>
 <body>
  <h1 align="left">html示例程序之。。。</h1>
  <hr width="30%" align="left">
  <font size="3" color="#235462">
  <p><strong>段落标记—————p</strong><!--段落标记p-->
  <p>靡不有初,鲜克有终</p> 
  <p>基本上一个段落=两个换行符</br><br/></font>
  <hr color="#45432F" width="120%">
  <font color="#454323" >
  <nobr>如果字句太长长长长长长长长长长长长长长长长太长长长长长长长长长长长长长长长长长长长长长长长长长长长长太长长长长长长长长长长长长长长长长,你又不想换行。。。,用nobr的标记</nobr></front>
  <hr noshade="noshade" size="3"><!--去除阴影-->
  <!--如果想保持格式-->
  <pre>
  <p align="center">如果你希望html能<b>随心所欲</b>显示个图形,像这样:
         888
        88888
       8888888
  pre会是个好标记的~~~~~~~~~
  </pre>
  <b>缩进示例</b>
  <font size="3" color="#094fFF">
  <blockquote>生死契阔</blockquote>
  <blockquote><blockquote>与子成说</blockquote></blockquote>
  <blockquote><blockquote><blockquote>执子之手</blockquote></blockquote></blockquote>
  <blockquote><blockquote><blockquote><blockquote>与子偕老</blockquote></blockquote></blockquote></blockquote>
 </body>
</html>

复制代码

 

图三:

image
复制代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>其他文字标记</title>
 </head>
 <body>
  <!--添加文字标注-->
  <h2>添加文字标注</h2>
  <ruby>
   <font size="3" face="黑体" color="#343254">
   有很多时候,过不去的,是活着的人用对过往的缅怀来逃避没有未来的认知(有了注释以后,不会换行)
   </font>
   <rt>
    <font size="1" face="楷体" color="#EE4454">
 殢无伤所说
 </font>
   </rt>
  </ruby>
  </br></br>有很多时候,过不去的,是活着的人用对过往的缅怀来逃避没有未来的认知,第一年,会想着若他还在,这岁月将是怎样的不同;第二年习惯了他的不在,但难免伤怀少了他的滋味;第三年,对风花雪月的怀想,已不存在他的位置,他不在,已成定论。</br>
  声明变量标记
  <font face="黑体" size="3">
  <p><h2>声明标记变量</h2>
  <p><var>x</var>&nbsp:=&nbsp<var>m</var>&nbsp+&nbsp<var>n</var>
  </font>
  <font face="楷体" size="5">
  <p><h2>忽视html标记</h2>
  <plaintext>
  用plaintext || xmp来忽略标记:
  <p><var>x</var>&nbsp:=&nbsp<var>m</var>&nbsp+&nbsp<var>n</var>
  </font>
 </body>
</html>
   

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程