html标签学习1

最新推荐文章于 2023-12-04 20:15:26 发布

?? ??????

最新推荐文章于 2023-12-04 20:15:26 发布

阅读量268

点赞数

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

本文链接：https://blog.csdn.net/zhangtaibin2019/article/details/103434360

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html

万维网

万维网WWW是World Wide Web的简称，也称为Web、3W等。WWW是基于客户机/服务器方式的信息发现技术和超文本技术的综合。WWW服务器通过超文本标记语言(HTML)把信息组织成为图文并茂的超文本，利用链接从一个站点跳到另个站点。这样一来彻底摆脱了以前查询工具只能按特定路径一步步地查找信息的限制
1.超文本
超文本是一种全局信息结构，他将文档的部分建立链接，是信息得以用交互方式搜索。
2.超媒体
3超文本传输协议http

html

1.认识web
认识网页：网页是什么组成的？网页主要由文字、图像超链接等元素组成，网页中还包括音频视频。
2 web标准
web标准由那三层组成？
三层的是html、js、css、
web标准不是某一个标准而是w3c组织和其他标准化组织制定一系列标准的组合
在这里插入图片描述
3. web标准构成
主要包括结构html，表现css，行为js三个方面构成。

认识 html

htm指的是l超文本标记语言，是用来描述网页的一种语言
htm不是一种编程语言而是一种标记语言
标记语言是一套标记标签
1.htm骨架标签

<!DOCTYPE HTML> //文档的声明
<html> // 标记文档的开始 
<head> // 是文档的头部
<meta charset="utf-8" />
<title>第一个html文件</title>
</head>
<body> //主体内容
</body>
</html>//标记文档的结束

<!DOCTYPE HTML> 
<html> 
<head>
<meta charset="utf-8" />
<title>第一个html文件</title>
</head>
<body> 
ddd
</body>
</html>

htm标签名、类名、标签属性、和大部分属性值、统一用小写

<head>
<title>我的第一个页面</title>
</head>

2.htm5元素标签分类
在htm页面中，带有<>符号的元素被称为htm标签，如上面提到的<html> <head> <body>
都是htm骨架结构标签
<标签名></标签名>
我们把成对出现的标签
<标签名/>
我们把不是成对出现的标签，有单个元素组成的成为单标签

3.htm标签关系
第一个是嵌套关系

<head>
<meta charset="utf-8" />
<title>第一个html文件</title>
</head>

第二种关系并列关系

<head> </head>
<body> </body>

4.代码开发工具

Dreamweaver
SublimeText
WebStorm
HBuilder
VScode

5.文档类型<!DOCTYPE>

<!DOCTYPE HTML> //文档的声明

6页面语言lang

  <html lang="en">
  </html>

en定义语言为英语
zh-CN定义语言为中文
6字符集

<meta charset="utf-8"/>

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字 GUO BIAO
BIG5 繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则基本包含全世界所有国家需要用到的字符

htm常用标签

htm标签有很多这里我们学习，最常用的较少用的我们查一下手册
1 排版标签

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>第一个html文</title>
</head>
<body>
<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>
<body>
</html>

2 段落标签p

<p> 文本内容</p>

3.水平线标签

<hr/>

4换行标签 br

ggggggg
<br/>tggggggggggg

4 div span重点标签

<div>这是头部</div>
<span>这是span标签</span>

他们两个都是盒子，用来装我们网页元素的只不过他们有区别：

div标签是用来布局的，现在一行只能放一个div
span标签是用来布局的一行上可以放很多span

5.文本格式化标签
在网页中有时需要为文字设置粗体、斜体、或者下划线效果，这时我们就需要用到htm文本格式化标签是文字以特殊方式显示。

这是一段文字<b>所有商品</b>
<strong>全长都是两宽</strong>
<i>全场商品</i>

b标签是加粗
strong除了可以加粗还有强调的意思，语义更强烈
1标签代表斜体的意思

6. 常用标签 img
要想在网页中显示图片就需要使用图片标签
语法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="./img/1.jpg" />
</body>
</html>

语法中SRC属性用于指定图片文件的路径和文件名，他是img标签重要属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="./img/1.jpg" />
<img src="./img/1.jpg" width="200"  height="200" border="2"/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="./img/1.jpg" />
<img src="./img/1.jpg" width="200"  height="200" border="2"/>
<img src="./img/2.jpg" width="200"  height="200" border="2" alt="无图片" title="这是图片"/>
</body>
</html>

7.a链接
在HTML中创建超链接非常简单，只需要用标签把文字包裹起来就好
语法格式如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="https://mp.csdn.net/" target="_parent">我的博客</a>
<a href="https://mp.csdn.net/" target="_blank">我的博客</a>
</body>
</html>

href:用于指定链接目标的ul地址当为标签应用href属性时它具有了超链接的功能。
target：用于指定链接页面打开方式，其取值有_self 和_blank
8 注释标签
在HTML中还有一种特殊的标签注释标签如果需要在HTML文档中添加一些便于阅读理解但又不需要显示在页面中的注释文字，就需要使用注释标签

<!--我是注释标签-->

09 table

table用于定义一个表格标签
tr标签用于定义表格中的行，必须嵌套在table标签中
td用于定义标签中的单元格，他必须嵌套在tr标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
    </tr>
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
    </tr>
</table>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
    </tr>
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
    </tr>
</table>

<table border="1" width="600" height="500" cellpadding="20" cellspacing="0" align="center">

    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
    </tr>
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
    </tr>
</table>
</body>
</html>

10.无序标签有序标签

无序列表ul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>
</body>
</html>

有序列表ol

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>
<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>

</ol>
</body>
</html>

自定义列表

<dl>
<dt>名词1</dt>
<dd>名词2</dd>
<dd>名词3</dd>

</dl>

列表总结
无序标签：里面只能包括li标签，没有顺序
有序标签：里面只能包括li标签，有顺序，使用情况较少
自定义标签：里面有两个兄弟dt和dd

11.表单标签form

input
文本框

<input type="text" value="您好"/>

单选和复选按钮

<input type="radio" value="1" name="t"/>1
<input type="radio" value="2" name="t"/>2

<input type="checkbox"/>1
<input type="checkbox"/>1

按钮

<input type="button" value="我是按钮"/>

select下拉列表

<select>
    <option>1</option>
    <option>2</option>
</select>

文本域

<textarea>
    6yyyyyyyyyyyyyyyyyyyyyyy
</textarea>

?? ??????

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录