当前位置:   article > 正文

前端入门 - 从HTML开始

html开始

一. 什么是HTML?

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

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

二. HTML 标签

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

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

三. HTML语法结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

四. HTML 语法执行顺序

从上至下

五. HTML 基本标签

1. 标题标签

<h>系列

<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

页面展示:
在这里插入图片描述

2. 段落标签

<p></p>

<p>这是段落标签</p>
<p>这是段落标签</p>
  • 1
  • 2

页面展示:
在这里插入图片描述

3. 行内标签

<span></span>

<span>这是一行!</span>
<span>这是一行!</span>
  • 1
  • 2

页面展示:
在这里插入图片描述

4.换行标签

<br/>

<span>这是一行!</span>
<br/>
<span>这是一行!</span>
  • 1
  • 2
  • 3

页面展示:
在这里插入图片描述

5. 水平线分割标签

<hr/>

<hr/>
  • 1

页面展示:
在这里插入图片描述

6. 上标,下标

上标:<sup></sup>
下标:<sub></sub>

M<sup>2</sup>
<br/>
H<sub>2</sub>O
  • 1
  • 2
  • 3

页面展示:
在这里插入图片描述

7. 加粗标签

<strong></strong>

<p>未加粗</p>
<strong>加粗</strong>
  • 1
  • 2

页面展示:
在这里插入图片描述

8. 标记标签

<em></em>

<em>标记标签</em>
  • 1

页面展示:
在这里插入图片描述

9. 引用标签

<q></q>

<q>引用标签</q>
  • 1

页面展示:
在这里插入图片描述

10.块级标签

<div></div>

<div>块级标签</div>
<div>块级标签</div>
  • 1
  • 2

页面展示:
在这里插入图片描述

11. 有序列表

<ol>
    <li>标签</li>
    <li>标签</li>
</ol>
  • 1
  • 2
  • 3
  • 4

页面展示:
在这里插入图片描述

12. 无序列表

ul无序列表变迁默认类型为type="disc",黑色实心圆点
type="circle",黑色空心圆点
type="square",黑丝实心方块

<ul>
    <li>标签</li>
    <li>标签</li>
</ul>
  • 1
  • 2
  • 3
  • 4

页面展示:
在这里插入图片描述

13. 定义列表

<dl>
    <dt>一级</dt>
    <dd>二级</dd>
    <dd>二级</dd>
    <dt>一级</dt>
    <dd>二级</dd>
    <dd>二级</dd>
</dl>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

页面展示:
在这里插入图片描述

14. 文本显示方向

<bdo></bdo>

<bdo dir="ltr">从左开始</bdo>
<br/>
<bdo dir="rtl">从右开始</bdo>
  • 1
  • 2
  • 3

页面展示:
在这里插入图片描述

15. 常用特殊符号

