HTML的学习之路（一）

来源：互联网发布：python 接口编辑：程序博客网时间：2024/05/01 18:43

一、HTML初识元素/标签及其语法
这里写图片描述
开始标签里的属性代表标签内容的一些特性，如颜色、大小、链接等。<br>标签比较特殊，它是单独存在的，表示换行。

这里写图片描述
一个html文档的结构如上图所示，具体代码如下：

<!--文档版本声明--><!DOCTYPE html><!--html标签--><html>    <!--head标签-->    <head>        <meta charset="utf-8"><!--编码方式-->        <title>html document</title><!--标题-->    </head>    <!--body标签-->    <body>        aaaa    </body></html>

在浏览器中打开文档，效果如下，其中浏览器标签内容没有截图出来，但其中显示的正是head标签里的title标签的内容html document，这样我们的第一个网页就完成了。
这里写图片描述
需要注意的是，其中head标签里的meta标签的开始标签里接了一个charset，这就是标签属性。

二、HTML语义化标签

标题化标签

标题化标签从h1到h6共有六级，类似于word文档的多级标题，不同级别的标题标签样式不同，如大小和粗细，需要注意的是标题标签和之前学到的title标签是不一样的，title标签内容是显示在浏览器的标签上的，表示整个html文档的标题，而<h1>到<h6>等标签是显示在页面上的，类似于Word的多级标题，下面放上实例代码。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Html 标题标签</title>    </head>    <body>        <h1>这是标题1</h1>        <h2>这是标题2</h2>        <h3>这是标题3</h3>        <h4>这是标题4</h4>        <h5>这是标题5</h5>        <h6>这是标题6</h6>    </body></html>

文档在浏览器中打开的效果如下：
这里写图片描述

段落标签

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>HTML 段落标签</title>        <!--定义p标签的样式让其在没有内容的时候不进行占位-->        <style>            p{                margin: 0;                padding: 0;            }        </style>    </head>    <body>        <p>段落内容1</p>        <p></p><!--在默认的浏览器样式中空标签也占地方，可以自己定制p标签的样式，比如在head中在style标签中定义p标签的样式让其不占位-->        <p>段落内容2</p>    </body></html>

在浏览器中效果如下：
这里写图片描述

字体标签

下面是代码实例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>font标签</title>    </head>    <body>        <!--文字大小-->        <font size="1">HTML</font>        <!--字体风格-->        <font size="1" face="Helvetica">HTML</font>        <!--字体颜色-->        <font color="red">多姿多彩html</font>        <font color="#d8d8d8">多姿多彩html</font>        <font color="rgb(168,178,188)">多姿多彩html</font>    </body></html>

下面是浏览器打开效果：
这里写图片描述
但是我们在日常开发中实际上并用不到这个font标签，因为各种风格样式我们都是通过css来完成的，因此这里简单的了解一下即可。

链接标签

下面是代码实例

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>HTML 链接标签</title>        <!--改变链接标签的样式：        1、链接文本内容颜色和点击过的链接文本内容颜色        2、取消链接文本下划线        3、取消鼠标移动到链接文本的光标效果        -->        <style>            .content{                height: 800px;            }            a{                color: 333333;                text-decoration: none;                cursor: none;            }            a:visited{                color: #333333;            }        </style>    </head>    <body>        <!--注意href属性一定要是完整的网址，http或者https是一定要加上的-->        <a href="https://www.google.com.hk/" target="_blank">点击后在新页面打开链接</a>        <br>        <a href="https://www.google.com.hk/" target="_self">点击后在本页面打开链接</a>        <br>        <a href="#titleThird">页面内锚点</a>        <br>        <a href="javasript:void(0);">能跳走算我输</a>        <br>        <!--在head中改变了样式占用了空间，以便显示点击页面内锚点后的跳转效果-->        <div class="content">一堆内容</div>        <br>        <!--id是所有标签的通用属性-->        <h3 id="titleThird">第三章</h3>    </body></html>

在浏览器中打开的效果如下
这里写图片描述

图像标签
图像标签<img />是单独的一个标签，不需要结束标签，在HTML中放置图像有两种方法，一种是通过图像标签，另一种则是通过设置style的background，具体如下代码所示

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>HTML 图像</title>        <!--"."是用来匹配文档中对应类名的-->        <style>            .logo            {                background: url(http://avatar.csdn.net/7/9/9/1_xwx617.jpg);                width: 400px;                height: 200px;            }        </style>    </head>    <body>        <!--图片标签，不加大小属性的话默认为原图片大小-->        <img  width="100px" height="50px" src="http://avatar.csdn.net/7/9/9/1_xwx617.jpg" />        <br>        <!--图片标签的alt属性是在src属性错误的情况下显示的内容-->        <img alt="加载图片出错" src="ajfijsdifjos"/>        <br>        <!--通过非标签的方式实现图片效果        class属性：用来指示标签的类名        -->        <p class="logo"></p>    </body></html>

在浏览器中打开文档效果如图，第一行是正常img标签的效果，第二行是img标签图片源出错的效果，第三行则是利用style的background放置的图片效果，可以看出来第三种是一种填充效果。
这里写图片描述

列表标签
列表标签分为无序列表<ul> 有序列表<ol> 以及定义列表<dl> ，其中有序和无序列表标签的小项的标签都为<li>，定义列表的小项的标签为<dt> 和<dd> ，其中dt是定义标题，dd是定义内容，在实际项目中只建议使用无序列表。

<!DOCTYPE html><html>    <head>        <meta charset="tyf-8">        <title>HTML 列表</title>    </head>    <body>        <!--无序列表,li为项,type属性可以改变每一项前面的符号，赋值为none时取消符号，但是不能消去符号占的空间-->        <ul type="disc">            <li>苹果</li>            <li>鸭梨</li>            <li>水蜜桃</li>        </ul>        <!--有序列表-->        <ol>            <li>烤冷面</li>            <li>煎饼果子</li>            <li>麻辣烫</li>        </ol>        <!--定义列表 dt为概念的名字，dd为概念的解释-->        <dl>            <dt>正数</dt>            <dd>大于0的数</dd>            <dt>负数</dt>            <dd>小于0的数</dd>        </dl>    </body></html>

在浏览器中打开后效果如图所示
这里写图片描述

div标签
div标签是HTML中用的最常见最完成的标签，在以后的学习中会详细学习，这里不做过多赘述，把它理解为一个一个的块就可以了

阅读全文

0 0