初识HTML 上

最新推荐文章于 2024-07-24 16:51:37 发布

java_smallwang

最新推荐文章于 2024-07-24 16:51:37 发布

阅读量147

点赞数

CC 4.0 BY-SA版权

分类专栏：计算机专业前端学习 html5 文章标签： html5 tablet

本文链接：https://blog.youkuaiyun.com/qq_42104296/article/details/107365957

计算机专业同时被 3 个专栏收录

11 篇文章

订阅专栏

前端学习

2 篇文章

订阅专栏

html5

2 篇文章

订阅专栏

本文详细介绍了HTML的基本概念、历史发展及最新标准HTML5的优势。涵盖W3C标准介绍、常见IDE工具、HTML基本结构解析，以及标题、段落、图像、链接等常用标签的使用方法。同时，深入讲解了列表、表格的创建与格式化技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是html

HTML

Hyper Text Markup Language(超文本标记语言)

HTML发展史

HTML5的优势

世界知名浏览器厂商对HTML5的支持

微软

Google

苹果

Opera

Mozilla
市场需求
跨平台

W3C标准

W3C

World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

http://www.w3.org/

http://www.chinaw3c.org/
W3C标准化包括

结构化标准语言（HTML XML）

表现标准语言（css）

行为标准语言（DOM ECMAScript）

常见IDE

记事本
Dreamweaver
IDEA
WebStorm
....

HTML的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>

< body>、</body> 等成对的标签，分别叫开放标签和闭合标签单独呈现的标签(空元素)，如<hr/> ;意为用/来关闭空元素

网页的基本信息

<!--DOCTYPE：告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meat描述网页信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="smallwang ，学习java"><!--搜索该网页的关键词-->
    <meta name="description" content="2020年7月14号开始学习html"><!--描述网页内容信息-->

    <!--title网页标签-->
    <title>我的第一个网页</title>
</head>
<!--body代表网页主体-->
<body>
hello world！！
</body>
</html>

基本标签

标题标签
段落标签
换行标签
水平线标签
字体标签
注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>两只老虎    两只老虎</p>
<p>跑得快bai       跑得快</p>
<p>一只没有du耳朵zhi     一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
<p>两只老虎     两只老虎</p>
<p>跑得快        跑得快</p>
<p>一只没有耳朵    一只没有尾巴</p>
<p>真奇怪      真奇怪</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
两只老虎    两只老虎br <br/>
跑得快bai       跑得快<br/>
一只没有du耳朵zhi     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
两只老虎     两只老虎<br/>
跑得快        跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>
真奇怪      真奇怪<br/>

<!--粗体 斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>

<br/>
<!--特殊符号-->
空格：空&nbsp;&nbsp;格 (& nbsp ;) <br>
大于：&gt;(& g t ;) <br>
小于：&lt;(& l t ;) <br>
版权符号：&copy;版权所有smallwang  （& copy;）<br>
<!--
    特殊付哈为记忆方式：
        & ；
        百度
-->
</body>
</html>

图像标签

img标签

常见的图像格式

<img src="path" alt="text" title= "text" width="x" height ="y" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--
  img学习：
    src：图片地址
        相对地址、绝对地址
        ../      上一级目录
        ./       当前目录
    alt: 图片名字
-->
<img src="../resources/img/巨石.jpg" alt="巨石" title="鼠标悬停显示的文字" width="500" height="300">
</body>
</html>

链接标签

超链接

a标签

超文本链接
图像链接

<a href="path" target="目标窗口位置">链接文本或图像</a>

href：链接路径
target：链接在哪个窗打开
目标窗口位置：常用值（_self、_blank  ）

页面间链接

从一个页面链接到另一个页面

<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度页面</a>

锚链接

<a name="top">回到这里了</a><br>
.....
<a href="#top">回到顶部</a>

功能性链接

 <!--
 功能性链接
 邮件链接：mailto：
 qq链接：
 -->
<a href="mailto:294295399@qq.com">点击联系我</a><br>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击添加我" title="点击添加我"/>
</a>

行内元素和块元素

块元素

无论内容多少该元素多少，该元素独占一行；
(p、h1-h6)

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行
（a、strong、em....）

列表

什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

列表的分类

无序列表

<!--无序列表-->
<ul>
    <li>Java</li>
    <li>PHP</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

有序列表

<!--有序列表-->
<ol>
    <li>Java</li>
    <li>PHP</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>

定义列表

<!--  自定义列表
    dl：标签
    dt：列表名称
    dd：列表内容
    应用范围：公司网站底部显示首部
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>
    <dd>仁怀</dd>
    <dd>南通</dd>
    <dd>凯里</dd>
    <dd>遵义</dd>
</dl>

表格

为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--  表格 table
    行 tr rows
    列 td
-->
<table border="1px">
    <tr>
        <!-- colspan 跨列 -->
        <td colspan="4" align="center">使用了colspan标签</td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="2">使用了rowspan标签</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

<table border="1">
    <tr>
        <td colspan="3" align="center">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">小明</td>
        <td>语文</td>
        <td>90</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>111</td>
    </tr>
    <tr>
        <td rowspan="2">小红</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>92</td>
    </tr>
</table>

</body>
</html>