HTML学习笔记--第一天

1界面基本结构

<!DOCTYPE HTML>
<html><head><title>这里是标题</title></head><body></body>
</html>

HTML存在有版本差异
HTML5的头部

<!DOCTYPE HTML>

其他版本

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

页面标签

meta标签

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

<meta charset="utf-8"/><!--网页解析编码格式配置(HTML5):告诉浏览器使用指定的编码格式解析文档-->
<!--HTML4:文档编码格式设置-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!--网页关键字-->
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
<!--网页描述-->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<meta name="author" content="白大神"/><!--网页作者-->
<!--网页自动跳转 5秒跳转到百度-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<!--width=device-width ：表示页面宽度是设备屏幕的宽度 initial-scale=1.0：表示初始的缩放比例 minimum-scale=0.5：表示最小的缩放比例 maximum-scale=1.0：表示最大的缩放比例 user-scalable=no：表示用户是否可以调整缩放比例。
-->

<h1>----<h6>标签定义了六个不同级别的标题
<p></p>标签段落标签其中的内容为一段结束时自动换行并且段与段之间的行间距增大
<hr/> 横线
<br/> 换行
<div></div> 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)，它应该在没有任何其它语义元素可用时才使用 (比如 <article> 或<nav>) 。
<span></span>元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个块元素而\ <span> 则是行内元素。

文本格式化标签

b和strong 粗体
i和em 斜体
s和del 加删除线
u和ins 加下划线

标签的属性
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。

<img src="../imgs/wo.jpg" alt="这里需要显示一张图片" width="200px" height="200px" border="5px">

超链接标签

<a href="news.html" target="_self">这是一个超链接</a>

href：表示链接的地址地址可以时内部地址也可使外部地址

<a href="http://www.baidu.com" target="_self">跳转到百度</a>

  <a href="#two" target="_self">跳转到百度</a><p id="one">Reference的缩写。意思是超文本引用target：打开的目标：_self 在当前窗口打开_blank 在新窗口中打开
注意：
1.外部链接 需要添加 http:// www.baidu.com
2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

base标签
base 可以设置整体链接的打开状态
base 写到 <head> </head> 之间

<base target="_blank">

转义字符
例如空格无论在编辑器中加多少个空格在页面显示只显示一个空格
如果想要显示多个空格可使用转义字符
路径：
实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为：相对路径和绝对路径
相对路径
图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=“logo.gif” />。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src=“img/img01/logo.gif” />。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="…/logo.gif" />。
绝对路径
绝对路径“D:\web\img\logo.gif”，或完整的网络地址。

HTML学习笔记--第一天相关推荐

《Go语言圣经》学习笔记第一章 Go语言入门
Go语言圣经学习笔记第一章 Go语言入门目录 Hello, World 命令行参数查找重复的行 GIF动画获取URL 并发获取多个URL Web服务本章要点注:学习<Go语言圣经&g ...
编译原理（龙书）学习笔记第一章
编译原理(龙书)学习笔记第一章 1.1语言处理器解释器(interpreter) : 编译器(compiler): 一个语言处理系统练习 1.1.1:编译器和解释器之间的区别 1.1.2:相对优 ...
惯性导航系统学习笔记——第一讲
惯性导航系统学习笔记第一讲惯性导航系统概述一.惯性导航基本概念二.惯性导航基本原理三.惯性导航应用与发展四.小结第一讲惯性导航系统概述本文为学习朱家海教授<惯性导航系统> ...
Pyhton学习笔记第一天(Python基本语句)
Python学习笔记第一天注释行注释块注释输出语句举一反三标识符举一反三多行语句结束语注释什么是注释,注释相当于备注的信息,也可以在调试代码的时候隐藏执行代码,但只适合新手.老手 ...
Mybatis学习笔记——第一天
Mybatis学习打卡 Mybatis学习笔记---第一天 Mybatis笔记第一天一.引言 1. 现有Jdbc的缺陷 2. Mybatis框架 3. 搭建环境 1) 引入jar包 2) 引入配置 ...
小吴的《机器学习周志华》学习笔记第一章绪论
小吴的<机器学习周志华>学习笔记第一章绪论近一年时间接触到不少机器学习的知识,虽然断断续续学了一些,总感觉还没有入门(只学会了疯狂调包).因此,最近开始系统学习Machine Le ...
【PSCAD学习笔记第一期】建立一个Bergeron Model
[PSCAD学习笔记第一期]建立一个Bergeron Model Step1-创建一个TLine组件在想要添加组件的工作区右击,选择Component Wizard 在弹出的界面选择Transmis ...
数据库学习笔记第一弹——MySQL8.0和MySQL5.7的下载、安装与配置（图文详解步骤2022）
数据库学习笔记第一弹--MySQL8.0和MySQL5.7的下载.安装与配置(图文详解步骤2022) 文章目录数据库学习笔记第一弹--MySQL8.0和MySQL5.7的下载.安装与配置(图文详解步 ...
计算机网络学习笔记---第一章
计算机网络学习笔记第一章文章目录计算机网络学习笔记第一章前言一.计算机网络的概念 (一)计算机网络的功能 1.数据通信(连通性) 2.资源共享(硬件软件数据) 3.分布式处理 (Had ...
机器人导论（第四版）学习笔记——第一章
机器人学导论(第四版)学习笔记--第一章 1. 概述 1.1 背景 1.2 操作臂力学和控制 1.3 符号 1. 概述 1.1 背景工业自动化的发展带来了工业机器人的高速发展.本书聚焦机械臂的力学和 ...

HTML学习笔记--第一天

页面标签

HTML学习笔记--第一天相关推荐

最新文章

热门文章