码迷,mamicode.com
首页 > Web开发 > 详细

HTML总结

时间:2019-12-26 09:20:50      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:标记   black   src   特征   单元格   比较   type   超链接   his   

一、HTML的定义

   HTML,超文本标记语言,写给浏览器的语言,用来展示网页内容。

二、HTML标签元素

   HTML元素由开始标签和结束标签组成。如<p>/<p>,<h1><h1/>。一般标签名推荐用小写。标签具有属性,属性用来表示标签的特征。

三、HTML 的基本结构

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的博客</title>
</head>
<body>
我的内容
</body>
</html> 

1、文档声明

在<html>前,要写文档声明语句: <!DOCTYPE HTML>,当然也可以用小写表示。文档声明的作用是告诉浏览器该文档遵循html规范。

2、标题

一般情况下,我们都会设定html文档的标题。这样的作用是使用户看起来感觉友好。标签为<title></title>,标签内放标题名称。

3、页面编码

编码的种类有多种,但常用的是utf-8和gb2312。utf-8为多国语言编码,gb2312为中文简体编码。对于编码的详细问题,可以浏览博客。设置网页编码的语句为<meta charset= "utf-8" />,是在<head></head>标签内定义的。

4、页面关键字,内容

我们可以在文档中设置一些关键词,内容介绍。这样的好处是,当我们的网页发布在网上,用户可以通过在搜索框中输入关键字,找出一些比较符合的网页。这样一来,我们的网页便可以更容易地被别人访问。

四、常用元素

1、标题

标题(Heading)是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

<h1>这是一个标题。</h1>

<h2>这是一个标题。</h2>

<h3>这是一个标题。</h3>

<h4>这是一个标题。</h4>

<h5>这是一个标题。</h5>

<h6>这是一个标题。</h6>

标题很重要请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。 

 2段落

段落是通过 <p> 标签定义的。

<p>这是一个段落 </p>

<p>这是另一个段落</p>

3、换行 

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签:<br /> 元素是一个空的 HTML 元素。

<p>这个<br>段落<br>演示了分行的效果</p>

 4水平线<hr/> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

<hr color="" width="" size="" align="">

color:设置水平线的颜色属性:

width:设置水平线的长度

size:设置水平线的高度

align:设置水平线的对齐方式(默认居中),可取值left|right

<p>这是一个段落。</p>

<hr>

<p>这是一个段落。</p>

<hr>

 <p>这是一个段落。</p>

5、图片 

<img> 标签定义 HTML 页面中的图像。

<img src="" alt="" title="" width="" height="">

Src:路径(相对路径、绝对路径)属性:

Alt:规定图像的替代文本。

Width:规定图像的宽度。

Height:规定图像的高度

Title:鼠标悬停在图片上给予提示

6、超链接

HTML使用标签 <a>来设置超文本链接。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。在标签<a> 中使用了href属性来描述链接的地址。默认情况下,链接将以以下形式出现在浏览器中:

(1)一个未访问过的链接显示为蓝色字体并带有下划线。

(2)访问过的链接显示为紫色并带有下划线。

(3)点击链接时,链接显示为红色并带有下划线。

注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。

<a href="url">链接文本</a>

7、文本格式化标签 

    <p>这是一个普通的文本- <b>这是一个加粗文本</b></p>

       <p><em>强调文本</em></p>

       <p>He named his car <i>The lightning</i>, because it was very fast.</p>

       <p><small> Copyright 1999-2050 by Refsnes Data.</small></p>

       <p><strong>加粗文本</strong></p>

       <p>这个文本包含 <sub>下标</sub>文本。</p>

       <p>这个文本包含 <sup>上标</sup> 文本。</p>

       <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

       <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

 8列表 

8.1无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表使用 <ul> 标签

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

 <ul><li>的属性type 拥有的选项

disc 默认实心圆

circle 空心圆

square 小方块

none 不显示

<!--无序-->

<ul type="disc">

    <li> apple</li>

    <li> pear</li>

    <li> peach</li>

</ul>

<!--无序-->

<ul type="circle">

        <li> apple</li>

        <li> pear</li>

        <li> peach</li>

</ul>

<!--无序-->

<ul type="square">

        <li> apple</li>

        <li> pear</li>

        <li> peach</li>

</ul>

<!--无序-->

<ul type="none">

        <li> apple</li>

        <li> pear</li>

        <li> peach</li>

</ul>

 8.2有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

<ol><li>的属性type 拥有的选项

1    表示列表项目用数字标号(1,2,3...)

a    表示列表项目用小写字母标号(a,b,c...)

A   表示列表项目用大写字母标号(A,B,C...)

i    表示列表项目用小写罗马数字标号(i,ii,iii...)

I    表示列表项目用大写罗马数字标号(I,II,III...)

<ol>

        <li> 烤冷面</li>

        <li> 煎饼果子</li>

        <li> 麻辣烫</li>

    </ol>

    <ol type="A">

        <li> 烤冷面</li>

        <li> 煎饼果子</li>

        <li> 麻辣烫</li>

    </ol>

    <ol type="a">

        <li> 烤冷面</li>

        <li> 煎饼果子</li>

        <li> 麻辣烫</li>

    </ol>

    <ol type="I">

        <li> 烤冷面</li>

        <li> 煎饼果子</li>

        <li> 麻辣烫</li>

    </ol>

    <ol type="i">

        <li> 烤冷面</li>

        <li> 煎饼果子</li>

        <li> 麻辣烫</li>

    </ol>

 

8.3自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

跨行、跨列:这个问题看似很复杂,其实很简单,在制作跨行和跨列的表格时,只需按照如下步骤就可以轻松搞定!:首先做一个完整的表格:注意虚线部分,最终去掉这些虚线就是我们要的效果找出最左上角那个“侵占”其他单元格的单元格,如下图标注数字的位置观察这个单元格“侵占”的是行还是列,算上自己总共是几个?(行数用r表示,列数用c表示) 如果是行:在这个单元格上添加 rowspan="r"如果是列:在这个单元格上添加 colspan="c"如果既有行又有列:在这个单元格上添加 rowspan="r" colspan="c"把“被侵占”的单元格删掉,删除顺序:从右向左,从上至下,否则很容易出错!按以上步骤完成一个跨行跨列的表格:

    

<table border="1" cellpadding="5" cellspacing="0" width="500" height="200">

    <tr>

        <td></td>

        <td></td>

        <td colspan="3"></td>

    </tr>

    <tr>

        <td rowspan="4"></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td rowspan="2" colspan="2"></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

    </tr>

</table>

HTML总结

标签:标记   black   src   特征   单元格   比较   type   超链接   his   

原文地址:https://www.cnblogs.com/Google-88/p/12098977.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!