首页 > 代码库 > HTML学习笔记1—HTML基础

HTML学习笔记1—HTML基础

2024-07-22 18:28:15   219人阅读

    一、HTML的基本结构

      <html> 根控制标记

      <head> 头控制标记

      <title>标题</title> 标题标记

      </head> 头控制标记（尾）

      <body> 网页显示区域

      </body> 网页显示区域（尾）

      </html> 根控制标记（尾）


      双标签：开头和结尾成对出现，如<html> </html>

      单标签：斜杠在标签元素的后面 和元素之间有一个空格，如<hr /><br /><meta /> 

      行内元素，行内标签：标签在同一行显示 不会换行

      块级标签：每个标签单独成一行显示

    二、HTML的控制标记的格式

      (1).<标记名称>单一型,无设置值的。如：<br />

      (2).<标记名称 属性="属性值">单一型，有设置值的。如：<hr width="80%">

      (3).<标记名称>…</标记名称>对称型，无设置值。如：<title>…</title>

      (4).<标记名称 属性="属性值">…</标记名称>对称型，有设置值。

        如：<body bgcolor="red">…</body>

            <palign= "center">…</p>

    三、最常用的控制标记

      1.标题文字设置

        格式：<h1>…</h1>  一级标题 只能出现一次（其他可以出现多次）

              <h2>…</h2>  二级标题

              <h3>…</h3>  三级标题

              <h4>…</h4>  四级标题

              <h5>…</h5>  五级标题

              <h6>…</h6>  六级标题

         一共是6个标题级别，一级标题最大，6级标题最小。默认加粗显示

            属性名称      属性值        说明

            align         left         靠左对齐

                          center       居中对齐

                          right        靠右对齐

                          justify      两端对齐

        如：设置二级标题为靠右对齐：<h2 align="right">2级标题</h2>

      2.段落<p>

        格式：<p align="排列方式">段落内容</p>

            属性名称     属性值         说明

            align        left         文本左对齐（默认）

                         center       文本居中对齐

                         right        文本右对齐

                         justify      文本两端对齐

        如：设置段落为居中对齐：<p align="center">段落居中对齐</p>

      3.换行<br>   格式：<br />   无属性设置   功能：强制换行

      4.水平直线<hr>

        格式：<hr />

            属性名称     属性值         说明

            size         像素         规定 hr 元素的高度（厚度）属性值越大，线越粗

            width        像素         绝对设置，长度不会随着窗口的改变而改变

                         百分比       相对设置，长度会随着窗口宽度而改变

            noshade      noshade      规定 hr 元素的颜色呈现为实体线

            align        left         hr 元素左对齐（默认）

                         center       hr 元素文本居中对齐

                         right        hr 元素文本右对齐

            color                     设置水平直线的颜色

        如：设置水平直线的宽度为窗口的60%，对齐为左对齐，高度为10，实体线，绿色

            <hr width="60%" align="left" size="10" noshade="noshade" color="#009933" />

      5.格式：背景色与文字设置

                <body bgcolor="背景色" text="文字颜色">

              整体页面的边距

                <body leftmargin="左边距" rightmargin="右边距" 

                      topmargin="上边距" bottommargin="底边距">

      6.文本的显示格式 

        格式：<font size="字体大小" face="字体类型" color="字体颜色"></font>

            属性名称     属性值         说明

            size         1~7          绝对设置，把字号设置为X

                         +1~+6        相对设置，把原字号通过+X设置为新字体

                         -1~-6        相对设置，把原字号通过-X设置为新字体

            color                     设置文本的颜色

            face                      设置文本的字体

        文字默认是3号字，文字大小中1号最小，7号最大

      7.特殊字符设置

        特殊字符  &nbsp; （空格）写完特殊字符后要添加 分号;表示结束

        格式：<: &lt;

              >: &gt;

              &: &amp;

              ": & quot;

              空格: &nbsp;

              版权图标 : &copy;

      8.HTML 备注(注释)   格式：<!--注释内容-->

      9.实体字符控制标记

        <b>…</b> 粗体

        <i>…</i> 斜体

        <s>…</s> 删除线

        <u>…</u> 下划线

        <sub>…</sub> 下标

        <sup>…</sup> 上标

     10.语意字符控制

        <address>…</address> 地址

        <del>…</del> 删除（删除线）

        <ins>...</ins> 修改(下划线)

        <strong>…</strong> 加强语气(加粗)

        <em>...</em> 加强语气(倾斜)

     11.格式化    

        格式：<pre>…</pre>  

         让书写的文字格式化！格式化标签 保留在html设置的格式 识别手动的空格和换行 很少使用

     12.<blockquote>缩排标签</blockquote>可以嵌套，缩排多次

本文出自 “Raffaele” 博客，请务必保留此出处http://raffaele.blog.51cto.com/6508076/1553022

HTML学习笔记1—HTML基础


联系
我们