HTML基础知识学习

最新推荐文章于 2024-08-05 22:35:13 发布

我有元气丹

最新推荐文章于 2024-08-05 22:35:13 发布

阅读量111

点赞数

分类专栏： html 前端文章标签： html html5

本文链接：https://blog.csdn.net/weixin_44517209/article/details/118121746

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

一 Html常用标签

1.HTML文件格式

<html>
<head>
<title>title 元素的内容会显示在浏览器的标题栏中。</title>
<meta charset="UTF-8">
</head>
<body bgcolor="yellow">
<p>body 元素的内容会显示在浏览器中。</p>
<p>p是段落</p>
<h1 align="center">This is heading 1</h1>
<h2>This is heading 2</h2>
<!--这是一段注释。注释不会在浏览器中显示。下面的hr表示水平线-->
<hr /> 水平线
<br /> 换行
<a href="http://www.w3school.com.cn">This is a link</a>
<img src="w3school.jpg" width="104" height="142" />
</body>
</html>

2.html文档基础标签

<!DOCTYPE >定义文档类型，一般为html，但html的版本不同则属性不同
<html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等等。
以下标签都可以添加到 head 部分：title、base、link、meta、script以及 style。
<meta>元素可提供有关页面的元信息，必须在<head>内。
<title> 定义文档的标题
<body> 定义文档的主题（类似文章名字），body 元素包含文档的所有内容
<h1> to <h6> 定义文档的标题（类似章节名字）
<p> 定义段落
<hr /> 水平线
<br /> 换行

3.链接

URL - Uniform Resource Locator
scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

<a> 定义超链接
href是其最重要的属性，指示链接的目标
download规定超链接目标是可以下载的
Target 在何处打开页面

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

您也可以把图像作为链接来使用，点击图片即可跳到指定页面

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

定义文档与外部资源的关系。 Rel 规定当前文档与被链接文档之间的关系。 Type 规定被链接文档的 MIME 类型。 Href 规定被链接文档的位置。

 <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>

4.表格

<table> 定义表格
<tr> 定义表格中几行
<td> 定义表格中的列
<th> 定义表格中的表头单元格。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

5.列表

<ul> 定义无须列表，列表条目无数字

 <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

在这里插入图片描述

<li> 定义列表的项目
<ol> 定义有序列表

<dl> 定义描述列表，我觉得很适合用作词语解释

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

在这里插入图片描述

6.编程标签

<script> 定义浏览器脚本程序，比如js

7.多媒体标签

<img> 定义图像
Src 规定图像的url
Alt 规定图像的替代文本，如果无法显示图像，浏览器将显示文本

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

<canvas> 定义图形容器，您必须使用脚本来绘制图形。
<audio> 定义音频
Src 规定音频的url
Controls 向用户显示控件，比如播放按钮。

<audio src="/i/horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

<video> 定义视频
Src 规定视频的url
Controls 向用户显示控件，比如播放按钮。

<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>

8.Html表单标签

<form> 定义供用户输入的表单
action URL 规定当提交表单时向何处发送表单数据。
method 规定用于发送 form-data 的 HTTP 方法，比如get与post
target 规定在何处打开 action URL，比如在新的页面。
enctype 规定在发送表单数据之前如何对其进行编码。
Value 设置input用作提交按钮时按钮显示的文字
action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。在上面的例子中，指定了某个服务器脚本来处理被提交表单。如果要正确地被提交，每个输入字段必须设置一个 name 属性。

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" name=”按钮” />
</form>

<input> 非常重要定义输入控件，常用于表单之中，用于登录收集用户信息
name 定义 input 元素的名称。
type input 元素的类型，可以是button/checkbox/file/hidden/image/password/text
Value 规定 input 元素的默认值。
会解析成一个输入框

密码类型输入

<form>
  User name:<input type="text" name="username">
User password:<input type="password" name="psw">
</form>

日期类型输入，不过日期类型输入推荐用插件，插件易控制日期格式

<form action="/demo/demo_form.asp">
  生日：<input type="date" name="bday">
        <input type="submit">
</form>

复选框

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

在这里插入图片描述

<select> 定义下拉列表，可放在form表单中提交到后台
name name 规定下拉列表的名称。
Required 规定文本区域是必填的。

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<button> button的语义很明确，就是一个按钮不含数据，作用就是用户交互。
type 一般为submit，规定按钮的类型。
button可以设置name和value。提交表单时，value会被作为表单数据提交给服务器。（不推荐加这俩属性）

<button type="button">Click Me!</button>

input其实是一个由输入控件改装过来的按钮，这源于Web早期的简陋设计。我们给它设置name便可以验证这一点：
<input name='btn' value='ok' type='submit'>会把btn当做参数连在url后提交
所以，我们推荐用button标签定义的按钮来提交表单

9.容器插件

<div>可定义文档中的分区或节，可以把页面分成一个个小块，这些小块可以叫做容器。可以通过css对每一个容器设置不同的外观格式。在父容器中的子容器可以拥有自己的格式。可以通过 <div> 的 class 或 id 应用额外的样式。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
通常用class属性时，css文件中对应样式以 . 开头（可用于多个div）；用id属性，css文件中对应样式以#开头（只能用于一个div）。
在这里插入图片描述

<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。前端框架Bootstrap中大量使用了<div>来排版布局，可以参考它来学习<div>的使用。

<span> 标签被用来组合文档中的行内元素。常用于格式化文字

<p>母亲有 <span style="color:blue">蓝色</span> 的眼睛,父亲有 <span style="color:darkolivegreen">绿色</span> 的眼睛。</p>

显示效果：读者可以把上述语句放在html文件中，使用浏览器打开查看效果
在这里插入图片描述

10.格式标签

<style> 标签用于为 HTML 文档定义样式信息，通常是css样式
Type 唯一可能的值是 “text/css”
但是我在实际开发中基本见不到这种用法了，一般都是把css样式写在独立的css文件中，并通过引入到html文件中。

<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>

11.框架标签

水平框架（html5已不支持，不必再学）

<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>

我有元气丹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识学习

一 Html常用标签1.HTML文件格式<html><head><title>title 元素的内容会显示在浏览器的标题栏中。</title><meta charset="UTF-8"></head><body bgcolor="yellow"><p>body 元素的内容会显示在浏览器中。</p><p>p是段落</p><h1 align="center
复制链接

扫一扫

专栏目录