两天学完HTML

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/

阅读 158

推荐阅读