Web开发HTML特点的总结

Web开发知识总结 HTML

Web开发

发布日期: 2020-10-25

文章字数: 1.3k

阅读时长: 5 分

阅读次数:

HTML简介

什么是HTML
- Hyper Text Markup Language
- 超文本标记语言

HTML文件结构

<html>
<head>
    <meta charset="UTF-8">
    <title>这里是页面的标题</title>
</head>
<body>
    这里是正文部分
</body>
</html>

HTML常用标签

字体标签

<font>....</font>

作用：规定文本的字体、字体尺寸、字体颜色；
注意：在HTML4中，不赞成使用此标签，在HTML5中，不支持使用此标签。

段落标签

<p>...</p>

作用：定义一个段落；
注意：段落内根据所在容器的宽度自动换行；浏览器会自动地在段落的前后添加空行；<p>和<br>的区别。

注释标签

<!--..........-->

作用：编写程序时，给代码的解释或提示，能提高程序代码的可读性，以便于之后的参考和修改。
注意：注释不会在浏览器中进行显示，注释出现的频率非常高

标题标签

<h?>.......</h?>
<!--?是在1至6之间的一个数字，1-3是常用的标题-->

作用：定义标题头的六个不同文字大小，依次显示重要性的递减，也就是权重依次降低。
注意：尽量靠近在html中的<body>标签，越近越好，以便让搜索引擎最快地领略主题。h标签主要是给SEO进行优化，SEO是搜索引擎抓取网站信息的一种行为。

图片标签

<img src = "***" />

作用：在浏览器中显示图片。
示例

<img src="../image/1.png" alt="image not found!"/>

常用属性：src、alt(如果图片不存在显示的提示信息)、height、width。
注意：相对路径与绝对路径的区别。

超级链接标签

<a>....</a>

作用：使用超级链接与网络上的另一个文档相连。
示例

<a href="page2.html">打开另一个页面</a>
<a href="https://www.imooc.com" target="_blank">
            <img src="../image/1.png"></a>

注意：超级链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
A标签有一个target属性，这些属性对应的内容如下图所示。

A标签target属性

A标签的锚点类型

锚点标签

<a name="ziti">....</a>

作用：同一个文档中创建指向该锚（位置）的连接
示例

<h1>目录</h1>
<h2><a href="#duanluo">段落标签</a></h2>
<h2><a href="page1.html#ziti">字体标签</a></h2>

注意：锚点必须先定义，再使用。

列表标签

<!--无序列表-->
<ul><li>.....</li></ul>
<!--有序列表-->
<ol><li>.....</li></ol>

作用：此列项目使用粗体圆点（典型的小黑圆圈）进行标记
示例

<!--无序列表-->
<ul>
    <li>我的文件</li>
    <li>我的图片</li>
</ul>
<!--有序列表-->
<ol>
    <li>我的文件</li>
    <li>我的图片</li>
</ol>

注意：列表项内部可以使用段落、换行符、图片、连接以及其他列表等

表格

表格的绘制

表格制作需要用到的标签
1. table：表格开始和结尾
2. tr：行开始和结尾
3. td：单元格开始和结尾
4. border：是否显示表格边框
5. width：表格或单元格的宽度

table、tr、td三个标签所描述的对象的示意图

作用：用于表格、行、列、宽度、边框的制作

合并单元格

<!--合并列-->
colspan
<!--合并行-->
rowspan

作用：用于将表格内的某些行、列进行合并。
实例代码：利用单元格制作一张课程表

<html>
    <head>
        <meta charset="UTF-8">
        <title>这里是页面的标题</title>
    </head>
    <body>
        <table border="true" width="50%">
            <tr>
                <td>星期</td>
                <td>一</td>
                <td>二</td>
                <td>三</td>
                <td>四</td>
                <td>五</td>
            </tr>
            <tr>
                <td>第一节</td>
                <td>数学</td>
                <td>英语</td>
                <td>物理</td>
                <td colspan="2" rowspan="2">化学</td>
            </tr>
            <tr>
                <td>第二节</td>
                <td>政治</td>
                <td>体育</td>
                <td rowspan="2">音乐</td>
            </tr>
            <tr>
                <td>第三节</td>
                <td rowspan="2">语文</td>
                <td>地理</td>
                <td>劳技</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>第四节</td>
                <td>数学</td>
                <td>物理</td>
                <td>化学</td>
                <td>英语</td>
            </tr>
            <tr>
                <td  colspan="6">午休</td>
            </tr>
            <tr>
                <td>第五节</td>
                <td>数学</td>
                <td>物理</td>
                <td>物理</td>
                <td>音乐</td>
                <td rowspan="2">体育</td>
            </tr>
            <tr>
                <td>第六节</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
                <td>体育</td>
            </tr>
        </table>
    </body>
</html>

表格的其他属性

其他一些会用到的表格标签示意图如下图所示。

表格的其他属性标签示意图

表单

<!--action传入后台的位置，method传入后台信息的方式-->
<form action="" method="">

</form>

作用：用于收集用户信息，进行人机交互操作
包含元素：文本框、单选按钮、列表框、图片框、复选框等这些元素，统称为“控件”
控件的常用属性如下图所示

控件的常用属性示意图

南航古惑仔

http://zbw0520.github.io/2020/10/25/html/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源南航古惑仔 !

Web开发知识总结 HTML

CSS样式特点的总结

2020-10-25 Web开发

Web开发 CSS样式知识总结

Java反射机制特点的总结

2020-10-24 数据库

知识总结 Java 反射