HTML标签学习基础新人笔记

1. HTML 语法规范

htlml标签由尖括号包围例如<html>.大多数标签成对出现，例如<html></html>。<br/>是单标签。

2.标签关系

关系分为：包含和并列关系。

包含关系：

<head>

</head>

并列关系:

3. HTML基本结构标签

<htm>为根标签、、<head>为头部标签、<title>为网页标题、<body>为网页主干。

<html>

<head>

<title>这是第一个页面</title>

</head>

<body>

键盘敲烂，工资过万。

</body>

</html>

4 开发工具

有dw、subime、webstorm、hbuilder、vscode几种开发工具。

ctrl+n新建文件保存（ctrl+s）保存为.html文件。右击 "open in bowser"在网页中打开。

<!DCOTYPE>文件类型声明，作用是告诉浏览器使用那个版本的html来显示网页。<DOCTYPE html> 表示使用html5来显示页面。

<html lang="en">定义文档显示的语言。en定义语言为英文，zh-CN定义语言为中文

HTML常用标签

标签的语义

标签的语义指的就是标签的含义，根据标签的语义，再合适的地方给一个合适的标签，可以是页面变得清晰。

<h1>-<h6>标题标签

作为标题使用，标题独占一行。从大到小。

段落标签和换行标签

用于将HTML分割为不同段落

</br>换行标签

</br>属于单标签，强制换行

文本格式化标签

粗体、斜体或下划线等效果

加粗 <strong></strong>或者<b><b> 推荐使用<strong>语义更加强烈

倾斜 <em></em>或者<i></i> 推荐使用<em>语义更加强烈

删除线 <del></del>或者<s></s> 推荐使用<del>语义更加强烈

下划线 <ins><ins>或者<u><u> 推荐使用<ins>语义更加强烈

<div>和<span>标签

没有语义，它们类似于一个盒子用来装入内容。都是用来进行布局。

div表示分割、分区。span意为跨距。

div独占一行，类似于一个大盒子。

span一行可以放很多个。类似于一个小盒子。

图像标签和路径

1图像标签

<img src="图像"/> src是标签的必须属性，用于指定图像的路径和文件名。

alt替换文本标签当图片无法显示使用文本替换 <img src="1.jpg " alt="输入文字提示 "/>

title提示文本标签鼠标放上图片提示文字 <img src="1.jpg" title="输入文字提示 "/>

width标签

修改图像宽度，<img src="1.jpg " width="000"/>

Height标签

修改图像高度, <img src="1.jpg " height="000"/>

高度宽度只需要修改一个，图片会根据修改等比例缩放。

Border标签

设置图像的边框粗细，<img src="1.jpg " border="000"/>

图像标签

图像标签可以拥有多个属性，必须写在标签名后。

属性之间部分先后顺序，标签名与属性、属性与属性之间需要用空格分开。

属性采取键值对的格式，即key="value"的格式，属性="属性值"。

图像标签和路径

目录文件夹：

根目录：

路径：相对路径和绝对路径

相对路径：以引用的文件所在位置做参考基础，而建立的目录路径。就是图片相对于HTML页面的位置。

同一级路径：图像文件于HTML在同一级文件夹中，<img src="1.jpg"/>

下一级路径：图像文件于HTML在下一级文件夹中，<img src="data:image/1.jpg "/>

上一级路径：图像文件于HTML在上一级文件夹中，<img src="../1.jpg"/>

绝对路径：

绝对路径是指图片的在电脑之中的位置。类似于<img src="c:\user\tupian\1.jpg"/>。

或者是在网络之中的绝对地址。类似于<img src=“http://ww.xxx.com/1.png”/>。

超链接标签

<a href="网页地址" target="目标窗口弹出的方式”>文本或图像</a>

Href

在网页中链接到另一个界面。 <a href="http://www.qq.com">腾讯</a>.

Target

用于指定目标窗口的弹出方式。默认的是_self 当前窗口打开页面， _blank 是在新窗口打开页面,保留之前的界面。

链接分类

1外部链接和内部链接

外部链接是指连接到其他网站页面

例如 <a href="http://www.qq.com" >腾讯</a >

内部链接是指网站内部页面之间的链接，直接链接内部页面名称即可。

例如 <a href="index.html">首页</a>

2下载链接:

下载链接链接的是文件exe或者是zip等压缩包

<a href="img.zip">xiazai</a>

3网页元素的链接图片超链接

4空链接：

5锚点链接：点击网页锚点可以快点跳到页面指定位置

如 <a href="#jieshao">人物介绍</a>

………………………………….

即可点击人物介绍跳转到页面下方的人物介绍模块

Html的注释标签和特殊字符

注释标签

快捷键为 ctrl+/

注释标签中的信息在页面中不会显示，为了帮助程序员阅读理解使用。

特殊字符：

&nbsp 空格字符

一个表示一个空格例如&nbsp；&nbsp；&nbsp；&nbsp；

Lt字符大于号 gt 小于号

HTML标签学习基础新人笔记相关推荐

开始新的学习之旅--PHP开发学习--基础部分笔记
决定学习PHP以来,一直在学习基础知识,看了很多的HTML和CSS的视频,这几周主要在w3schools.com上年HTML5 CSS Javascript的知识. 我有一个习惯:在看知识时得记简单的 ...
TensorFlow1深度学习基础（笔记二）
十四.文件读取流程多线程+队列第一阶段:构造文件名队列 File_queue=Tf.train.string_input_producer(string_tensor,shuffle=True) ...
MOOC《深度学习基础》笔记(一)
chapter1 1.1类别标签的ground truth与gold standard ground truth:可翻译为地面实况等.在机器学习领域一般用于表示真实值.标准答案等,表示通过直接观察收集 ...
强化学习基础知识笔记[6] - DQN
参考资料 [1] 深度强化学习系列第一讲 DQN 本文主要是对该资料学习的笔记,并且加入了一些自己的想法,如有错误欢迎指出. DQN 算法引入 DQN算法在Q-Learning算法上改进而来,具体改 ...
鸟哥的linux私房菜-基础学习篇读书笔记
从事linux工作一年多,算是能够熟练运用linux服务器,但仍觉得自己对Linux的原理,理论缺乏空洞,潜下心来认真阅读尘封的鸟哥经典,知识点很全,收获颇多,实践与知识结合,知行合一,对linux开 ...
Andrew Ng-机器学习基础笔记（下）-Python实现代码
目录前言: 10. 应用机器学习的建议 10.1 决定下一步做什么 10.2 评估一个假设 10.3 模型选择和交叉验证集 10.4 诊断误差和方差 10.5 正则化和偏差/方差 10.6 学习曲线 ...
JAVA基础学习精简心得笔记整理
JAVA基础学习精简心得笔记整理配置java环境变量 Java的运行过程基本数据类型引用数据类型逻辑运算符数组方法重载封装继承多态多态的作用单例设计模式接口interface ...
web前端分享HTML5中的nav标签学习笔记
好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...
Coursera吴恩达《神经网络与深度学习》课程笔记（3）-- 神经网络基础之Python与向量化
红色石头的个人网站:redstonewill.com 上节课我们主要介绍了逻辑回归,以输出概率的形式来处理二分类问题.我们介绍了逻辑回归的Cost function表达式,并使用梯度下降算法来计算最小 ...

HTML标签学习基础新人笔记

HTML标签学习基础新人笔记相关推荐

最新文章

热门文章