HTML基础

佛系WXB
211 阅读3分钟

HTML基本结构

<!--DTT文档类型声明 告知浏览器使用的HTML得到版本规范-->
<!DOCTYPE html>
<!--命名空间 lang对搜索引擎和浏览器有帮助-->
<html lang="en">
<head>
    <!--字符编码 乱码问题要看这里 追求网页加载速度且有大量中文的网页用gbk-->
    <meta charset="UTF-8">
    <!--移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--网页标题-->
    <title>html基础</title>
</head>
    <body>
    <body/>
<html/>

HTML常用标签

标题标签（h1-h6）

h1权重最大每个网页最多设置一个，多了会影响搜索引擎排名

段落标签(p)

段落标签p（paragraph）不负责自动换行 换行标签
换行符

文本格式化

文本格式化标签

<p><b>这是b标签</b></p>
<p><u>u标签</u></p>
<p><i>i标签</i></p>
<p><big>big标签</big></p>
<p><small>small标签</small></p>
<p><em>em标签</em></p>
<p><ins>ins标签</ins></p>
<p><del>del标签</del></p>
<p><s>s标签</s></p>
<p><strike>strike标签</strike></p>
<p>一个上标的计算式2<sub>3</sub></p>
<p>一个有下表的分子式H<sub>2</sub>O</p>

文本格式化标签效果图

图像标签（img）

单标签。 通过对应属性对图像进行调整 图像标签属性：

图像标签属性

alt属性对SEO引擎优化有帮助

src又分为相对路径，绝对路径

相对路径：

  • 同级查找 直接写图像名+后缀
  • 子集查找 前面加上文件夹名
  • 上级查找 前面每上一级加一个../

绝对路径：

  1. 从盘符路径（C:/Users/teacher/Documents/html/case/images/smile02.png"）
  • 从盘符出发的绝对路径的缺点：
  • a.盘符出发的路径不可移植，不可移动。
  • b.盘符出发的路径容易出现中文字符，中文的路径容易出现错误。
  1. 网址路径（images.gitee.com/uploads/ima…

实际使用时建议多使用相对路径

音频和视频

音频(audio) 视频(video) 需要设置 controls属性（控制台）才可以播放

超级链接（a）

a标签属性：

herf 链接地址

  • 可以跨页面跳转（值为网址），
  • 也可以锚点跳转（值为#+需要跳转的标签的id名 还可以是目标位置添加一个空的a标签的name名）
  • 跨页面锚点跳转（值为上面二者相加）

target 跳转方式：

  • _self 默认值当前窗口打开
  • _blank 新窗口打开
  • title 说明链接功能

HTML基本语法

表格制作

创建一个简单的表格至少有三个标签组成，分别是<table>、<tr>、<td>标签。

  • table：表格，定义的是整个的表格大结构
  • <tr>列 <td>行
  • 三者的关系：table>tr>td.

table边框属性

border-collapse : collapse 表示边框塌陷

表头单元格（th）

自带默认的css样式效果，文字显示粗体居中。

合并单元格

tr th 的属性:

  • rowspan：跨行和并。上下的合并。
  • colspan：跨列合并。左右的合并。

表格分区

  • <table>内部最直接的子级包含四个分区标签，他们都是双标签。
  • caption：表格的标题，内部书写标题文字。
  • thead：table head，表格的头部。内部嵌套tr>th。
  • tbody：table body，表格的主体。内部嵌套tr>td。
  • tfoot：table foot，表格的页脚。内部嵌套tr>td。 （加载顺序自动按照caption、thead、 tbody、tfoot执行的）

制作技巧

  • 先书写大分区标签结构。
  • 填充每个分区的内部内容
  • 如果有合并单元格内容，进行单元格合并。

表单

表单的作用,组成,功能

  1. 作用：搜集不同类型用户的输入，提供用户输入，点击的小控件。
  2. 组成：表单域，提示信息，表达控件（表达元素）。
  3. 功能：
  • 表单域：容器，容纳所有的提示信息，表达控件，还可以通过定义处理表单数据所用的程序和url链接，以及数据提交到服务器
  • 提示信息：说明性的文字，提示用户进行填写和操作
  • 表单控件：具体的表单功能项。

表单域(form)

属性：

表单域属性

<form action="xxx.php" method="post/get" name="message"> 
提示信息及表单控件书写位置 
</form>

input标签

input标签的type属性

  • text--文本输入框
  • passward--密码输入框
  • radio--单选框
  • checkbox--多选框
  • button--普通按钮
  • reset--重置按钮
  • submit--提交按钮
  • image--图片按钮
  • file--文件上传

label标签及其绑定方式

  • 给一个标签设置id值，然后将label的for属性设置成这个标签的id值，这样就使这个标签与label绑定成功了。
  • 也可以将需要绑定的标签嵌套在label标签内进行绑定。

字符实体

avatar
文章
阅读
粉丝