前端学习笔记 - HTML

最新推荐文章于 2024-10-01 23:23:32 发布

Lyf_winner

最新推荐文章于 2024-10-01 23:23:32 发布

阅读量769

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Lyf_winner/article/details/108225211

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 简介</title></head>
<body>
 <h1>我的第一个标题</h1>
 <p>我的第一个段落。</p>
 </body>
</html>
实例解析
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

二，什么是HTML?

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

三，HTML 标签

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

四，Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

五，HTML 网页结构

<html>
    <head>
         <title>页面标题</title>
    </head>
    <body>
         <h1>这是一个标题</h1>
         <p>这是一个段落。</p>
         <p>这是另外一个段落。</p>
    </body>
</html>

六，中文编码

大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>页面标题</title>
   </head>
   <body>
      <h1>我的第一个标题</h1>
      <p>我的第一个段落。</p>
   </body>
</html>

HTML 基础

一，HTML 标题

HTML 标题（Heading）是通过< h1> - < h6> 标签来定义的

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

二，HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。
<p>这是一个段落。</p><hr><p>这是一个段落。</p><hr><p>这是一个段落。</p>

三，HTML 注释

可以将注释插入HTML代码中，这样可以提高其可读性

<!-- 这是一个注释 -->

四，HTML 段落

HTML 段落是通过标签 < p> 来定义的

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 属性

一，HTML 属性

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

二，属性实例

HTML 链接由 < a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.baidu.com">这是一个链接</a>

属性	描述
class	为html元素定义一个或多个类名
id	定义元素的唯一id
style	规定元素的行内样式

图像

一，图像标签

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

<img src="url" alt="some_text">

URL 指存储图像的位置

二，Alt属性

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

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

三，高度与宽度

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

链接

一，链接语法

<a href="url">链接文本</a>

二，超链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。

三，target 属性

使用 target属性，你可以定义被链接的文档在何处显示。

<a href="http://www.baidu.com/" target="_blank">访问百度网页!</a>

四，链接- id属性

<a href="#tips">访问有用的提示部分</a>

表格

一，表格

表格由 < table> 标签来定义

<table>
    <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>

二，边框属性

使用边框属性来显示一个带有边框的表格

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

三，表格表头

大多数浏览器会把表头显示为粗体居中的文本

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <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>

input 类型

一，button

<input type="button" value="按钮">

二，color

<input type="color" name="favcolor">

三，date

<input type="date" name="bday">

事件属性

一，onclick

当单击鼠标时

<button onclick="copyText()">点击鼠标</button>

二，onmouseout

当鼠标指针移出图片时运行脚本

<img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">

三，onmouseover

当鼠标指针移至图片之上时运行脚本

<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">

多媒体

一，音频

<embed height="50" width="100" src="horse.mp3">

二，视频

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>