HTML快速自学教程(W3school教程精简)

HTML快速自学教程

前言

快开学了,下学期本人想学一点前端的技术,找了些关于前端的入门学习路线,准备以HTML ,CSS,Javascript ,Vue框架这个顺序入门一下,日拱一卒,故将学习过程写成博客发在CSDN上,你我共勉。

HTML部分据说比较简单,所有内容将都放在这个帖子内

目录

教程笔记

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

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如
  • HTML 标签通常是成对出现的,比如
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

实例

<html>
<body>

<h1>我的第一个标题h1>

<p>我的第一个段落。p>

body>
html>

效果图
HTML快速自学教程(W3school教程精简)_第1张图片
之间的文本描述网页
之间的文本是可见的页面内容

之间的文本被显示为标题

之间的文本被显示为段落

通过四个实例,了解HTML基础

  • 标题
    通过

    定义大小
    类似于Markdown语法中的 #

<html>

<body>

<h1>This is heading 1h1>
<h2>This is heading 2h2>
<h3>This is heading 3h3>
<h4>This is heading 4h4>
<h5>This is heading 5h5>
<h6>This is heading 6h6>

body>
html>

HTML快速自学教程(W3school教程精简)_第2张图片

  • 段落
    通过

    组合定义
<html>
<body>

<p>这是段落。p>
<p>这是段落。p>
<p>这是段落。p>

<p>段落元素由 p 标签定义。p> 

body>
html>

HTML快速自学教程(W3school教程精简)_第3张图片

<html>
<body>

<a href="https://blog.csdn.net/Jimobbb">Jimobbb的CSDN博客a>

body>
html>

在这里插入图片描述

  • 图像
    标签会控制图像
    其中的src后面是图片的地址,widthheight是图片的长宽,具体显示如下
<html>
<body>

<img src="https://img-blog.csdnimg.cn/20200730152536368.png" width="700" height="300" />

body>
html>

HTML快速自学教程(W3school教程精简)_第4张图片

HTML 文档是由 HTML 元素定义的。
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
例如段落的开始标签

和结束标签


大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文档由嵌套的 HTML 元素构成。
例如最简单的

<html>

<body>
<p>This is my first paragraph.p>
body>

html>

其中嵌套了

三个元素

空标签
为没有关闭标签的空元素

为关闭空元素的正确方法

PS:HTML对大小写不敏感

属性为 HTML 元素提供附加信息
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name=“value”
属性总是在 HTML 元素的开始标签中规定。

例如:HTML 链接由 标签定义。链接的地址在 href 属性中指定:

This is a link

例2:

定义标题的开始。

拥有关于对齐方式的附加信息。
效果如下(Markdown格式兼容HTML):

This is heading 1

例3:
定义 HTML 文档的主体。
拥有关于背景颜色的附加信息。

例4:

定义 HTML 表格
拥有关于表格边框的附加信息。

除了之前的

方法外,标题可以有别的添加

标签在 HTML 页面中创建水平线。

<p>hr 标签定义水平线:p>
<hr />

效果如下

hr 标签定义水平线:


会出现一个下划线

HTML 注释
如下:
和其他语言的注释一样,注意格式就好

除了基本的用法外,段落还有别的用法
在不产生一个新段落的情况下进行换行(新行),请使用
标签:
例如:

This is
a para
graph with line breaks


效果如下:

This is
a para
graph with line breaks

使用style 可以调整字体的样式

  • 调整颜色
    使用"background-color = xxxx"的格式,可以定义标题或段落或背景的颜色
<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a headingh2>
<p style="background-color:green">This is a paragraph.p>
body>

html>

效果:
HTML快速自学教程(W3school教程精简)_第5张图片

  • 调整字体尺寸颜色
    font-familycolor 以及 font-size 属性分别定义,如下:
    不同属性中间用;隔开
<html>

<body>
<h1 style="font-family:verdana">A headingh1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.p>
body>

html>
  • 文本对齐
    text-align 规定了文本对齐,属性是center就是居中
    例:

This is a heading

This is a heading

最基本的链接,采用标签,但可以加入一些属性限定,例如:

<a href="http://www.w3school.com.cn/">Visit W3Schoola>

href后面接网页的url链,中间用<>隔开的是超链接的显示名,如下:
Visit W3School

Target 属性,可以定义链接点击后会在哪里出现,例如
target = "_blank" 代表着在新标签页中打开

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!a>

Visit W3School!

name属性中规定 锚 的用处。
可以用"label" 表示显示在页面上的文本
可以用"tips" 之类创建一个标签
这之后,再采用href="#tips"

<a name="label">锚(显示在页面上的文本)a>
<a name="tips">基本的注意事项 - 有用的提示a>
<a href="#tips">有用的提示a>

锚(显示在页面上的文本)
基本的注意事项 - 有用的提示
有用的提示

定义图片的基本语法是
其中,如果图片不能加载出来,最好使用属性alt后面进行标注
比如:

<img src="boat.gif" alt="Big Boat">

其中因为图片url地址不对,是显示不出来的,就有了以下的效果

设置背景的标签属性如下,在之中定义

<body background="/i/eg_background.jpg">
body>

排列图片与字的位置,如下表示align采用五种标签,需要记住

<p>图像 <img src="https://www.w3school.com.cn/i/eg_cute.gif" align="bottom">p>
<p>图像 p>
<p>图像 p>
<p>
 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
p>
<p>
 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
p>

图像

图像

图像

带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。

带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

HTML快速自学教程(W3school教程精简)_第6张图片

对于图片的大小,采用widthheight标签,按像素为尺寸

<img src="https://www.w3school.com.cn/i/eg_mouse.jpg" width="200" height="200">

也可以将图片作为链接使用,这时候我需要将图片嵌套到链接中

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
a>

因为是嵌套的,所以图片会被认定为指向这个url地址的链接。点击图片相当于链接一样跳转

表格由

标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 进行占位,如下:

<table border="1">
<tr>
<td>row 1, cell 1td>
<td>row 1, cell 2td>
tr>
<tr>
<td> td>
<td>row 2, cell 2td>
tr>
table>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
例1:

<table border="1">
<tr>
<td>row 1, cell 1td>
<td>row 1, cell 2td>
tr>
<tr>
<td>row 2, cell 1td>
<td>row 2, cell 2td>
tr>
table>

效果如下

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
(理论上应该是没有边框的)

表格的表头使用

标签进行定义。
例如加入表头后

<table border="1">
<tr>
<th>Headingth>
<th>Another Headingth>
tr>
<tr>
<td>row 1, cell 1td>
<td>row 1, cell 2td>
tr>
<tr>
<td>row 2, cell 1td>
<td>row 2, cell 2td>
tr>
table>
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表格会变成这个样子。
对于空单元格,我们使用

 
row 1, cell 1 row 1, cell 2
  row 2, cell 2

和Markdown一样,列表分为有序和无序列表
无序列表如下表示

<ul>
<li>Coffeeli>
<li>Milkli>
ul>
  • Coffee
  • Milk
有序列表如下表示
<ol>
<li>Coffeeli>
<li>Milkli>
ol>
  1. Coffee
  2. Milk

自定义列表以

标签开始。每个自定义列表项以
开始。每个自定义列表项的定义以
开始。

<dl>
<dt>Coffeedt>
<dd>Black hot drinkdd>
<dt>Milkdt>
<dd>White cold drinkdd>
dl>
Coffee
Black hot drink
Milk
White cold drink

你可能感兴趣的:(前端探索,html)