首页 > 代码库 > html基础1

html基础1

2024-09-13 16:57:51   216人阅读

html文件基础结构

<html>
    <head>...</head>
    <body>...</body>
</html>

1. <html></html>称为根标签，所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下会有详细介绍。

3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在网页上要展示的页面内容放在放在body标签里。

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中，每个网页都应该有一个独一无二的title。

html标签

html标签注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。

标签的用途（语义化）：在什么情况下使用此标签合理

  1. <p>标签  <p>段落文本</p>   默认段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。
  2. <hx>标签  <hx>标题文本</hx> (x为1-6)   标题标签可使用于文章的标题和栏目的标题。

  3. <em>、<strong>标签  <em>需要强调的文本</em>  <strong>需要强调的文本</strong>  强调一段话中的关键字时使用。在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。目前国内前端程序员更喜欢使用<strong>表示强调。

  4. <span>标签  <span>文本</span>  <span>标签无具体语义，为文字设置单独样式

    <style>
span{
    color:blue;
}
</style>
<span>文本</span>

  5. <q>标签  <q>引用文本</q>     短文本引用，浏览器对q标签自动添加双引号。

  6. <blockquote>标签   <blockquote>引用文本</blockquote>  长文本引用   浏览器对<blockquote>标签的解析是缩进样式。   

       技术分享

       7.  <br/>标签  分行显示文本  <br/>标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。

       8.  &nbsp  在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入&nbsp;。

       9.  <hr/>标签  添加水平横线  线条式样可通过CSS修改

      10. <address>标签  <address>联系地址信息<address/>  为网页加入地址信息,,也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。默认显示斜体，可通过CSS修改。

      11.  <code>标签  <code>代码语言</code>  在网页中显示编程代码，当代码为一行代码时，可以使用<code>标签了，如下面例子：<code>vari=i+300;</code>。多行代码使用<pre>标签

      12.  <pre>标签  <pre>语言代码段</pre>   <pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

      13.  ul-li标签   表示没有前后顺序的信息列表（新闻、图片等）  在网页中的默认显示每项li前都自带一个圆点。

 <ul>                                 
  <li>信息</li> <li>信息</li> 
   ......
</ul>

 技术分享

       14. ol-li标签     展示有前后顺序的信息列表   <ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，如下图所示：

技术分享

     

 

html基础1


联系
我们