HTML

注：参考慕课网和w3cschool(https://www.w3schools.com/html/default.asp)

GitHub：https://github.com/JinluZhang1126/Front-end-Web-Development-Tutorial

文章目录

HTML
- HTML基础语法
- - 基本结构
  - meta
- 基础元素
- - HTML段落
  - HTML链接:star:
  - - 鼠标悬浮显示标题 tittle
    - 目标属性 target
    - 打开图片
    - 通过CSS设置style
  - HTML Block
- HTML图片:red_circle:
- - 点击图片跳转链接
  - Image Maps
  - 背景图片
  - 覆盖
  - 拉伸
  - \ Element
- HTML 表格:small_red_triangle:
- - 定义,Border
  - padding
  - Border Spacing
  - 分割 Span Many Columns/Rows
- HTML按钮
- HTML列表:star:
- - 定义
  - 有序列表Ordered HTML List
- 基础属性
- - href属性
  - src属性
  - 宽度和高度属性
  - alt属性
- HTML样式属性
- - 背景颜色 background-color
  - 文字颜色 color
  - 字型font-family
  - 文字对齐`text-align`
- 文本格式
- 引文格式
- - 短引用\
  - 长引用\
  - 缩写 \
  - 联系信息 \
  - 倒写 \
- HTML Form :red_circle:
- - 定义
  - 属性
  - - action：
    - method：
  - input类型
  - input属性
  - - input's HTML5 attributes
  - 下拉框 \
  - \
  - 文本框 \
  - \

HTML基础语法

基本结构

基础元素

HTML段落

<p></p>标签代表的是段落，   生成空格， <br/>是转行符， <hr/>是分割线

<P align="left">HTML&nbsp;指的是超文本标记语言 (Hyper Text Markup Language),HTML 不是一种编程语言，而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag),HTML 指的是超文本标记语言 (Hyper Text Markup Language),HTML 是一种编程语言，而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag),</P>
<hr></hr>

<pre></pre>标签中可以保留文本的转行，空格：

<pre>       HTML 指的是超文本标记语言 (Hyper Text Markup Language),HTML 不是一种编程语言，而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag),</pre>

HTML链接⭐️

- Use the <a> element to define a link
- Use the href attribute to define the link address
- Use the target attribute to define where to open the linked document
- Use the <img> element (inside <a>) to use an image as a link

HTML链接使用<a>标记定义：

<a href="https://www.w3schools.com">This is a link</a>

链接的目的地在href属性中指定。

属性用于提供有关HTML元素的其他信息。

您将在下一章中了解有关属性的更多信息。

鼠标悬浮显示标题 tittle

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

目标属性 target

_blank -在新窗口或标签中打开链接的文档
_self -在与单击相同的窗口/选项卡中打开链接的文档（默认设置）
_parent -在父框架中打开链接的文档
_top -在整个窗口中打开链接的文档
框架名称 -在命名框架中打开链接的文档

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

打开图片

<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

通过CSS设置style

<style>
a:link {color: green;background-color: transparent;text-decoration: none;
}
</style>

HTML Block

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)

HTML图片

【前端】HTML Manual-HTML入门手册相关推荐

2万人同时访问 nodejs_面向前端工程师的Nodejs入门手册(一)
前言本文面向的读者已经是了解JavaScript基本使用的前端程序员,但是缺乏服务端的经验,接下来将带你走进在服务端的世界,看看运行在服务端的JavaScript是如何工作的,它与运行在浏览器端的J ...
支付宝前端团队整理的《Web 前端开发入门手册》
[回复"1024",送你一个特别推送] 今天是元宵节,首先祝大家元宵节快乐.但是,我万万没想到的是,一个元宵节现在都能成为我们程序猿的节日,名曰:猿宵节. 真的是越来越佩服我们程序 ...
支付宝前端推出《Web前端开发入门手册》
web前端教程用大白话,来讲编程近日,支付宝前端团队写的<Web前端开发入门手册>对外公开了,原本是用于内部培训使用,现在对外公开了. 这本手册是初学者的福音,它的受众群体是前端小白, ...
React 入门手册
大家好,我是若川.推荐这篇可收藏的React入门手册.也推荐之前一篇类似的文章<如何使用 React 和 React Hooks 创建一个天气应用>. 点击下方卡片关注我.加个星标 Rea ...
figma客户端_小白的Figma入门手册
全世界都在用Figma 不知道你们有没有这种感觉,仿佛有一天,很突然的,全世界都在使用figma,一个软件从无人问津到现在的如日中天,用了不到3年,而现在,它不仅仅是当下的最优生产力工具,在疫情掀起的 ...
【Typescript入门手册】一篇文章速览常见类型
??[TypeScript入门手册]记录了出场率较高的Ts概念,旨在帮助大家了解并熟悉Ts ?? 本系列会持续更新并更正,重点关照大家感兴趣的点,欢迎同学留言交流,在进阶之路上,共勉! ?? star ...
Node.js 入门手册：那些最流行的 Web 开发框架
这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...
AI产品经理入门手册（下）
近两年来AI产业已然成为新的焦点和风口,各互联网巨头都在布局人工智能,不少互联网产品经理也开始考虑转型AI产品经理,本文作者也同样在转型中.本篇文章是通过一段时间的学习归纳总结整理而成,力图通过这篇文 ...
rocketmq 顺序消费_必须先理解的RocketMQ入门手册，才能再次深入解读
推荐阅读一下下 2020年后想跳槽?MQ.ZK.Nginx.Kafk等分布式技术你都掌握了? 阿里架构师推荐学习的<RabbitMQ实战指南>,渣渣的你都看过吗? RocketMQ入门手册 ...

【前端】HTML Manual-HTML入门手册

HTML

文章目录

HTML基础语法

基本结构

meta

基础元素

HTML段落

HTML链接⭐️

鼠标悬浮显示标题 tittle

目标属性 target

打开图片

通过CSS设置style

HTML Block

HTML图片

【前端】HTML Manual-HTML入门手册相关推荐

最新文章

热门文章

【前端】HTML Manual-HTML入门手册

HTML

文章目录

HTML基础语法

基本结构

meta

基础元素

HTML段落

HTML链接⭐️

鼠标悬浮显示标题 tittle

目标属性 target

打开图片

通过CSS设置style

HTML Block

HTML图片 insertAdIfNeeded();

【前端】HTML Manual-HTML入门手册相关推荐

最新文章

热门文章

HTML图片