【前端基础】前端速学手册（part1）HTML

已于 2023-04-06 09:17:02 修改
阅读量346 收藏 4
点赞数 4
分类专栏： 前端 文章标签： html css html5
于 2020-08-12 14:24:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45695811/article/details/107890560
版权

前端手册（part1）HTML

1.1 什么是HTML(·-·？？)

  • HTML是来描述网页的一种语言，不是编程语言，是一种超文本标记语言.
  • 标记语言是一套标记标签，来描述网页.
  • HTML文档包含了HTML标签及文本内容，也叫web页面.
1.1.1HTML标记标签：
  • 由尖括号包围且成对出现，例： < p > < / p > <p> </p> <p></p>
  • 标签对是开始与结束标签也称开放与闭合标签.
1.1.2HTML元素：

严格来讲, 一个 HTML 元素包含了开始标签与结束标签，例： < p > 这是一个段落 < / p > <p>这是一个段落</p> <p>这是一个段落</p>

1.1.3HTML网页结构
<html >
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
</body>
</html>
1.1.4通用声明

HTML 5 <!DOCTYPE html>
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1.2 HTML元素

开始标签元素内容结束标签
<p>这是一个段落</p>
<a href="default.htm">这是一个链接</a>
<br>换行
1.2.1
  • 某些 HTML 元素具有空内容
  • 空元素在开始标签中进行关闭
  • 大多数 HTML 元素可拥有属性
  • HTML 文档由嵌套的 HTML 元素构成。

1.3 HTML属性

1.3.1
  • HTML 元素可以设置属性，属性可以在元素中添加附加信息一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name=“value”。
  • 属性值应该始终被包括在引号内。
例：
<a href="http://www.nowcoder.com">这是一个链接</a>//这里链接的地址在 href 属性中指定

这里有几个常见HTML元素属性
class ：为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id : 定义元素的唯一id
style : 规定元素的行内样式（inline style）
title : 描述了元素的额外信息 (作为工具条使用)

建议 查索HTML标签参考手册

1.4 HTML标题

标题通过<h1> - <h6> 标签进行定义。
例：
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>//字号依次减小
1.4.1 HTML水平线，用于分隔内容<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>

<hr>：显示如下

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

1.5 HTML 段落

<p>这是一个段落</p>
1.5.1 HTML折行<br>

1.6 HTML 文本格式化

1.61 文本格式化标签

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

1.7 HTML 链接

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

<a href="url">链接文本</a>//href 属性描述了链接的目标。

链接-target属性

<a href="https://www.nowcoder.com/" target="_blank" rel="noopener noreferrer">访问牛客教程!</a>

链接-id属性

<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

1.8 HTML 头部

<title>

  • 定义了HTML文档,浏览器工具栏的标题,显示在搜索引擎结果页面的标题
    <base>
  • 定义了所有链接的URL,该标签作为HTML文档中所有的链接标签的默认链接
    <link>
  • 定义了文档与外部资源之间的关系，通常用于链接到样式表
    <style>
  • 定义了HTML文档的样式文件引用地址,可以直接添加样式来渲染 HTML 文档
    <meta>
  • 提供了HTML文档的meta标记,提供了元数据.元数据也不显示在页面上，但会被浏览器解析
    <script>
  • 用于加载脚本文件
    <head>
  • 元素包含了所有的头部标签元素。在 元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

1.9 HTML 样式-CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

  • 内联样式 在HTML元素中使用"style" 属性
    <p style="color:blue;margin-left:20px;">这是一个段落。
    <body style="background-color:yellow;">
    <h2 style="background-color:red;">这是一个标题</h2>
    <p style="background-color:green;">这是一个段落。</p>
    </body>//background-color定义一个元素背景颜色
字体,字体颜色,字体大小

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用 标签。

<h1 style="font-family:verdana;">一个标题</h1>
文本对齐

text-align（文字对齐）属性指定文本的水平与垂直对齐方式

<h1 style="text-align:center;">居中对齐的标题</h1>
  • 内部样式表 在HTML文档头部<head> 区域使用 <style> 元素 来包含CSS
<head>
<style type="text/css">
    body { background-color:yellow; }
    p { color:blue; }
</style>
</head>
  • 外部引用 使用外部 CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

1.10 HTML 图像-表格-列表

图像

<img>标签定义 HTML 页面中的图像，<img>标签有两个必需的属性：src和alt。

<img border="0" src="x.png" alt="Pulpit rock" width="304" height="228">

src ->指 “source”。源属性的值是图像的 URL 地址
alt ->属性用来为图像定义一串预备的可替换的文本。

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

通过 <table> 标签来定义表格
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
表格边框属性（border）

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

表格展示如下：

Header 1Header 2
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2
列表

有序列表<ol>,每个列表项<li>
无序列表<ul>,每个列表项<li>
自定义列表<dl>,每个自定义列表项<dt>,每个自定义列表项的定义 <dd>

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

显示效果如下：

  1. Coffee
  2. Milk
  • Coffee
  • Milk
Coffee
- black hot drink
Milk
- white cold drink

1.11 HTML 区块-布局-表单-框架

