HTML学习笔记day1

最新推荐文章于 2024-07-21 12:22:43 发布

alicelmx

最新推荐文章于 2024-07-21 12:22:43 发布

阅读量342

点赞数

分类专栏：前端学习文章标签： html 编程语言

本文链接：https://blog.csdn.net/alicelmx/article/details/78666589

版权

前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML简介

什么是HTML?

HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签

HTML 元素

HTML 元素语法

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

HTML 提示：使用小写标签

HTML 标签对大小写不敏感，但建议使用小写。

HTML 属性

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

HTML标题

HTML水平线

<hr> 标签在 HTML 页面中创建水平线。

HTML注释

HTML 文本格式化

HTML 文本格式化标签

下面通过一个例子来记住

欢迎来到小明酱的世界！
    <br />
    <!-- 定义粗体文字 -->
    <b>欢迎来到小明酱的世界！</b>
    <br />
    <!-- 定义着重文字 -->
    <em>欢迎来到小明酱的世界！</em>
    <br />
    <!-- 定义斜体文字 -->
    <i>欢迎来到小明酱的世界！</i>
    <br />
    <!-- 定义小号文字 -->
    <small>欢迎来到小明酱的世界！</small>
    <br />
    <!-- 定义加重语气 -->
    <strong>欢迎来到小明酱的世界！</strong>
    <br />
    <!-- 定义下标字 -->
    大家好<sub>欢迎</sub>来到
    <br />
    <!-- 定义上标字 -->
    大家好<sup>欢迎</sup>来到
    <br />
    <!-- 定义插入字 -->
    <ins>欢迎</ins>
    <br />
    <!-- 定义删除字 -->
    <del>欢迎来到</del>

HTML样式

属性

rel=”stylesheet”:外部样式表
type=”text/css”:引入文档的类型
margin-left:边距

三种样式表插入方式

通过例子来学习：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <!-- 外部样式表 -->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <!-- 内部样式表 -->
    <style type="text/css">
        p{
            color: aqua;
        }
    </style>
</head>
<body>
    <h1>标题h1</h1>
    <p>欢迎来到极客学院</p>
    <!-- 内联样式表 -->
    <a href="http://www.baidu.com" style="color: darkorange ">点击我跳转到极客学院</a>
</body>

HTML链接

链接属性

文本链接
图片链接

属性

href属性：指向另一个文档的链接
name属性：创建文档内链接

image标签属性

alt：替换文本属性
width：宽
height：高

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
    <a href="http://www.baidu.com">点击我</a>
    <a href="http://www.baidu.com">
        <img src="images/证件照.jpeg" width="100px" height="100px" alt="小明酱">
    </a>
    <br/>
    <!-- 文档内的链接 -->
    <a name="tips">hello</a>
    <a href="#tips">跳转到hello</a>
</body>
</html>

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格和边框属性

<table border="1">

HTML 表格表头

<tr>
    <th>Header 1</th>
    <th>Header 2</th>
</tr>

HTML列表

HTML无序列表

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

HTML有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

自定义列表

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

标签开始。每个自定义列表项以开始。每个自定义列表项的定义以

开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

alicelmx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记day1

HTML学习笔记
复制链接

扫一扫

专栏目录