HTML学习一遍过

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量200 收藏 1
点赞数
分类专栏： 前端学习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41321557/article/details/105275651
版权

说明：HTML学习一遍过。
W3school学HTML

HTML学习

HTML内容

HTML简介

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签

HTML基础

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。从1到6由大到小。
HTML 段落是通过 <p> 标签进行定义的。
HTML 链接是通过 <a> 标签进行定义的。
<a href="http://www.w3school.com.cn">This is a link</a>
HTML 图像是通过 标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />

HTML元素

<p> 元素：文档中的一个段落。
<body> 元素：HTML 文档的主体。
<html> 元素：定义了整个 HTML 文档。
<br />元素：定义换行
<hr />元素：定义水平线
HTML 注释：<!-- This is a comment -->
HTML 提示：使用小写标签

HTML属性

  • 属性总是以名称/值对的形式出现，比如：name=“value”。
  • 属性总是在 HTML 元素的开始标签中规定。
属性功能
href链接的地址
align对齐方式
bgcolor背景颜色
border表格边框

HTML样式

通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

background-color ：背景颜色
font-family：字体系列
color ：字体颜色
font-size：字体尺寸
text-align：文本对齐

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

HTML文本格式化

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

HTML引用

在这里插入图片描述

HTML计算机代码

在这里插入图片描述

HTML CSS

css有三种使用方式

  1. 外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  1. 内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。
<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
  1. 内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

HTML 链接

有两种使用 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

target 属性

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

name 属性

<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>

HTML图像

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

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

HTML表格

tr定义行，td（table data）定义单元格，td定义头

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

HTML列表

无序列表

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

有序列表

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

HTML<div>和 <span>

HTML 块元素

  • 大多数 HTML 元素被定义为块级元素或内联元素。
  • “块级元素”译为 block level element，“内联元素”译为 inline element。
  • 块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

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

例子：<b>, <td>, <a>, <img>

HTML <div> 元素

  • HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

  • <div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div>
    元素可用于对大的内容块设置样式属性。

  • <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

HTML<span>元素

  • HTML <span>元素是内联元素，可用作文本的容器。
  • <span> 元素也没有特定的含义。
  • 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML类

  • 对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
  • 为相同的类设置相同的样式，或者为不同的类设置不同的样式。
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
<div class="cities">

HTML布局

使用 <div> 元素的 HTML 布局

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}

使用 HTML5 的网站布局

语义元素功能
header定义文档或节的页眉
nav定义导航链接的容器
section定义文档中的节
article定义独立的自包含文章
aside定义内容之外的内容（比如侧栏）
footer定义文档或节的页脚

HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

HTML背景

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
背景颜色（Bgcolor）

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

背景（Background）

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

HTML文件路径

使用相对路径是个好习惯（如果可能）。

如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

路径描述
<img src="picture.jpg">picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg">picture.jpg 位于当前文件夹的 images 文件夹
<img src="/images/picture.jpg">picture.jpg 当前站点根目录的 images 文件夹
<img src="../picture.jpg">picture.jpg 位于当前文件夹的上一级文件夹

HTML头部元素

HTML <title> 元素
<title> 标签定义文档的标题。
title 元素能够：

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时显示的标题
  • 显示在搜索引擎结果中的页面标题
    HTML <base> 元素
    <base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

HTML <link> 元素
<link> 标签定义文档与外部资源之间的关系。
HTML <style> 元素
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式
HTML <meta> 元素
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />

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

HTML统一资源定位器

URL - Uniform Resource Locator

scheme://host.domain:port/path/filename

解释：

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

URL Schemes

Scheme访问用于…
http超文本传输协议以 http:// 开头的普通网页。不加密
https安全超文本传输协议安全网页。加密所有信息交换
ftp文件传输协议用于将文件下载或上传至网站
file您计算机上的文件

HTML DOCTYPE

HTML5

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

HTML 表单

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

