HTML

最新推荐文章于 2025-12-07 09:00:00 发布

原创最新推荐文章于 2025-12-07 09:00:00 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

HTML概述

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

w3c标准

World Wide Web Consortium (万维网联盟)

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

W3C标准包括

结构化标准语言（HTML,XML）

表现标准语言(CSS)

行为标准(DOM，ECMAScript)

HTML基础

1.第一个网页

<!--注释 -->  快捷键（ctrl+/）

<html lang="en">
    
<!-- head标签代表网页头部-->

<head>
<!--meta描述性标签,它用来描述我们网站的一些信息--><!--meta一般用来做SEO-->
    
<meta charset="UTF-8">
<meta name="keywords" content="hello">
<meta name="description" content="来这个地方可以学习Java">
    
<!-- title网页标题-->
    
<title>我的第一个网页</title>
    
</head>
<!-- body标签代表网页主体-->
    <body>
        Hello,world !
    </body>
</html>

2.基本标签

< ! 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>一只没有耳朵   一只没有尾巴</P>
<p>真奇怪  真奇怪</p>
<p>两只老虎   两只老虎</P>
<p>跑得快  跑得快</P>
<p>一只没有耳朵   一只没有尾巴</P>
<p>真奇怪   真奇怪</p>

一只没有耳朵   一只没有尾巴<br/> <!--换行标签 -->

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


<!--粗体 -->   <strong> 文字  </strong>
<!--斜体 -->   <em></em>

<!--特殊符号-->
空      格<!--页面中只有一个空格-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;<!--大于符号-->
<br/>
&lt;<!--小于符号-->
&copy;版权所有狂神


</ body>
</html>

3.图像标签

< ! DOCTYPE html>
    <html lang="en">

<head>
<meta charset="UTF-8">
    <title>图像标签学习</title>
    </ head>
<body>
<!--img学习
src :图片地址（必填)
相对地址(推荐使用)，绝对地址../--上一级目录
alt :图片名字（必填)
)-->
    
<img src=" ../resources/image/1.jpg" alt="狂神头像" title="悬停文字" width="300 height=300">
</ body>
</html>

4.链接标签

<!--a标签
href :必填,表示要跳转到那个页面target :表示窗口在哪里打开
_blank在新标签中打开_self 在自己的网页中打开

-->

<!--使用name 作为标记-->
<a name="top">顶部</ a>


<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br>
<a href="1.我的第一个网页.html">
      <img src="../resources/image/1.jpg" alt="狂神头像" title="悬停文字" width="300" heig</ a>
    
    
    
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->

<a href="#top">回到顶部</ a>
    
    
<!--功能性链接
邮件链接:mailto
QQ链接
-->
        
<a href="mailto:247367430qq.com">点击联系我</ a>

    
    
    <a target="_blank"href="http://wpa.qq.com/msgrd?v=3 8uin=247367438tsite=qq&menu=yes" ><img border="O" src="http://wpa.qq.com/pa?p=2:24736743:53" alt="你好;加我领取小电影" title= "你好,加我领取小电影"/></a>

5.链表

)<!--有序列表
应用范围﹔试卷，问答...)-->
<ol>
<li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>


<hr/>

<!--无序列表
应用范围:导航,侧边栏....l)-->

<ul>
<li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>


<!--自定义列表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>
</dl>

6.表格

<!--表格table行tr rows列td
-->
<table border="1px">
    <tr>
<!--colspan跨列-->
    
<td colspan="4">1-1</td>
    </tr>
    
<tr>
<!--rowspan跨行-->
    
<td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    </tr>
<tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
</tr>
</table>