HTML

超文本标记语言(HyperText Markup Language),是一种标识性的语言,是网页制作必备的编程语言。

HTML初始代码

为符合HTML文件的语法规范,每一个html文件都需要添加初始代码。初始代码就是无论你写什么样的网页,这些代码都是要有的,这就是初始代码。

<!-- HTML 5初始代码 -->

<!-- 文档声明:告诉浏览器这是一个html文件 -->

<!DOCTYPE html>

<!-- html文件的最外层标签,包裹着所有html标签代码 -->

<html lang="zh-CN">

    <head>

        <!-- 元信息:是编写网页中的一些辅助信息 -->

        <meta charset="UTF-8">

        <!-- 定义网页标题 -->

        <title>HTML By ToDo Blog</title>

    </head>
    
    <body>

        <!-- 显示网页内容的区域 -->

    </body>

</html>

HTML注释

注释代码是用来在 HTML文件中添加说明/注释,使用注释的内容将不在浏览器中显示。注释代码一方面可以把暂时不用的代码注释掉,方便以后再用。另一方面可对开发人员进行提示,避免长时间不操作导致代码功能遗忘,方便后期维护。

<!-- 单行注释 -->

<!--

    <p>多行注释</p>

    <p>多行注释</p>

    <p>多行注释</p>

-->

HTML语义化

HTML语义化是指根据网页中内容的结构,选择适合的HTML标签进行编写。HTML语义化具有以下优点:

  • 在未引入CSS的情况下,尽可能让页面呈现出很好的内容结构。

  • 有利于SEO(搜索引擎优化),让爬虫更好的理解网页。

  • 方便其他设备解析。

  • 便于团队开发与维护。

HTML标题与段落

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <h1>ToDo Blog</h1>
        <h2>ToDo Blog</h2>
        <h3>ToDo Blog</h3>
        <h4>ToDo Blog</h4>
        <h5>ToDo Blog</h5>
        <h6>ToDo Blog</h6>
    </body>
</html>

HTML标题标签

<!-- 标题与段落标签 -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <h2>定风波·莫听穿林打叶声</h2>
        <p>三月七日,沙湖道中遇雨。雨具先去,同行皆狼狈,余独不觉,已而遂晴,故作此词。</p>
        <p>莫听穿林打叶声,何妨吟啸且徐行。竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。</p>
        <p>料峭春风吹酒醒,微冷,山头斜照却相迎。回首向来萧瑟处,归去,也无风雨也无晴。 </p>
    
    </body>
</html>

HTML段落标签

HTML文本修饰标签

<strong>:双标签, 表示强调,进行文本加粗

<b>:双标签,进行文本加粗

<em><i>:双标签,进行文本斜体

<u>:双标签,添加文本下划线

<s>:双标签,添加文本删除线

<sub><sup>:双标签,上标/下标文本

<del><ins>:双标签,删除和插入文本

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>

        <p>
            <strong>strong 标签</strong>
            <br />
            <b>b 标签</b><br />
            <em>em 标签</em><br />
            <i>i 标签</i><br />
            <u>u 标签</u><br />
            <s>s 标签</s><br />
            <del>del 标签</del><br />
            <ins>ins 标签</ins><br />
            H<sub>2</sub>O<sub>2</sub><br />
            a <sup>2</sup> + b <sup>2</sup> = c <sup>2</sup>
        </p>
    
    </body>
</html>

HTML文本修饰标签

HTML图片标签与图片属性

<img>:单标签,标签定义图片

  • src属性:图片路径地址

  • alt属性:图片替代文本(当图片出现问题时,显示图片描述)

  • title属性:图片提示信息

  • width、height属性:图片大小,单位默认像素(px)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>

        <img src="http://dotaoke.cn/img/my-bg.jpg" 
            alt="春天未暖心已暖" 
            title="春天未暖心已暖" 
            width="300" 
            height="200">

    </body>
</html>

HTML引入文件地址路径

相对路径

  • .在路径中表示当前路径

  • ..在路径中表示上一级路径

绝对路径

  • http://dotaoke.cn/img/my-bg.jpg

HTML跳转链接

<a>:双标签,标签定义超链接

  • href属性:链接地址

  • target属性:可以改变链接打开方式,默认情况下为在当前页面打开_self/新窗口打开_blank

<base>:单标签,是用来为页面中的所有相对链接指定默认地址或默认属性的,一般写在<head></head>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <base href="" target="_blank">
    </head>

    <body>

        <a href="http://www.dotaoke.cn">ToDo Blog</a>

    </body>
</html>

HTML特殊符号

特殊字符含义特殊字符代码
 空格符&nbsp;
©版权&copy;
®注册商标&reg;
小于号&lt;
大于号&gt;
&和号&amp;
人民币&yen;
°摄氏度&deg;

HTML列表

无序列表

  • <ul>:双标签,表示列表最外层容器

  • <li>:双标签,表示列表项

有序列表

  • <ol>:双标签,表示列表最外层容器

  • <li>:双标签,表示列表项

自定义列表

  • <dl>:双标签,定义列表

  • <dt>:双标签,定义专业术语或名词

  • <dd>:双标签,对名词进行解释和描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <base href="" target="_blank">
    </head>

    <body>
    
        <!-- 无序列表 -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <!-- 有序列表 -->
        <ol>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ol>
        <!-- 定义列表 -->
        <dl>
            <dt>HTML</dt>
            <dd>超文本标记语言</dd>
            <dt>css</dt>
            <dd>层叠样式表</dd>
            <dt>JavaScript</dt>
            <dd>网页脚本语言</dd>
        </dl>
    </body>
</html>

HTML列表

HTML表格

<table>:双标签,表格的最外层容器

<tr>:双标签,定义表格行

<th>:双标签,定义表头

<td>:双标签,定义表格单元

<caption>:双标签,定义表格标题

  • border属性:表格边框

  • cellpadding属性:单元格内的空间

  • cellspacing属性:单元格之间的空间

  • rowspan属性:合并行

  • colspan属性:合并列

  • align属性:左右对齐方式

  • valign属性:上下对齐方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <base href="" target="_blank">
    </head>

    <body>
        <table border="1" cellpadding="10" cellspacing="2">
            <caption align="center" valign="middle">TIOBE Index for November 2019</caption>
            <tr align="center" valign="middle">
                <th>Nov 2019</th>
                <th>Programming Language</th>
                <th>Ratings</th>
            </tr>
            <tr align="center" valign="middle">
                <td>1</td>
                <td>Java</td>
                <td>16.246%</td>
            </tr>
            <tr align="center" valign="middle">
                <td>2</td>
                <td>C</td>
                <td>16.037%</td>
            </tr>
            <tr align="center" valign="middle">
                <td>3</td>
                <td>Python</td>
                <td>9.842%</td>
            </tr>
        </table>
    </body>
</html>

HTML表格

HTML表单

<form>:双标签,表单的最外层容器

<input>:双标签,用于搜集用户信息

type属性含义
text普通的文本输入框
password密码输入框
checkbox复选框
radio单选框
file上传文件
submit提交按钮
reset重置按钮

<textarea>:双标签,表示多行文本框

<select><option>:双标签,表示下拉菜单

<label>:双标签,为 input 元素定义标注(标记)

HTML的div标签与span标签

div(块):div全称为division,“分割、分区”的意思,<div>标签用来划分一个区域,相当于一个区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中,<div>中还可以嵌套多层<div>,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。

span(内联):用来修饰文字的,div与span都是没有任何默认样式的,需要配合css才行。

不起眼的小广告

上一篇:Python集合

下一篇:CSS基础语法