HTML学习——新手基础篇

最新推荐文章于 2024-09-02 21:32:29 发布

yuanyibujian

最新推荐文章于 2024-09-02 21:32:29 发布

阅读量333

点赞数

文章标签： html

本文链接：https://blog.csdn.net/yuanyibujian/article/details/107519995

版权

HTML学习——day01

HTML最简单的一个代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

实例分析
在这里插入图片描述

HTML 标题

#HTML标题都是通过<h1>-<h6>标签来定义的。数值越大字体符号的大小越小，<h1>最大。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML段落

#HTML段落是通过标签<p>来定义的
<p>这是一个段落</p>
<p>这是另外一个段落</p>

HTML链接

#HTML链接是通过标签<a>来定义的
<a href="https://www.runoob.com">这是一个链接</a>

HTML图像

#HTML图像是通过标签<img>来定义的
<img src="/images/logo.png" width="258" height="39" />

HTML元素
在这里插入图片描述
HTML元素语法

"""
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
"""

HTML属性

"""
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
"""

在这里插入图片描述
标题很重要

"""
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
"""

HTML水平线

#<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

HTML文本格式化标签

"""
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字
"""

HTML“计算机输出”标签

"""
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本
"""

HTML引文，引用，及标签定义

"""
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。
"""

HTML超链接

"""
HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
"""

链接语法

<a href="url">链接文本</a>
"""
链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
"""

#target属性
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
"""
target 属性设置为 &quot;_blank&quot&_blank的区别

"""

HTML_head>元素

"""
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
"""

HTML_title_元素

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

HTML_link_元素

"""
<link>标签定义了文档与外部资源之间的关系
<link>标签通常用于链接到样式表
"""
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML_style_元素

"""
**HTML<style>元素**
<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
"""
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML_meta>元素

"""
meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于 <head> 区域
"""

HTML_script元素

"""
<script>标签用于加载脚本文件，如： JavaScript
"""

HTML head元素

"""
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件
"""

HTML 图像-图像标签（_img>）和源属性（src）

"""
在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址
"""
<img src ="url"alt="some_text">

HTML图像 alt属性

"""
alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

"""
<img src="boat.gif" alt="Big Boat">
"""
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
"""

HTML图像标签

"""
<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

"""

HTML表格

"""
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
"""
<table border="1"> #"0"表示没有边框
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

HTML表格标签

"""
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚
"""

HTML表格

#HTML无序列表
"""
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签
"""
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

#HTML有序列表
"""
有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。
"""
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

#HTML自定义列表
"""
自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
"""
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML列表标签

"""
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述
"""

HTML_div和_span

#HTML 可以通过 <div> 和 <span>将元素组合起来

HTML区块元素

"""
大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>
"""

HTML内联元素

"""
内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>
"""

HTML表单

"""
表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:
"""
<form>
.
input 元素
.
</form>

#文本域
#文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

#密码字段
#密码字段通过标签<input type="password"> 来定义:
<form>
Password: <input type="password" name="pwd">
</form>

#单选按钮（Radio Buttons）
#<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

#复选框
#<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

#提交按钮
#<input type="submit"> 定义了提交按钮.

#当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

HTML表单标签

<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果