HTML总结

HTML上局部

网页开发相干概念

  • 网站和网页的关系
  1. 网站是由多个网页组成的。
  • 什么是网页？
  1. 应用HTML语法编写的html文件，文件后缀是.html或者.htm
  2. 内容蕴含文字、链接、音频、视频等
  3. 应用浏览器关上查看

总结：

  • 网页就是一个 后缀为 html的文件，由浏览器负责解析生成图形界面
HTML简介
  • html是超文本标记语言（Hyper Text Markup Language ）。

超文本是什么意思？

  • 超文本是指能够链接到另一个文档或文本.

网页的造成：

网页是由许多html标签包裹文字拼起来的。

HTML语法标准：

HTML是一种超文本标记语言，由固定的HTML标签组成

HTML标签 分类

单标签：有些非凡的标签必须是单个呈现 如<img /> （就如同当初的我，据说独身的人都很优良）

双标签：标签成对呈现，如<html></html> 成双成对

标签有两种关系：

蕴含关系(父子)

<head>    <title></title></head>

并列关系(兄弟)

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

HTML根本构造

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>我的第一个网页</title></head><body>   <!-- body和/body标签之间是写html标签的中央 -->  <!-- 这里写内容标签（这是正文，网页上看不到，是给咱们程序员看的） -->    <h1>我是一级题目</h1></body></html>
  • 每个网页都会有一个根本的构造标签，（就像你上学要买书包，本子，笔一样）
  • html标签 是根标签
  • head标签：是页面头部
  • title标签：页面的题目
  • body标签：页面的主体。

开发环境

前端开发神器 vscode

下载地址: https://code.visualstudio.com...

好用插件（插件不宜过多，装置的多了升高vs code 性能）

Chinese 汉化包

open in browser 编辑页面右键浏览器关上

Matertial Icon Theme 文件图标

vs code 设置

新建文件：ctrl + n

保留文件 ctrl+s,留神文件后缀为.html

放大放大代码字体：ctrl+加号键 或减号键

浏览器：

首选谷歌

chrome

下载地址：https://www.google.cn/intl/zh...

HTML罕用标签

  • 题目标签
  • 正文标签
  • 段落标签
  • 换行标签
  • 列表标签
  • 图片标签与相对路径
  • 音频与视频标签
  • 超链接标签

题目标签

h1~h6

大小关系

h1>h2>h3>h4>h5>h6

<h1>    我是一级题目，我最大</h1><h6>    我是六级标签，我最小</h6>

特点：

  1. 每个题目独占一行
  2. 题目的文字 加粗，字号加大

正文：

  • 场景：咱们写代码的时候代码多了，所以留下正文阐明这段代码的作用
  1. 给其余开发者看
  2. 给本人看

语法快捷键：ctrl + /

<!-- 我是正文 --><!-- 我也是     正文-->

特点：

  1. 正文标签 只能在源码中看到
  2. 浏览器会疏忽正文中的内容，不会显示给用户看
段落与换行标签：

段落场景：文章内容须要

分段显示

语法：

<p>我是一个段落</p>

特点：

  1. 前后换行，段落间主动空行
  2. 浏览器宽度不够时主动换行
换行
场景：    如果心愿某段文字强制换行显示，就能够应用换行标签语法：1.单标签2.换行，不空格
列表
列表场景：    列表标签次要用来自在布局显示数据列表特点：    参差、有序布局时不便三种列表：    1.无序列表    <ul>    <li></li>...    </ul>    2.有序列表    <ol>    <li></li>...    </ol>        3.自定义列表    <dl>    <dt></dt>    <dd></dd>    <dd></dd>    <dt></dt>...    <dd></dd>    <dd></dd>    </dl>    ul中只能放li 比方    ol中只能放li 比方     dl中只能放dt和 dd 留神dt和dd是兄弟关系，常常一个dt对应多个dd

图像标签与相对路径

图像

场景：在网页中插入指定门路的图片

语法：

<img src = "图片门路">

相对路径的三种分类

同级门路 符号 ./

下一级门路 符号 ./

上一级门路 符号 ../

音频标签
<audio src="音乐地址" controls> </audio>

兼容写法

<audio controls>    <source src="不同格局后缀门路">    <source src="不同格局后缀门路">    您的浏览器不反对 audio,降级浏览器，或者点击<a href="音频压缩包地址">下载音频</a></audio>
视频标签

语法：

<video src="门路" controls></video>

兼容写法

<video>    <source src="">    <source src="">    您的浏览器不反对 audio,降级浏览器，或者点击<a href="音频压缩包地址">下载音频</a></video>
链接标签
<a href="跳转指标" ></a><!-- 在新窗口关上 --><a href="跳转指标" target="_blank"></a>
符号实体

罕用实体符号

空格 &nbsp;大于号 &gt;小于号 &lt;版权 &copy;

HTML下半局部

元数据及作用

元数据标签：形容网页相干信息的数据，如网页编码、关键词、形容信息、等（搜索引擎优化网站优化）

设置关键字：

<meta name="keywords" content="定义搜寻关键词，有利于搜索引擎收录">

设置网页内容形容：

<meta name="descripton" content="形容网站做什么的">

设置网页重定向：

<meta http-equiy="refresh" content="3，url=http://baidu.com">

lang语言品种

作用：标识 文字内容 所应用的语言

语法：

<html lang="语言代码">    ...</html><!-- 语言代码有 zh-CN 中文简体    ja 日文    en 英文-->

字符集

语法：

<meta charset="UTF-8">

个别都用UTF-8

表格

根本语法：

 <table>    <tr>      <td>单元格内容</td>      <td>单元格内容</td>      ...    </tr>    ...  </table>

table 标签：定义表格

tr标签：定义表格行

td标签：定义表格单元格

表格合并单元格
  • 跨行合并（纵向合并）：rowspan = "要合并的单元格个数"
  • 跨列合并（横向合并）：colspan = "要合并的单元格个数"
表格构造标签：

标签解释：

  • thead 标签：定义表格头(简单的表格头能够有多行)
  • tbody 标签：定义表格主体，次要用来蕴含数据(一个表格能够有多个表格主体)
  • tfoot 标签：定义表格脚，次要用来蕴含统计数据(用的少)

属性：

border：表格边框 cellspacing：单元格间的间距

cellpadding：单元格的内容与其边框的内边距 align：表格的对齐形式，通常是left，center，right

bgcolor：表格的背景色彩 background：表格的背景图片

width：表格宽度 height：表格高度

border-collaspe：collaspe：边框合并，不叠加 cellspacing：0：边框合并，但合并之后的边框宽度等于前两个边框宽度之和

caption：表格题目（写在table标签中最后面）

表单

<form action="提交网址">  <!-- 文字，表单控件 -->  </form>

百度搜寻w3shool网址查看http://www.w3s.com.cn/