HTML

最新推荐文章于 2024-04-16 19:19:57 发布

张*

最新推荐文章于 2024-04-16 19:19:57 发布

阅读量343

点赞数

分类专栏： HTML 文章标签：前端

本文链接：https://blog.csdn.net/qq_40393135/article/details/91903334

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML:是一种用来制造超文本文档的简单标记语言；
HTML被称为超文本标记语言，这里的超文本指的是网页中可以加入图片、声音、动画、视频等内容。
每一个HTML文档都是静态的网页文件，文件中包含了HTML指令代码；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
文档的主题，正文内容
</body>
</html>

1.标题

标题（heading）是标准的印刷用语；HTML共提供了六级标题样式；

<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

一级标题最大，而后逐渐减小
<hl>HTML标题 </hl>
可以通过align 属性指定标签的对齐方式， left， right， center justify；如<hl align = “right” >HTML标题 </hl>

上述代码的编译运行的结果如下图所示：

2.段落和换行

段落的标记为 “ <p> ......</p> ”，<p>标记在每个段落的开头加入，结束段落可以不加</p>,因为下一个<p>的开始即是上一个 </p> 的结束；
换行标记 "<br>" ，既没有结束标记也没有属性；

与换行标记相比较，<nobr> ..... </nobr> 是强制不换行的特殊标记，结束标记不可少；

3.文字

<B> (粗体)， <I>（斜体），<U>（下划线），<small> （字变小），<sup>(上标字) 等；
<h1> 字体字体样式 </h1>;

4.水平线

水平线标签为 <hr> ,不需要结束标记；

<body>
<hr> 
<hr noshade>
<hr noshade width="70%"align = center> 
<hr size=1  color=blue>
</body>

noshade : 水平线不显示阴影，即是实心线段

上述代码的编译运行的结果如下图所示：

5.图像

常见的图像格式 :

. jpg
. png
. bmp 位图
. gif 等

<img src=" picpath " width="picWidth" height="picHeight" >

src:该属性用来指定图像的来源，即绝对路径或相对路径均可，但一般不用绝对路径；
alt 用来设置当图像文件不存在或者装载图像发生错误时，在页面上显示的文字信息；
title 是指当鼠标放在图像上时的提示（tip）说明；
hspace / vspace 分别用于设定图像的左右边距和上下边距，即图像周围的空白区域；

6.超链接

超链接的标记为 <a> ,是 anchor 的简写。

<body>
<a class=type
   id=value
    href=reference
   name=value
   targer=window
   style=value 
   title=title
   onclick=function x() {

   }
   onmouseover="function f() {
     
   }"
   onmouseout="function f() {
     
   }"
   
   
>连接</a>

在设定一个超链接时有很多的参数可以选择，实现不同的链接效果；

class/id/style ：用于设定超链接的所属类型、ID值以及CSS样式，
href ：设定，链接的地址；
name ：将该超链接设置成为一个锚点，作为被链接的对象；
onclick / onmouseover / onmouseout ：代表点击链接、鼠标移动链接、鼠标移除链接；

href属性的不同，超链接可以分为几种方式；

空链接：指暂时没有指定链接对象，或为了实现某种动态效果而设置的链接，用“ # “ 表示，
锚点链接：是指链接目标为网页中的一个已经设置好的锚点；

<a name="mark">锚链接标记</a>


<a href="#mark">点击跳转</a>

7.列表

有序列表

<h1>有序列表</h1>
<ol>
<li>JavaSE</li>
<li>JavaWEB</li>
</ol>

上述代码编译运行的结果如下：

无序列表

<h1>无序列表</h1>
<ul>
<li>JavaSE</li>
<li>JavaWEB</li>
</ul>

上述代码编译运行的结果如下：

自定义列表

<h1>自定义列表</h1>

<dl>
<dt>Java</dt>
<dd>SE</dd>
<dd>WEB</dd>

<dt>Python</dt>
<dd>数据分析</dd
<dd>数据挖掘</dd>
</dl>

上述代码编译运行的结果如下：

8.表格

表格具有组织页面数据和安排网页元素布局的功能，实现在页面中的精准定位；
用表格布局网页可以提高页面多的有序性、条理性、规范性；
表格可以嵌套以实现复杂的表格布局，也可以对单元格进行合并；，属性 rowspan=n 表示将n行合并为一行；colspan=n表示将n列合并为一列；

表格的相关属性：

caption ：定义表格的标题；
<tr>定义行，只能放在<table></table>标记对之间使用；
<th>定义表格头，表格的每一行都需要用一个<th>标记；
<td>定义表格内容的一列；
<tr> <td>d的 valign 表示垂直对齐，取值可以为top（顶部）、middle（居中对齐）、buttom（底部对齐）；

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hl>一行两列：</hl>
<table border="1" center>
    <tr>
        <td>k</td>
        <td>l</td>
    </tr>
</table>
<hl>两行两列：</hl>
<table border="1" center>
    <tr>
        <td>k</td>
        <td>l</td>
    </tr>
    <tr>
        <td>w</td>
        <td>e</td>
    </tr>
</table>
</body>

上述代码编译运行的结果如下：

张*

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTML:是一种用来制造超文本文档的简单标记语言； HTML被称为超文本标记语言，这里的超文本指的是网页中可以加入图片、声音、动画、视频等内容。每一个HTML文档都是静态的网页文件，文件中包含了HTML指令代码；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt...
复制链接

扫一扫

专栏目录