qq_41321557
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第一遍
02-10
【标题】: "第一遍：探索 Progressive Web App（PWA）技术" 【描述】: "在当前的互联网环境中，Progressive Web App（PWA）正逐渐成为提升网页应用体验的重要技术。PWA 结合了传统网页应用的便捷性和原生应用的高...
【近日杂记】
r783158377的博客
11-24 247
在钉钉内前端代码发版更新后，安卓机应用并没有执行最新代码 <!-- 为清除浏览器缓存 --> <meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta name="viewport" content="width=device-width,initial-sca
钉钉开放平台“常见问题常见问题常见问题“
热门推荐
yangzai928的专栏
04-27 13万+
一、免登问题 1.如何在App及后台获取企业及用户相关信息 （1）微应用主页支持使用$CORPID$模板参数表示corpid，用户访问微应用的时候钉钉将把$CORPID$替换成用户所属企业的corpid，例如http://www.dingtalk.com/index?corpid=$CORPID$ （2）获取用户信息需要通过免登服务，详情http://ddtalk.github.io/din
未来3年学习计划
俊Kelvin的专栏
05-28 1263
工作所需： node.js elastic-search 龙果 吾爱折腾 dubbo https://blog.csdn.net/javajiagou/article/details/90216007 https://blog.csdn.net/u012998254/article/details/79418112 时间短： 技术对比，如rabbitmq、rocketMq对比...
案例图片
ablmnuk的博客
02-25 299
01.第一个html文件.html <!DOCTYPE html> <html> <head> <title>第一个HTML文件</title> <meta charset="utf-8"> </head> <body> 欢迎学习HTML </body> </htm...
钉钉微应用手机端导航栏配置
u010227042的博客
08-24 3660
一、设置导航栏颜色 在url后面拼接dd_nav_bgcolor参数即可，如下： 支持的格式:“AARRGGBB” http://abc.xyz?dd_nav_bgcolor=FF5E97F6 二、微应用页面支持横屏 在url后面拼接dd_orientation参数即可，如下： http://abc.xyz?dd_orientation=landscape Android平台上推荐打开新页面时使用openLink JSAPI。 三、隐藏导航栏右侧按钮，禁止导航栏右侧分享按钮 在url后面拼接sho.
阿西河前端教程学习心得随记——HTML5 有哪些新特性？_声明方式
01-08
待到将所有的html面试题过了一遍后，应该便有信心继续其它知识的学习了吧？好吧，那就从内容系统且全面的阿西河前端教程——HTML的面试题开始吧。 为了享受这个过程，我会首先滑动鼠标中键，大概浏览下Up主博客的...
LinuxC编程一站式学习
03-16
K&R的第一章是一个Whirlwind Tour，把全书的内容简单过了一遍，然后再逐个深入进去讲解。本书也可以看作是计算机专业课程体系的一个Whirlwind Tour，学习完本书之后有了一个全局观，再去学习那些参考资料就应该很...
GolangStudy:《golang 面试学习》：从简单到难最全总结，go基础，数据结构，算法，设计模式。微信小程序搜索“GolangStudy”可以手机端学习Golang
04-28
本项目更加看重的是对于知识点系统的一个总结，能够通过一句话，一张思维导图来把一类知识进行讲解，这样在面试前把所有的思维导图都过一遍就能更大的提升面试通过的几率了，平时空余的时候拿出思维导图进行复习也能...
LiveAndLearn-[removed]记录学习Javascript的100天，教程来源于Asabeneh的30-Days-Of-JavaScript
05-07
看过大神的编程挑战后，打算再从头学习一遍JavaScript，把薄弱知识点找补回来。加油！ 注释 变量 声明变量 JS01-Introduction JavaScript简介 JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言...
浙政钉2.0应用上架流程说明
qq_19551571的博客
11-01 6234
浙政钉2.0应用上架流程说明 step1：申请入驻开放平台 开发商首先需要申请入驻政务钉钉开放平台上（https://openplatform-portal.dg-work.cn/portal/#/index），填写、上传相关信息后，经审核通过后，申请成功ISV租户。 step2：接口联调测试 开发商可自行在ISV租户内创建应用（文档参考：https://openplatform-portal.dg-work.cn/portal/#/helpdoc?docKey=ksrm&slug=xggle
【钉钉】内嵌H5微应用之头部右侧导航设置
Ercyao的博客
01-05 4694
最近在做内嵌钉钉的H5微应用时，发现钉钉的导航栏很霸道，当你设置一个页面的导航栏右侧按钮时，当你切换别的页面也会附带上个页面的设置按钮 只设置一个页面头部右侧导航栏导致的结果，如下图： 刚进入页面 切换到日志页面 再返回到首页 这导致你需要每个页面设置下右侧导航栏的按钮，但有写页面你需要它原本的更多分享按钮和功能，翻钉钉文档，没有默认设置，只有一个设置的方法，查看钉钉开发...
基于钉钉的微应用开发（WebAPP）
bai_cai_pei的博客
07-06 2万+
1.登录成功，进入钉钉管理后台，点击工作台。2.添加自建应用，依次填写相关信息（首页地址为系统访问网址），微应用创建成功后生成AgentID，方便后续开发使用。 3.设置成功，可在移动端工作台打开微应用静态页面。4.动态交互：基于钉钉容器的H5开发，钉钉提供了一些Native（标识符native可以与所有其它的java标识符连用，abstract除外，一个native method方法可以返回任何...
如何给钉钉微应用标题设置背景色
shentibeitaokong的博客
01-17 6384
E应用的话 官方提供了jsapi： dd.setNavigationBar 普通微应用并不适用，官方也提供了 但是我发现 并不起作用，我是vue hash模式，所以我想到了这一点，搜索发现 https://www.jianshu.com/p/d5d5b51a1c84 因为vue默认hash模式路由，钉钉不认识#， so改成history即可，就会起效...
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
xcLeigh
07-25 2637
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
秃鹰算法BES优化Transformer-LSTM负荷数据回归预测【含Matlab源码 6405期】.zip
08-01
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Transformer-LSTM预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Transformer-LSTM预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Transformer-LSTM预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Transformer-LSTM预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Transformer-LSTM预测 4.4.5 萤火虫算法FA/差分算法DE优化Transformer-LSTM预测 4.4.6 其他优化算法优化Transformer-LSTM预测
EtherCAT协议（中文版）完整1-6册
08-01
ETG1000_1_CHN_Overview_V1i0i2_C01 ETG1000_2_CHN_EcatPhysicalLayer_V1i0i2_C01 ETG1000_3_CHN_EcatDLLServices_V1i0i2_C01 ETG1000_4_CHN_EcatDLLServices_V1i0i2_C01 ETG1000_5_CHN_EcatALServices_V1i0i2_C01 ETG1000_6_CHN_EcatALProtocols_V1i0i2_C01 ETG1000_6_V1i0i3_S_R_EcatALProtocols
大数据中心建设方案.pptx
最新发布
08-01
大数据中心建设方案.pptx
PHP开发神器：探索流行的PHP代码编辑器和IDE
08-01
PHP（Hypertext Preprocessor）是一种广泛使用的开源脚本语言，主要用于Web开发，将服务器端的脚本与HTML页面相结合，创建动态交互式Web页面。PHP的名字是一个递归缩写，表示"PHP: Hypertext Preprocessor"。 ## PHP的主要特点： 1. **服务器端脚本**：PHP代码在服务器上执行，生成HTML内容，然后发送给客户端浏览器显示。 2. **嵌入HTML**：PHP代码可以直接嵌入到HTML代码中，或者通过PHP标签包含在单独的文件中。 3. **强大的功能**：PHP提供了丰富的内置函数和库，支持多种数据库连接（如MySQL、PostgreSQL等），可以处理表单、文件上传、发送邮件等。 4. **跨平台**：PHP可以在多种操作系统上运行，包括Linux、Windows、macOS等。 5. **面向对象**：PHP支持面向对象编程（OOP），允许开发者创建类和对象。 6. **可扩展性**：PHP可以通过PECL扩展库来扩展其功能。 7. **社区支持**：PHP有一个庞大的开发者社区，提供大量的框架、工具和资源。 #
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值