编程学习
📄HTML学习(1)基础知识及简单的程序
00 分钟
2023-4-12
2023-11-23
type
status
date
slug
summary
tags
category
icon
password
Email

HTML初识

HTML全称是:Hyper Text Markup Language
HTML不是一种编程语言,而是一种标记语言,使用标记标签来描述网页。
HTML标签是由<>包围起来的关键词,并且通常是成对出现的,例如<p> </p>,被称为开始标签(开放标签)和结束标签(闭合标签)
HTML文档就等同于网页,因为HTML文档包含HTML标签纯文本,HTML文档也被称之为标签。浏览器会使用标签来解释网页的内容。

第一个HTML程序

HTML标题:使用 <h1> ..... <h6> 等作为不同的等级
 
HTML段落:使用<p>标签进行定义
HTML链接:使用<a href="xxxx">来表示,href表示链接的地址

HTML显示图像:使用<img src="xxx" width="xx" height="xxx">来显示
notion image

HTML元素

指的是开始标签和结束标签之间的内容。
<p>元素:元素的内容是:这是一个段落
<body>元素:定义了html文档的主体,元素的内容是另一个HTML标签
<html>元素:定义了整个html文档。
省略结束标签虽然可以但是不要这么做
标签尽量使用小写。

HTML属性

属性为元素提供附加信息,属性总是在开始标签中定义。
href就是在<p>中指定的一个属性
align属性:为标题设置对齐方式

 

主标题

bgcolor属性:在<body>中指定,设置网页的背景颜色
<body bgcolor="yellow">
属性值应该始终被包括在引号内,单引号和双引号都可以。

HTML标题

HTML有六种不同的标题,分别对应<h1> 到 <h6>
HTML水平线:<hr />

HTML段落

如果你想要插入一个空行:这是一个空的html元素,因此没有结束标签
在不产生新段落的情况下换行:
不要用没有结束标签的HTML元素,因此要使用<br /> 而不是<br >

HTML样式

style属性:提供了一种可以改变所有HTML元素样式的通用方法。
使用样式替代我们刚才的center align bgcolor等标签或者属性(废弃)
设置背景颜色background-color
设置字体颜色和尺寸:
文本对齐:

格式化标签

文本格式化
定义粗体文本 定义大号字体 着重字 斜体字 加重语气 这是下标字 这是上标字 这是删除字 下划线

引用等:
我的名字
我的网站是欢迎大家来逛逛尽情期待吧这是长的引用
这是短引用定义项目

输出等标签::
预格式文本 保留了空行和换行 6666
很适合用来显示代码
for (int i=1;i<=100;i++){ sum+=i; }

计算机编程代码:

HTML引用

短引用:<q>
我们的目标是:构建和谐社会,构建人类命运共同体。

长引用:<blockquote>
我想说的是:
我的网站啊啊啊啊,快点来访问我的网站! 啊啊啊啊
使用缩略词:<abbr>
用于定义的引用:<dfn>
用于显示地址:<address>
用于著作标题:<cite>
用于双向重写:<bdo>

HTML注释

条件注释等

一个锚的提示功能(看下文)

HTML+CSS

在html中定义样式表
外部样式表:
内部样式表:
内联样式

HTML链接

使用<a href="url"> 即可访问指定的url链接
设置target属性可以控制行为
命名锚name属性可以规定锚的名称,这相当于一个书签,当我们定义了一个锚后,在之后我们可以直接跳转到这个锚点。
点击可以看到效果:

HTML图片

使用<img>标签来指定src图片的url链接
使用alt来替换文本的属性
当图片无法显示的时候,会显示指定的文本
嵌套将图片作为超链接
notion image

HTML表格

<table> 表示接下来是一个表格;<tr>表示每一行;<td>表示分割成的每一列
添加<border>属性来表示表格是否含有边框
使用<th>来表示列表的表头
Heading 1
Heading 2
row 1,col 1
row 1,col 2
row 2,col 1
row 2,col 2

HTML列表

无序列表
<ul>用来指定无序列表<li>用来指定列表的每一项
  • Coffee
  • Cola
  • Milk
有序列表
<ol>用来创建有序列表
1. Coffee 2. Cola 3. Milk
自定义列表项
<dl>指定自定义列表项的开始;<dt>表示每一个列表项;<dd>表示每一个列表项的定义
 

HTML块

HTML的元素分为块元素内联元素
块元素可以自动换行,内联元素不会自动换行
设置块元素
  • 111111
  • 222222
  • 333333
  1. 111111
  1. 222222
  1. 333333
设置内联元素<span>

评论
  • Twikoo
  • Valine