HTML学习随笔

BT_zhb

于 2019-07-19 15:44:15 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/BT_zhb/article/details/96476651

版权

最近要做项目需要学点前端相关的知识，于是呢我又要开始我的前端学习了—（手动滑稽^-）
废话不多少开始我的前端学习吧！

以下总结来自w3Shcool（w3Shcool）

1.HTML简介

HTML是用来描述网页的一种语言：

HTML指的是超文本标记语言(Hyper Text Markup Language)；
HTML不是一种编程语言，而是一种标记语言(markup language);
标记语言就是一套标记标签（markup tag）；
HTML 使用标记标签；

HTML标签
- HTML标签是由尖括ier号包围的关键字，比如 < html>
- HTML标签通常是成对出现的，比如<b></b>
- 标签对中的第一个开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
  
  HTML文档=网页
  - HTML 文档描述网页
  - HTML 文档包含HTML 标签和纯文本
  - HTML 文档也被称为网页

实践一下：

<html>
<body>

<h1>我是一个憨批</h1>

<p>我不是一个憨批。</p>

</body>
</html>

显示结果：
在这里插入图片描述
例子解释

<html>与 </html> 之间的文本描述网页
<body> 与</body>之间的文本是可见的页面内容
<h1>与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

2.HTML编辑器选择

因为我也就是做项目需要用到一点，也没必要选择多么专业的编辑器Notrpod就ok了

步骤一：打开Notepod
步骤二：在Notepod 中输入HTML代码
步骤三：保存 HTML
步骤四：在浏览器上运行这个HTML文件

3. HTML 基础

HTML标题(heading)是通过<h1>-<h6>等标签来定义的。

< h1>是最大标题，< h6>是最小的标题。
< !–“注释”>用来注释

HTML段落是通过<p>标签来进行定义的。

HTML 折行
< p>This is< br/>a para< br/>graph with line breaks< /p>
- HTML连接是通过<a>标签来定义的。

<a href="https://hanghangbo.github.io/HangHangbo/"> This is a link <a>

在href 属性中指定连接的地址。

  - HTML图像是通过&lt;img&gt;标签来定义的

<img src="xxxxx.jpg" width="xxx" height="xxx" />

图像的名称和尺寸都是以属性的形式提高

4. HTML元素

 HTML的元素就是从开始标签(start tag)到结束标签(enf tag)的所有代码。

开始标签长被称为开放标签（opening tag），结束标签常被称为闭合标签（closing tag）

HTML 元素语法：

HTML 元素以开始标签起始
HTML元素以结束标签终止
元素的元素是开始标签与结束标签的内容
某些HTML元素具有空内容
空元素在开始标签中进行关闭
大多数HTML元素拥有属性

镶嵌的HTML 元素：

大多数HTML元素可以嵌套（可以包含其他HTML元素）

HTML实例解释：

<p>元素

定义HTML文档中的一个段落
这个元素拥有一个开始标签<p>,以及一个结束标签</p>
元素内容是两者中间部分

<boby>元素

定义了HTML文档的主体。
这个元素拥有一个开始标签<boby>和一个结束标签</boby>
元素内容就是另个元素<p>

 - &lt;html&gt;元素
 >定义了整个html文档
 >这个元素拥有一个开始标签&lt;html&gt;以及一个结束标签&lt;/html&gt;
 >元素内容就是boby元素

不能忘记结束标签
空的HTML元素
没有内容的HTML元素都被称为空元素，空元素始在开始标签周昂关闭的。
<br>就是没有哦关闭标签的空元素（<br>标签定义换行）。
在XHTML，XML以及未来的HTML中，所有的元素都必须关闭。
在开始标签中添加斜杠，例如<br/>，就是关闭空元素的方法，即使<br>在所有浏览器中都是有效的，但使用<br/>其实是更长远的保障。

5.HTML属性

属性为HTML元素提供附属信息。属性总数以对称/值对的形式出现，比如：name=”value“。
属性总是在HTML元素的开始标签中规定。

//链接
<a href="https://hanghangbo.github.io/HangHangbo/">This is my blog！</a>
//定义标题开始，slign 可以居中
<h1 align="center">
//换背景颜色
<body bgcolor="yellow">

6.HTML样式

style 属性用于改变HTML的样式

改变显示的字体的颜色，大小等；
改变背景颜色等。
style 属性淘汰了旧的“align”属性

改为< h1 style=“text-align:center”>This is a header</h1>

<html>
<body style="background-color:PowderBlue;">

<h1>Look! Styles and colors</h1>

<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>

<p style="font-family:times;color:green">
This text is in Times and green</p>

<p style="font-size:30px">This text is 30 pixels high</p>

</body>
</html>

效果如图：
在这里插入图片描述

7.HTML 链接

链接的HTML代码很简单，例如：

<a href="https://hanghangbo.github.io/HangHangbo/"> 我的播客主页</a>

点击这行代码生成的链接会直接吧用户带到我的在播客主页
href属性规定链接大的目标。开始标签和结束标签之间的文字被作为超链接来显示。

target属性
使用Target属性，你可以定义被链接的文档在何处显示。

<a href="https://hanghangbo.github.io/HangHangbo/" target ="_blank"> 我的播客主页</a>

上面这行代码显示为：我的博客主页

HTML链接 - name 属性
name 属性规定锚（anchor）的名称，可以使用name属性创建HTML页的书签。

书签不会以任何特殊的方式显示，对读者是不可见的。（可以用id代替name，命名同样有效）
在HTML文档中对锚进行命名（创建一个书签）

<a name="tips">基本的注意事项 - 有用的提示</a>

在同一个文档里创建一个指向该锚的链接

<a href="#tips">有用的提示</a>

在其他页面中创建指向该锚的链接

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了

BT_zhb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习随笔

最近要做项目需要学点前端相关的知识，于是呢我又要开始我的前端学习了—（手动滑稽-）废话不多少开始我的前端学习吧！以下总结来自w3Shcool（w3Shcool）1.HTML简介HTML是用来描述网页的一种语言：HTML指的是超文本标记语言(Hyper Text Markup Language)；HTML不是一种编程语言，而是一种标记语言(markup language);...
复制链接

扫一扫