区块

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

块级元素在浏览器显示时，通常会以新行来开始（和结束）。 实例:<h1>, <p>, <ul>, <table> 。

内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img> 。
HTML 可以通过 <div> 块级元素和 <span> 内联元素将元素组合起来。

布局
  • 使用
    元素： 
<div id="container" style="width:500px">
    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">主要的网页标题</h1>
    </div>
    <div id="menu"
         style="background-color:#FFD700;height:200px;width:100px;float:left;">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>
    <div id="content"
         style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        内容在这里
    </div>
    <div id="footer"
         style="background-color:#FFA500;clear:both;text-align:center;">
        版权 © nowcoder.com
    </div>
</div>

上面的 HTML 代码会产生如下结果：

内容在这里
  • 使用表格<table>
<table width="500" border="0">
    <tr>
        <td colspan="2" style="background-color:#FFA500;">
            <h1>主要的网页标题</h1>
        </td>
    </tr>
    <tr>
        <td style="background-color:#FFD700;width:100px;vertical-align:top;">
            <b>菜单</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </td>
        <td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
            内容在这里
        </td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
            版权 © nowcoder.com
        </td>
    </tr>
</table>

上面的 HTML 代码会产生以下结果：

主要的网页标题

菜单
HTML
CSS
JavaScript 		内容在这里
版权 © nowcoder.com
表单

表单标签<form>,输入标签（<input>),文本框通过 <input type="text"> 标签来设定

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
</form>

显示如下：

First name:
Last name:

密码字段通过标签<input type="password">来定义，密码字段字符以星号或圆点替代。<input type="radio"> 标签定义了表单单选框选项，<input type="checkbox"> 定义了复选框,<input type="submit"> 定义了提交按钮.


<form name="input" action="http://www.nowcoder.com" method="get">
      Password: <input type="password" name="pwd">
    <input type="radio" name="sex" value="male"> Male <br>
    <input type="radio" name="sex" value="female"> Female
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>
框架
<iframe src="URL"></iframe>

width 和 height 属性用来定义iframe标签的高度与宽度。

<iframe src="x.html" width="200" height="200"></iframe>

移除边框

<iframe src="x.html" frameborder="0"></iframe>//设置属性值为 "0" 移除iframe的边框

使用iframe来显示目标链接页面,目标链接的属性必须使用iframe的属性

<iframe src="x.html" name="iframe_a"></iframe>
<p><a href="http://www.nowcoder.com" target="iframe_a">NOWCODER.COM</a></p>

1.12 HTML 颜色-颜色名-颜色值

颜色十六进制 颜色RGB(Color RGB)
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

1.13 HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script>
    document.write("Hello World!");
</script>

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<script>
    document.write("Hello World!")
</script>
<noscript>
    抱歉，你的浏览器不支持 JavaScript!
</noscript>

JavaScript可以直接在HTML输出

document.write("<p>这是一个段落。</p>");

1.14 HTML 字符实体

正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体
类似这样：

&entity_name;
&#entity_number;

如需显示小于号，我们必须这样写：&lt 或 &#60; 或 &#060;
如需在页面中增加空格的数量，您需要使用 &nbsp; 字符实体。
HTML的实体可参考牛客网站上的实体手册
访问牛客实体手册

1.15什么是 XHTML?

XHTML 是更严格更纯净的 HTML 版本,以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准,得到所有主流浏览器的支持
与 HTML 相比:

  • （文档结构）
    XHTML DOCTYPE 是强制性的
    <html> 中的 XML namespace 属性是强制性的
    <html>、<head>、<title> 以及<body>也是强制性的
  • （元素语法）
    XHTML 元素必须正确嵌套
    XHTML 元素必须始终关闭
    XHTML 元素必须小写
    XHTML 文档必须有一个根元素
  • （属性语法）
    XHTML 属性必须使用小写
    XHTML 属性值必须用引号包围
    XHTML 属性最小化也是禁止的
