HTML

最新推荐文章于 2024-10-15 21:18:29 发布

好来污最佳男主角

最新推荐文章于 2024-10-15 21:18:29 发布

阅读量660

点赞数 1

文章标签： html

本文链接：https://blog.youkuaiyun.com/Hello_zbs/article/details/106673249

版权

HTML

1.整体结构

超文本标题语言文件以**.htm或.HTML**为扩展名。可以使用任何能够生成TXT类行源文件的文本编辑器来产生超文本标题语言文件，只需修改文件后缀即可。

标准的超文本标记语言文件都具有一个基本的整体结构，而且标记一般都是成对出现（部分标记除外列如：
）;超文本标记语言由头部（Head）与主体（Body）两大部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。：

HTML标记是由“<和>”所括住的命令标记，用于向浏览器发送标记指令。主要分为：单标记指令、双标记指令（由“<起始标记>”+内容+“</结束标记>”构成），既简单又方便。

为了便于理解，将HTML标记语言大致分为基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记等。

2、类型描述

为了说明文档使用的是超文本标题语言标准，所有超文本标题语言文档应该以“文件类型声明”（外语全称加缩写**<!DOCTYPE>**）开头，引用一个文件类型描述或者必要情况下自定义一个文件类型描述。

声明必须是HTML文档的第一行，位于标签之前。声明不是HTML标签；他是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。

提示：请始终向HTML文档添加<！DOCTYPE>声明，这样浏览器才能获知文档类型。

<!DOCTYPE html>

3、头部内容
<head></head>;这两个标记符分别表示头部信息的开始和结尾。头部中包含的标题是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和标记符，其中标题标记符用于定义网页的标题，它的内容显事在网页窗口的标题栏中，网页标题可被浏览器用作数书签收藏清单。

4、主体内容
<bpdy></body>;网页中显示的实际内容包含在这两个正文标记符之间。正文标记符又称为实体标记。
当然，如果不适用以上基本框架结构，而直接使用在实体部分中出现的标记符，在浏览器下也可以解释执行。

基本标签

基本标签是用来定义页面属性的一些标记语言。通常一份HTML网页包含3个部分：标头区…、内容区<body></body>和网页区<HTML>...</HEML>。

1.<html>…</html>
标记用域HTM文档的最前面，用来标识HTML文档的开始。而标记表示文档的结束，它放在HTML文档的最后边，用来标识HTML文档的结束，两个标记必须一块使用。

2.<head>…</head>
<head>和</head>构成HTML文档的开头部分，在此标记队之间可以使用<title></title>、<script></script>等标记对。这些标记对都是来描述HTML文档相关信息的，<head>和</head>标记对之间的内容是不会在浏览器的框内显示出来的，两个标记必须一起使用。

3.<body></bpdy>
一般情况下浏览器上显示的内容都放在body中，不排除其他标签能不用body
<body>和 </body>是HTML文档中的主体部分，在标记对之间可包含<p>...</p>、<h1>...</h1>、<hr/>等众多的标记。他们所定义的文本、图像将会在浏览器的框内显示出来。

常见的HTML标签

1.<title>...</title>
定义文档的标题 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或者状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

提示：<title>标签是<head>标签中唯一要求包含的东西

其中：
<title></title>标签中的内容显示在浏览器的页面标题处。

基础语法

HBuider在编写代码的过程中，代码编写错误、遗漏程序/页面有可能不会出现问题，不报错标签/标记的大小写是没有影响的

标签的格式：
双标签：<标签名属性名=“属性值”>…</标签明>
单标签：<标签名/>
属性：描述标签

Title

写在head标签中，设置当前网页的标题

<title></title>

<title>我是标题标签</title>

设置编码格式

<meta charset="utf-8" /> 乱码：保证文件存储的编码格式与网页中解析的格式一致

编码格式在Gdk中 UTF-8

标题标签

