初识web 之 HTML - 基本标签

最新推荐文章于 2024-01-01 20:57:57 发布

§九千七§

最新推荐文章于 2024-01-01 20:57:57 发布

阅读量304

点赞数

分类专栏： JavaWeb 文章标签： html

本文链接：https://blog.csdn.net/chuli0327/article/details/106907576

版权

JavaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基础知识，包括HTML的定义、基本结构和常用标签。HTML是一种标记语言，用于描述网页。文章详细讲解了<!DOCTYPE html>、<html>、<head>、<body>、<title>等核心标签的用途，以及图片、链接、列表、表格等元素的使用方法。同时，还涵盖了字体、格式化、超链接的target属性和锚点链接的应用。

摘要由CSDN通过智能技术生成

JavaWeb --- HTML

1.HTML 是用来描述网页的一种语言。

·HTML 指的是超文本标记语言 (Hyper Text Markup Language)
·HTML 不是一种编程语言，而是一种标记语言 (markup language)
·标记语言是一套标记标签 (markup tag)
·HTML 使用标记标签来描述网页

2.HTML的基本结构？？

<!DOCTYPE html>   <!-- 约束，声明 -->
<html lang="zh_CN">     <!-- html 标签表示html的开始 lang ="zh_CN"表示中文 html标签中一般分两部分是： head  ,  body -->
<head>     <!-- 表示头部信息，一般包含三部分内容 ，title标签 ，css样式 ， js代码  -->
    <meta charset="UTF-8">   <!-- 表示当前页面使用UTF-8字符集 -->
    <title> title name </title>   <!-- 表示标题 -->
</head>
<body>   <!-- body 标签是整个html页面显示的主体内容 -->
     hello
</body>
</html>

　1. <!DOCTYPE html> doc（document文档），type（类型）单标签，声明文档类型

　　　　作用：浏览器打开的时候，告诉浏览器这是一个什么文件。

　　2. <html> </html> 根标签，双标签 <html>是开始标签 </html>是结束标签/闭合标签

　　3. <head> </head> 头部标签双标签

　　4. <body> </body> 身体标签双标签

　　5. <title> </title> 标题标签双标签

　　6. meat 设置标签 <meat charset="utf-8"> charset用来设置编码格式，utf-8汉字

　　7. img 图像标签，用来引入图片，路径由src来引入。 <img src="img/....jpg"　/>

　　8. link 外部引入

　　9. <b> </b> 加粗文字

　　10. <button> </button> 按钮标签

　　11. <br/> 换行

12.<a> 标签可定义锚

通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
通过使用 name 或 id 属性，创建一个文档内部的书签

3.字体标签

4.格式化标签

5.图片标签

6.列表标签

4.列表标签

1.无序列表

<!-- 无序列表-->
				<ul>
					<! -- li 定义列表项 -->
					<li>.超链接...</li>
				</ul>

2.有序列表

<!--有序列表 -->
				<ol>
					<li>有序</li>
				</ol>

3.定义列表

<!--定义列表 -->
				<dl>
					<!-- 定义定义列表-->
					<dt><img src="img/user/1.jpg"</dt>
					<!-- 定义定义项目-->
					<dd>55555超链接5</dd>
					<!-- 定义定义的描述 -->
				</dl>

列表 + 超链接

7.超链接标签

1.页面间连接
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<a href="http://www.w3school.com.cn/" target="_self">Visit W3School!</a>
<a href = "../index.html" targrt = "_self" >  主页面    </a> 实现页面间跳转
target 跳转属性 -blank 跳转到新的界面 _self 在本页面跳转

2.锚链接
大多用于很多内容的跳转 eg：简介
1.定义锚点
<a name = "jlgv ">啦啦啦</a>
2.进行锚链接
<a href ="#jlgv">啦啦啦</a>
页面就会跳转到锚点的位置

3.功能性连接（使用情况较少）
1.下载图片<a href="img/qq.jpg">点击下载图片</a>
2.发送邮件<a href="mailto：1967760xx37qq.com">联系我们</a>
3.引用脚本语言 <a href="javascript:alert('哈哈哈哈')"></a>

8.表格标签

单元格

<! --cellspacing  单元格距离    cellpadding 单元格间距离-->
<table border = "5"  cellspacing = "20" cellpadding = ""width="200">
<tr> <th colspan="2">Header</th><th rowspan="2" >Header</th> <th>Header</th> </tr>
<tr> <td>Data</td><td>Data</td><td>Data</td>  </tr>
<tr> <td>Data</td><td>Data</td><td>Data</td><td>Data</td>  </tr>
</table>
<! --  colspan="2" 占2列     rowspan="2"   占2行 -- >

运行结果

9.块标签

§九千七§

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
初识web 之 HTML - 基本标签

Web前端概要一、前端的三大模块：html、css、javascript　　html--结构它的全称：超文本标记语言　　css--样式它的全称：层叠样式表　　javascript--行为它的全称：脚本语言一 HTML1.HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup ...
复制链接

扫一扫