Qiqy
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2022大厂前端面试题手册
bill的博客
05-30 1331
2022大厂前端面试题手册 HTML、CSS、浏览器 相关： 1. 网络中使用最多的图片格式有哪些 JPEG, GIF, PNG最流行的是JPEG格式，可以把文件压缩到最小，在PS以JPEG格式存储时，提供11级压缩级别 2. 请简述 CSS 盒子模型 一个 CSS 盒子从外到内可以分成四个部分：margin（外边距），border （边框），padding（内边距），content（内容）。默认情况下，盒子的 width 和 height 属性只是设置 content（内容）的宽和高 盒子真正的宽应该是
AJAX完全手册].（美）波维尔.扫描版.part1 带书签
07-21
书签由本人亲身加上，方便大家学习 《Ajax完全手册》是一本详解如何利用最新的Ajax技术进行Web编程的权威指南，主要围绕...《Ajax完全手册》适合有一定Web编程基础的读者学习Ajax之用，也可作为相关培训课程的教材。
【前端】CSS基础学习笔记（Part1）
Bryant的博客
11-03 145
CSS - 笔记 1 CSS介绍 1.1 定义 定义：CSS也是一门标记语言 CSS是层叠样式表（简称CSS样式表或级联样式表） 作用：主要用于美化网页、布局页面（与html结合使用） 1.2 CSS组成 CSS构成：选择器 { 样式 } 如：h1 { color: red; font-size: 25px;} 注：属性和属性值以键值对出现，用冒号分隔、分号结尾 CSS位置：放在<head></head>中的<style></style>标签中 1
前端开发手册
qq_52869537的博客
06-08 891
必须使用 camelCase 驼峰命名必须指定类型必须加上注释，表明其含义必须加上 required 或者 default，两者二选其一如果有业务需要，必须加上 validator 验证props: {// 组件状态，用于控制组件的颜色status: {return ['succ','info','error'== -1},// 用户级别，用于显示皇冠个数必须使用 camelCase 驼峰命名必须指定类型必须加上注释，表明其含义。
前端开发进阶手册(1)，2024年最新高级web面试题
2301_76190672的博客
04-19 903
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
Python应用-web应用开发（上）前端part
bihuadashuju的博客
06-04 2050
包括HTML+CSS+BootStrap+JavaScript+jQuery的前端知识
circos 学习手册（十九）
dxs18459111694的博客
12-26 5
link 和 relationships(四) 8. link rules - Part V 在前面的示例中，我们根据 link 或数据点的位置来调整它们的格式参数。在下面的例子中，我们将展示如何根据格式参数的值出发规则。 本例的输入数据集是重复片段的自己，我们通过将下列格式参数随机分配给数据行来格式化 link color = red color = blue thickness = 5 输...
circos 学习手册（二十四）
dxs18459111694的博客
12-31 7
2D 数据绘制(五) 9. 字形—Part I 规则不仅可以用于调整标签的文本，也可以为所有标签设置值 <rule> condition = 1 value = X </rule> 你可以把这个规则和其他规则结合起来。例如，如果文本是序列，则可以根据其标识设置字符的颜色，然后将其更改为其他值。 # first change color <rule> ...
前端开发进阶手册.pdf
小北哥哥和北妈
10-16 710
开课吧前端团队精心打造的《前端开发进阶手册》来了，这套系统的前端资料，能够帮助大家更好掌握面试技巧和热门知识点：面试多次，老是通过次数少/薪资低人一大截；了解多个单独的技术点，但缺乏体系...
前端汇总（转载）
yuanbotao219的博客
01-14 8344
文章目录前端汇总一、概要二、优秀的网站三、前端技术分类综合四、各类前端资源综合类入门类工具类综合效果搜索平台团队Blog开发中心Nodejs综合APIEcmascriptVueAngularjsReactWebpackGulpJs templateHTML5(HTML)CSS3(CSS)移动端APIjQueryD3RequriejsSeajsLess,sassMarkdown兼容性UI相关其它AP......
前端修炼手册
qq_45797026的博客
03-30 582
文章目录网络基础：1.https的过程2. tcp的3次握手4次挥手3. TCP和UDP的区别说一下http2.0一. 介绍1.1 什么是SPDY协议1.2 HTTP1.X的缺点二. 二进制分帧三. 首部压缩四. 多路复用五. 请求优先级六. 服务器推送**补充 400 和 401、403 状态码**各类别常见状态码：**强缓存、协商缓存什么时候用哪个**强缓存：协商缓存：Etag**前端性能优化**性能评判指标:性能测试工具：线程与进程建立Http请求：DNS解析：关键渲染路径请求和响应优化：dns相关h
完全手册C＃ 2005+SQL Server数据库与网络开发.part1
11-18
1. **C# 2005基础**：包括变量、数据类型、运算符、控制结构（如if语句、循环）、函数、类与对象等基础知识，这些都是编程的基础。 2. **面向对象编程**：深入探讨类的继承、封装和多态性，以及接口、抽象类等高级...
javaweb整合开发 完全自学手册 技术文档PartI
02-17
总的来说，"javaweb整合开发 完全自学手册"会覆盖这些核心概念和技术，并逐步引导你从基础知识到进阶应用，帮助你成为一名全面的Web开发者。在实践中不断学习和探索，将理论与实践相结合，你将能够构建出高效、稳定...
目前最新最全的GNS3+0.7.2中文使用手册+v2.part1.rar
01-15
目前最新最全GNS3+0.7.2中文使用手册+v2.part1.rar：http://download.csdn.net/source/2984724 （5分） 目前最新GNS3+0.7.2中文使用手册+v2.part2.rar http://download.csdn.net/source/2984722 （0分）
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3256
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 998
iframe 预览邮件 + 打印邮件 + 模拟滚动条
ASP.NET 生成分页 HTML 函数示例
一个九零后程序猿开发日志
07-24 238
函数会生成一个包含上一页、页码和下一页的 HTML 分页导航。
MATLAB7官方学习手册：深入指南
手册的内容涵盖了MATLAB的基础操作，如变量创建、运算符、控制结构（如循环和条件语句）、函数定义与调用等。对于初学者来说，它提供了学习MATLAB语法和编程逻辑的入门指导。同时，手册还深入探讨了高级特性，如矩阵...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值