HTML基础

基础语法

 

  HTML即超文本标记语言,由<>扩起来的就是一个标记。HTML不需要编译,它是一个文本文件,后缀使用html或者htm,编写时大小写不敏感。只要是能编辑文本文件的都可以进行HTML的开发,我们经常使用到的工具有Dreamweaver,SublimeText和WebStorm等。

       HTML的基本结构由三个标记组成,html标签内的所有内容就是HTML文件。head标签内存放头部信息,例如标题标签。body标签是网页的主体,我们在网页里可以看到的部分都写在了body的标签内。一般情况下标签是成对出现的,结束标签就是在标签前加个斜杠</>,但也有一些标签是单独出现,比如水平线的标签<hr>。HTML元素的定义是由开始标签加上内容和结束标签所组成。HTML标签属性的语法:<标签名 属性名1=”属性值” 属性名2=”属性值” …> …… </标签名> 。注释是为了方便理解代码的功能,不会显示在网页里,注释的添加方法是<!-- …… --> ,这就是一个注释。

      

文档段落

 

       <!DOCTYPE>声明必须放在HTML文档的第一行,它不是HTML标签,仅用于声明文档类型。当网页显示出现乱码时,可以在head标签只间添加<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8” />,这段话是为了告诉网页的内容是使用了什么语言和编码模式,国内常用的编码有utf-8、GB2312、gbk等。

       文字和段落标签有以下几种:

       标题标签:<h1></h1>~<h6></h6>      *h1最大,h6最小

       段落标签:<p></p>         *<p align>

align对齐属性值:left左对齐内容 / right右对齐内容 / center:居中对齐内容 / justify:对行进行伸展,这样每行都可以由相等的长度。

       换行标签:<br/>        *强行换行

br标签和p标签之间的区别:p段落与段落之间有空隙,br则无。直接打空格在HTML里不起作用,需要输入空格代码&nbsp; 。pre 标签可定义预格式化的文本,<pre></pre>中的内容保留空格和换行符。

      

文字和段落标签有有以下几种:

       文字斜体:<i></i>、<em><em>   *内容需要写在相应的标签内

       加粗:<b></b>、<strong></strong>

       下标:<sub>       *<sub>

       上标:<sup>       *<sup>

      

一些特殊符号:

       &lt; < 小于号或显示标记 / &gt; > 大于号或显示标记 / &reg;  ® 已注册 /

       &copy;  © 版权 / &trade;  ™ 商标 / &nbsp;  *Space 不断行的空白

 

列表标签

 

列表标签:

       无序列表:<ul>

             <li>列表项</li>

             <li>列表项</li>

             …… *可以存放多个li标签

        </ul>

Type属性值:disc 圆点 / square 正方形 / circle 空心圆  *改变无序列表前的符号类型,加在ul标签中。

   

    有序列表<ol>

             <li>列表项</li>

            <li>列表项</li>

             …… *可以存放多个li标签

       <ol>

Type属性值:1 数字1,2……   /  a 小写字母a,b……  /  A 大写字母A,B……  /  i  小写罗马数字i  /

                     I 大写罗马数字I    *加在ol标签中

 

列表标签: <dl>

                  <dt>定义列表项</dt>    *定义标签内可以有多个<dt>

                  <dd>列表项描述</dd>    *自动缩进

     <dd>列表项描述</dd>

     <dt>定义列表项</dt>

     <dd>列表项描述</dd>

      ……

               </dl>

 

图像和链接

 

图片标签:

语法:<img src=”” alt”” …/>      *alt图片注释

Img属性: Src                  URL               显示图像的URL

                 Alt                    文字               图像代替文本

                 Height        数值和百分比      图像的高

      Width          数值和百分比      图像的宽

 

HTML路径:

  相对路径:图片与网页在同一目录下             <img src=”1.jpg”/>

  绝对路径:图片在上一级目录中                    <img src=”../1.jpg”/>

       图片在下一级目录中                    <img src=”文件夹名/1.jpg”/>

 

超链接:

       语法:<a href=””>内容</a>

       属性:href           链接地址

                 target        连接的目标窗口_self、_blank*创建新窗口、_top、_parent

                 title            链接提示文字

                 name         连接命名       *锚链接

       href:链接地址,可以是内部链接或外部链接。

       空链接:<a href=”#”>内容</a>

 

锚链接(name):

  1. 定义锚的位置和锚名。
  2. 设置寻找锚的链接。

定义锚(同页面):

       <a href=”#锚名1”>目录1</a>

  <a href=”#锚名2”>目录2</a>

  <a href=”…” name=” 锚名1”>内容</a>

         XXXXXXX

    XXXXXXXXXXXXXXX

  <a href=”…” name=” 锚名2”>内容</a>

         XXXXXXX

    XXXXXXXXXXXXXXX

      

定义锚(不同页面):

       网页1:<a href=”网页名称#锚名”>……</a>  *href需要不是#开头

       网页2:<a name=”锚名”>……</a>

      

电子邮件链接:<a href=”mailto:邮件地址”>……</a>

文件下载:<a href=”下载文件的地址”>……</a>    *同目录可以直接写文件名

HTML基础

上一篇:PHP8新特性之match表达式


下一篇:.Net 依赖注入以及AOP切面