<h1-h6 >效果是由大变小的外观：变大，加粗占据整个一行
功能：可以被搜索引擎搜寻到

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>标签标题</title>
 </head>
 <body>
 <h1>我是一级标题标签</h1>
  <h2>我是二级标题标签</h2>
  <h3>我是三级标题标签</h3>
  <h4>我是四级标题标签</h4>
  <h5>我是五级标题标签</h5>
  <h6>我是六级标题标签</h6>
  <!--当用户写了自定义的标签/标题，那这个文本将没有任何效果 -->
  <h7>我是七级标题标签</h7>
  <h8>我是八级标题标签</h8>
  <h999>我是九九九级标题标签</h999>
 </body>
</html>

在这里插入图片描述

段落标签

<p></p>

可以让两段文本之间产生间距，留白，起每句功效
&nbsp；实体，可当空格使用
<br/> 单标签起换行作用

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>段落换行</title>
  </head>
 <body>
  <p>&nbsp;&nbsp;&nbsp;今早吃了个包子，感觉还可以</p>
  <p>今早吃了个包子，<br/>感觉还可以</p>
 </body>
</html>

超链接

<a href=""></a>

超链接标签外观：下划线，有颜色变化，鼠标悬停在a标签上时显示小手指
功能：跳转网页
相对路径：从当前位置出发，查找（资源）
绝对路径：从项目的上一层出发，查找（/）

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>跳转</title>
  </head>
 <body>
  <p>
   <a href="http://www.baidu.com" target="_blank">百度一下</a>
  </p>
  <p>
  <a href="http://www.jd.com">京东商城</a>
  </p>
  <p>
   <a href="01simple.html">01simple_html</a>
  </p>
  <p>
  <a href="../index.html">index.html</a>
  </p>
  <p>
   <a href="/htmlProject/index.html">绝对路径index.html</a>
  </p>
  <p>
  <a href="/htmlProject/html/02simple.html">绝对路径02simple.html</a>
  </p>
 </body>
</html>

lmg

本地，网上图片（有网的情况下）
alt：当图片加载失败，展示在页面中的一句话
src：图片资源的位置
title：当鼠标悬浮停留在img标签上时，显示一行提示词

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>图片</title>
  </head>
 <body>
  <img src="../img/灭霸.jpg" align="left" width="50% "alt="图片正在加载中....."/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591782881980&di=147cd969e86202e371f0602170bad618&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180812%2F4b100e53cbdb423ea8e6048e4d873054.jpeg" width="100px" height="100px" border="5px" title="百度图片"/>
    </body>
</html>

表单form

Method：get提交方式，action：提交地址
外观：没有任何形式展示
功能：没有传输数据，提交请求
不能单独使用，必须结合表单一起使用
表单域 input
Type
Submit 外观（可点击），功能：将数据提交出去
text 外观（框），功能：输入输入数据
Password外观（框），功能：输入数据（隐藏）
Checkbox外观（选择框可多选），功能，选择

				<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>注册百度账号</title>
 </head>
 <body>
  <h1>欢迎注册</h1>
  <p>已有帐号？<a href="https://passport.baidu.com" target="_blank">登录</a></p>
  <p>用户名&nbsp;<input type="text" name="username" placeholder="请设置用户名"></p>
  <p>手机号&nbsp;<input type="text" name="phoneNum" placeholder="可用于登录和找回密码"></p>
  <p>密 码&nbsp;&nbsp;&nbsp;<input type="password" name="mima" placeholder="请输入验证码"></p>
  <p>验证码&nbsp;<input type="text" name="captcha" placeholder="请输入验证码">   <input type="submit" value="获取验证码"></p>
  <p>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="注册">
  </p>
  <p><input type="checkbox">阅读并接受 <a href="https://passport.baidu.com" target="_blank">《百度用户协议》
  </a>及<a href="https://privacy.baidu.com"target="_blank">《百度隐私权保护声明》</a></p>
 </body>
</html>