&nbsp;空格
&gt;大于号(>)
&lt;小于号(<)
&quot;引号(")
&copy;版权号(©)

16. 注释

<!---->

<!--内容-->
  • 1

不会在页面进行显示

六. a 超链接标签

1. 超链接

<a href="" target="">跳转</a>
  • 1
  • href:链接指向的页面的 URL。
  • target:打开链接的方式。默认为_sel。
    _self:在本页面打开链接。
    _blank:在新的页面打开链接。
  • download:下载超链接目标。

2. 锚点设置

  • 回到页面顶部
 <a href="#top">顶部</a>
  • 1
  • 回到页面指定位置
 <p id="aaa">跳到这里</p>
 <a href="#aaa">指定位置</a>
  • 1
  • 2

七. img 图片标签

<img src="" alt="">
  • 1
  • src:必需的属性。它的值是图片的URL地址,也就是图片路径地址。
  • alt:图像的替代文本。如果图片因为某些原因无法显示,浏览器将显示代替文本。
  • title:鼠标放上去显示的文字。
  • width:设置图片的宽度。
  • height:设置图片的高度。
  • align:图片的对其方式。
    top:以顶部对其。
    right:以右面对其。
    buttom:以底部对其。
    left:以左边对其。
    middle:中间显示。

八. 媒体标签

1. audio 音频标签

<audio src=""></audio>
  • 1
  • src:必需的属性。它的值是音频的URL地址,也就是音频路径地址。
  • autoplay:自动播放
    autoplay=“autoplay”
  • controls:控制台
    controls=“controls”
  • hidden:隐藏控制台
    hidden=“hidden”
  • loop:每当音频结束时重新开始播放
    loop=“loop”

2. video 视频标签

<video src=""></video>
  • 1
  • src:必需的属性。它的值是视频的URL地址,也就是视频路径地址。
  • autoplay:自动播放
    autoplay=“autoplay”
  • controls:控制台
    controls=“controls”
  • hidden:隐藏控制台
    hidden=“hidden”
  • loop:每当音频结束时重新开始播放
    loop=“loop”
  • height:视频播放器的高度
  • width:视频播放器的宽度

3. embed 嵌入标签

  <embed src="" type=""></embed>
  • 1
  • src:嵌入内容的 URL
  • type:嵌入内容的类型
  • height:嵌入内容的高度
  • width:嵌入内容的宽度

九. marquee 飘动标签

用来插入一段滚动的文字。目前此标签已经过时,不推荐使用。

<marquee>飘动内容</marquee>
  • 1
  • loop:飘动的次数
  • scrollamount:飘动的速度
  • direction:飘动方向
    left:从右向左
    right:从左向右
  • direction:飘动方向
  • behavior:滚动方式
    scroll:循环滚动,默认。
    slide:滚动一次
    alternate:两端来回滚动

十. table 表格标签

<table>
    <caption>表头</caption>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    <tr>
        <td>一行一列</td>
        <td>一行二列</td>
        <td>一行三列</td>
    </tr>
    <tr>
        <td>二行一列</td>
        <td>二行二列</td>
        <td>二行三列</td>
    </tr>
</table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • caption:表头
  • th:文本自动居中、加粗
  • tr:控制表格的行
  • td:控制行中的单元格(列)
  • border:表格的边框线
  • bgcolor:背景颜色
  • width:表格的宽度
  • height:表格的高度
  • cellpadding:单元格的内容与单元格之间的距离
  • cellspacing:单元格与单元格之间的距离
  • rowspan:设置单元格所占的行数(设置 td)
  • colspan:设置单元格所占的列数(设置 td)
  • align:设置文本的对齐方式(设置 td)
    left:左对齐
    center:居中对齐
    right右对齐

十一. form 表单标签

<form action="http://www.baidu.com">
    <input type="submit" value="提交">
</form>
  • 1
  • 2
  • 3
  • action:表单提交的URL地址
  • method:表单的提交方式
    get:默认的提交方式。提交的数据会显示在地址栏上。
    post:提交的数据不会显示在地址栏上,传送的数据一般不受限制。
  • name:表单的名称

十二. input 输入标签

<input type="">
  • 1
  • type: input 元素的类型
  • value:input 元素的初始值
  • placeholder:帮助用户填写输入字段的提示
  • maxlength:输入字段中的字符的最大长度
  • size:输入字段的宽度
  • name:input 元素的名称

1. text 文本框

<input type="text">
  • 1

2. password 密码框

<input type="password">
  • 1

以小黑点形式显示输入的内容,比较安全。

3. file 文件上传

<input type="file">
  • 1
  • multiple:多选
    multiple=“multiple”

4. radio 单选框

<input type="radio" name="sex" /><input type="radio" name="sex" />
  • 1
  • 2

name名称相同情况下,只能单选

5. checkbox 多选框

<input type="checkbox" name="fruits">西瓜
<input type="checkbox" name="fruits">香蕉
<input type="checkbox" name="fruits">葡萄
  • 1
  • 2
  • 3
  • checked:默认选择的
    checked=“checked”
  • disabled:不可选的,禁止选择
    disabled=“disabled”

6. image 图片

<input type="image" src="" alt="错误" />
  • 1
  • src:图片的URL地址
  • alt:图片无法显示情况,提示的文字

7. submit 提交按钮

<input type="submit" value="提交">
  • 1

提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

8. reset 重置按钮

<input type="reset" />
  • 1

重置按钮会清除表单中的所有数据。

9.普通按钮

<input type="button"  onclick="to()" />
  • 1

定义可点击的按钮,但没有任何行为。可以结合onclick事件使用。

十三. textarea 文本域

<textarea rows="3" cols="20">
	这是一个文本域。。
</textarea>
  • 1
  • 2
  • 3
  • rows:文本区内的可见行数
  • cols:文本区内的可见宽度
  • maxlength:文本区域的最大字符数
  • placeholder:文本区域预期值的文字提示
  • readonly:文本区为只读

十四. select 选择列表

1.选择列表

select>
    <option>葡萄</option>
    <option>香蕉</option>
    <option>西瓜</option>
</select>
  • 1
  • 2
  • 3
  • 4
  • 5
  • size:下拉列表中可见选项的数目
  • name:下拉列表的名称
  • disabled:禁止该下拉列表项(设置option)
  • selected:选项(在首次显示在列表中时)表现为选中状态

2.选项组

<select>
    <optgroup label="一组"></optgroup>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <optgroup label="二组"></optgroup>
    <option>D</option>
    <option>E</option>
    <option>F</option>
</select>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • label:定义当使用 时所使用的标注,选项组的名称。

十五. 行内标签、块级标签、行内块标签、行标签与块标签相互转换

1. 行内标签

可以多个标签存在一行,不能直接设置行内标签的宽、高,完全靠内容撑开宽和高。
常用的行内标签:
<span><a><big><em><i><lable><input><select><small><strong><sub><sup><u><textarea><img>

2. 块级标签

独占一行,可以设置宽、高。
如果不给宽度,块级标签的宽度将默认为浏览器的宽度,即100%。
常用的块级标签
<div>h系列、 <li><p><form><ul><ol><table><hr><address><dl><dt><dd>

3. 行内块标签

结合行内和块级标签的优点,不仅可以对宽、高属性生效,还可以多个标签存在一行显示。

常用的行内块标签:
<img>

4. 行标签与块标签相互转换

  • 行标签转块标签:
display:block;
  • 1
  • 块标签转行标签:
 display:inline;
  • 1
  • 转换为行内块标签:
 display:inline-block;
  • 1

十六. HTML三种常见页面布局方式

1. Frameset 布局

一些常见的后台管理系统大部分是用 Frameset 来布局的,所以固定了结构类的布局用 Frameset 来实现比较好。

2. Table 布局

是一种旧的布局方式,在现在的项目中还是很常见,Table 实际上它更适合做数据的展示,而非布局。但在 DIV + CSS 布局还没有流行起来之前,大量的网站是 Table 来布局。包括现在依然有人在使用。
缺点:

  1. Table 布局的话,只有把 Table 内的所有内容加载完成了,才会加载样式,所以加载速度要慢一些。
  2. Table 布局属于表格形式,不利于SEO优化。
  3. Table 对于页面布局来说,从语法上看是不正确的。

3. DIV 布局

现在最流行的一种布局方式,它相比比 Table 更灵活,定位比 Table 更好用,简单,修改起来也方便。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/629907
推荐阅读
相关标签
  

闽ICP备14008679号