学习笔记：HTML基本知识

HTML基本结构

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

head标签

作用：用于定义一些特殊的内容，如：网页标题，定时刷新，外部文件等。

一般只有6大标签放在head标签内：

title 标签 – 作用：定义网页的标题。

meta 标签 – 作用：一般用于定义页面的特殊信息，如页面的关键字，页面描述等。这些信息不是给用户看的，而是用来告诉网页蜘蛛这个页面是做什么的。

link 标签

style 标签

script 标签

base 标签

body标签

在html中，head标签表示我们页面的头部，而body表示我们页面的身体，我么大部分标签都位于body标签内。

HTML注释：< !–表示注释的开始，–>表示注释的结束。

标题标签：在html中，有6个级别的标签：h1, h2, h3, h4, h5, h6。

段落标签：<p>段落文字</p>

换行标签：<br/>

文本标签：

粗体标签：strong <strong>这是粗体文本</strong>>

斜体标签：i <i>这是斜体</i>

上标标签：sup <sup>2

下标标签：sub <sub>2

中划线标签：s <s>中划线</s>

下划线标签：u <u>下划线</u>

大字号标签：big <big>大号字</big>

小字号标签：small <small>小号字</small>

div标签

作用：在html中，我们可以使用div标签来划分HTML结构，配合css来整体控制某一块的样式。

自闭合标签

一般标签：由于有开始符号和结束符号，因此可以在内部插入文字或者其它标签。

自闭合标签：由于只有开始符号没有结束符号，因此不能在内部插入标签或者文字。

块元素与行内元素

块元素：特性：块元素在显示状态将占据一行、块元素可以容纳其它块元素和行内元素。

常见的块元素如下：

标题元素：h1 ~ h6、段落元素：p、div元素：div、水平线：hr、有序序列：ol、无序序列：ul。

行内元素

除了上面常见的块元素，大部分都是行内元素。

特性：行内元素可以与其它行内元素位于同一行、行内元素内部只可以容纳其它行内元素，不可以容纳块元素。

网页中的空格

如果我们想在代码中让文件使用空格隔开，按下‘space键’是无用的，空格也得使用代码实现：&nbsp（一个空格等于三个&nbsp）

列表

列表一共有3种：有序列表，无序列表，定义列表。

有序列表：

语法：

<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>

type属性：

<ol type="属性值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>

属性值1：–>列表符号：12345…

属性值a：–>列表符号：abcde…

属性值A：–>列表符号：ABCDEF….

无序列表：

语法：

<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>

表格

表格一般由3部分组成：表格：table标签、行：tr标签、列：td标签。

语法：

<table>
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
</tr>
</table>

表格标题：<caption>标题</caption>

语法：

<table>
<caption>标题</caption>
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
</tr>
</table>

表头单元格：th

显示上：th和td本质上都是单元格，但是浏览器会以“粗体”和“居中”显示th标签中的内容，td就不会。

语义上：th标签用于表头，td用于表行。

合并行rowspan：我们可以使用rowspan属性来合并行。所谓合并行，就是把“纵向的N个单元格”合并。

语法：<td rowspan=”跨越的行数”></td>

合并列colspan：我们可以使用colspan属性来合并列。所谓合并行，就是把“横向的N个单元格”合并。

语法：<td rowspan=”跨越的列数”></td>

图片标签

我们可以使用img标签来显示一张图片，对于img标签，我们首先得掌握最基本得3个属性：src，alt，title。

src属性：src用于指定图片所在的路径，可以是相对路径，也可以是绝对路径。

语法：<img src=”图片地址”/>

alt属性和title属性：

语法：<img src=”图片地址” alt=”图片描述” title=”图片描述”style=””>

相同点：都用于指定图片的提示内容。

不同点：alt属性用于图片描述，这个描述是给搜索引擎看的。当图片无法显示，页面会显示alt上的文字。title属性也是图片描述，不过是给用户看的，鼠标移到图片上，就会显示title的文字。

建议：在实际开发中，对于img标签，src属性和alt属性两个是必选属性，一定得添加，而title可加可不加。

超链接

在html中我们可以使用a标签来实现超链接。

语法：<a href=”链接地址”>文本或者图片</a>

target属性：

语法：<a href=”链接地址” target=”打开方式”>文本或者图片</a>

属性值：

_self：在原来的窗口打开链接（默认）

_blank：在新窗口打开链接

_parent：在父窗口打开链接

_top：在顶层窗口打开超链接

瞄点链接

当页面过长，此时用户需要不停的拖动浏览器的滚动条才可以看到下面内容。为了用户方便，我们可以使用瞄点链接优化用户体验。

简单理解：所谓的瞄点链接，其实就是超链接的一种，超链接是指向href的地址，瞄点链接是指向元素的id。

语法：<a href=”#id”>推荐文章</a>

表单

在HTML中，表单标签有5种：from，input，textarea，select，option。

我们常说的表单是指：文本框，按钮，单选框，复选框，下拉列表等的统称。

from标签：我们必须把所有的表单标签放在from标签内部。

语法：

<from>各种表单标签</from>

from标签属性：

name属性：在一个页面，表单可能不止一个，每个form标签就是一个表单。为了区分表单，我么使用name属性来给表单命名。

method属性：用于指定表单数据使用哪一种http提交方式。一种是”get”，另外一种是“post”, “get”安全性较差，“post”安全性较高。

action属性：用于指定表单数据提交到哪个地址进行处理。

target属性：和a标签的属性一样，都是用来指定窗口的打开方式。

enctype属性：用于指定表单的数据提交的编码方式，一般文件上传功能才用到。

语法：

<form name="myFrom" method="post" action="action.html" target="_blank">各种表单标签</from>

input标签

input标签是自闭合标签，没有结束符号。

语法：<input type=”属性值” name=”名字” value=”取值”/>

属性值：

单行文本框：test

密码文本框：password

单选框：radio

多选框：checkbox

按钮：button，submit，reset

文件上传：file

多行文本框

单行文本框只能输入一行文本，而多行文本框可以输入多行。在HTML中，多行文本框是使用textarea标签，而不是input标签。

语法：

<textarea rows=="行数" cols="列数"  value="取值">默认内容</textarea>

总结：HTML有三中文本框：单行文本框，多行文本框，密码文本框。单行文本框使用的都是input标签，多行文本框使用的是textarea标签。

下拉列表

下拉列表由select和option这两个标签来配合表示，这一点和无序列表的ui和li使用很像。

语法：

<select 属性>
<option>选项内容</option>
<option>选项内容</option>
...
...
<option>选项内容</option>
</select>

属性：

multiple：设置下拉列表可以选择多项

size：设置下拉列表显示几个列表项，取值为整数

👋 感谢您的观看！

版权声明 1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505

THE END