Html5 和Css 语法简单使用

HTML5:

有序排列:

<ol><li>沿着条路走到头</li><li>右转</li><li>直行穿过第一个十字路口</li><li>在第三个十字路口处左转</li><li>继续走 300 米,学校就在你的右手边</li></ol>

无序排列:

<ul><li>豆浆</li><li>油条</li><li>豆汁</li><li>焦圈</li></ul>

斜体表示:粗体表示表示:<em>......</em>
<strong>....</strong>

<p>此液体是<strong>剧毒</ strong>-如果您饮用它,<strong>您可能会<em>死</ em> </ strong>。</ p>

链接的解析:

<a href="https://www.mozilla.org/zh-CN/"><img src="mozilla-image.png" alt="链接至Mozilla主页的Mozilla标志"></a>//创造图片连结<p>我创建了一个指向<a href="https://www.mozilla.org/zh-CN/"title="了解Mozilla使命以及如何参与贡献的最佳站点。">Mozilla主页</a>的超链接。</p>//创造文字连结

一件有趣的事,可以直接画面跳转到那段文字但你必须用id来包住

文档片段

超链接除了可以链接到文档外,也可以链接到HTML文档的特定部分(被称为文档片段)。要做到这一点,你必须首先给要链接到的元素分配一个id属性。例如,如果你想链接到一个特定的标题,可以这样做:

<h2 id="Mailing_address">邮寄地址</h2>

然后链接到那个特定的id,您可以在URL的结尾使用一个井号指向它,例如:

<p>要提供意见和建议,请将信件邮寄至 <a href="contacts.html#Mailing_address">我们的地址</a>。</p>

你甚至可以在同一份文档下,通过链接文档片段,来链接到同一份文档的另一部分:

<p>本页面底部可以找到 <a href="#Mailing_address">公司邮寄地址</a>。</p>

电子邮件链接

当点击一个链接或按钮时,打开一个新的电子邮件发送信息而不是连接到一个资源或页面,这种情况是可能做到的。这样做是使用<a>元素和mailto:URL的方案。
其最基本和最常用的使用形式为一个mailto:link (链接),链接简单说明收件人的电子邮件地址。例如:

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

这会创建一个链接,看起来像这样:向nowhere发邮件。

完整网页中主要元素:

  • <header>:页眉。
  • <nav>:导航栏。
  • <main>:主内容。主内容中还可以有各种子内容区段,可用<article><section><div>等元素表示。
  • <aside>:侧边栏,经常嵌套在<main>中。
  • <footer>:页脚。

其中更细节分布:

  • <main>存放每个页面独有的内容。每个页面上只能用一次<main>,且直接位于<body>中。最好不要把它嵌套进其它元素。
  • <article> 包围的内容即一篇文章,与页面其它部分无关(比如一篇博文)。
  • <section><article>类似,但<section>更适用于组织页面使其按功能(比如迷你地图、一组文章标题和摘要)分块。一般的最佳用法是:以标题作为开头;也可以把一篇<article>分成若干部分并分别置于不同的<section>中,也可以把一个区段<section>分成若干部分并分别置于不同的<article>中,取决于上下文。
  • <aside> 包含一些间接信息(术语条目、作者简介、相关链接,等等)。
  • <header>是简介形式的内容。如果它是<body>的子元素,那么就是网站的全局页眉。如果它是<article><section>的子元素,那么它是这些部分特有的页眉(此<header>非彼标题)。
  • <nav>包含页面主导航功能。其中不应包含二级链接等内容。
  • <footer> 包含了页面的页脚部分。

<br>可在段落中进行换行;<br>是唯一能够生成多个短行结构(例如邮寄地址或诗歌)的元素。比如:

<p>从前有个人叫小高<br>
他说写 HTML 感觉最好<br>
但他写的代码结构语义一团糟<br>
他写的标签谁也懂不了。</p>

没有<br>元素,这段会直接显示在长长的一行中;使用<br>元素,才使得诗看上去像诗:

<hr>元素在文档中生成一条水平分割线,表示文本中主题的变化(例如话题或场景的改变)。一般就是一条水平的直线。例如:

<p>原来这唐僧是个慈悯的圣僧。他见行者哀告,却也回心转意道:“既如此说,且饶你这一次。再休无礼。如若仍前作恶,这咒语颠倒就念二十遍!”行者道:“三十遍也由你,只是我不打人了。”却才伏侍唐僧上马,又将摘来桃子奉上。唐僧在马上也吃了几个,权且充饥。</p><hr><p>却说那妖精,脱命升空。原来行者那一棒不曾打杀妖精,妖精出神去了。他在那云端里,咬牙切齿,暗恨行者道:“几年只闻得讲他手段,今日果然话不虚传。那唐僧已此不认得我,将要吃饭。若低头闻一闻儿,我就一把捞住,却不是我的人了。不期被他走来,弄破我这勾当,又几乎被他打了一棒。若饶了这个和尚,诚然是劳而无功也。我还下去戏他一戏。”</p>

将渲染成:

CSS:

暗示:

1.text-align: right;// 指出该元素会让文字往右边对齐@media(max-width:768px){…… } //用意是指在大解析度(大萤幕)如果有写好css,max-width:是指小于这个宽度启用里面的class,反之@media(min-width:768px){ } //用意是指是从小解析度写完在用大宽度去覆盖设定好窄的css设计
© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发

请登录后发表评论