HTML基础学习(一)

已于 2024-09-10 10:55:52 修改
阅读量110 收藏
点赞数
文章标签： html 学习 css
于 2023-05-23 09:50:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45189070/article/details/130805221
版权
本文介绍了HTML的基本概念，包括它作为超文本标记语言的性质，以及常用的元素如标题标签（h1-h6）、段落（p）、链接（a）和图像（img）的使用方法。此外，还涵盖了HTML中的样式、文本格式化、表格创建和列表类型等内容，是学习网页制作的基础知识。
摘要由CSDN通过智能技术生成

1.HTML简介

  • HTML是用来描述网页的一种语言：超文本标记语言
  • HTML是一种标记语言，不是编程语言
  • 标记语言是一套标记标签
  • HTMl使用标记标签来描述网页
1. 标题标签：<h1>
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<h6> 六级标题 </h6>

效果：
在这里插入图片描述

标题只有<h1>-<h6> 其他的都是按照<h6>来显示

2. 段落标签：<p>

  • 行内元素，独占一行(自动换行)

  • 下面是用了P标签的文本：

    清风以北过南巷，南巷故人不知归

    你本无意穿堂风，偏偏因据引山洪

    何时杖尔看南雪，我与梅花两白头

    青瓦长忆旧时雨，朱巷深处无故人

  • 不用P标签的文本：
    清风以北过南巷，南巷故人不知归
    你本无意穿堂风，偏偏因据引山洪
    何时杖尔看南雪，我与梅花两白头
    青瓦长忆旧时雨，朱巷深处无故人

3. 链接标签：<a>
<a href="http://www.baidu.com"> 这是一个网页链接</a>
<a name="../a.html"> 这是一个网页链接</a>

链接跳转的方式：

  1. 当前窗口：target=“_self” 默认
  2. 打开新的窗口：target=“-blank”

在网页开发中常用的四种链接：

  • 空链接（href=“#”/href=“javascript:void(0)”）：空链接即只能点击不会做页面跳转的链接，用于向页面上添加对象或行为 如：设为首页，添加收藏等
  • 本地链接(href=“本地路径”):用于本地工程/服务器页面之间的相互跳转
  • 网络链接(herf=“url”):用于给网站添加外部链接，点击后跳转到其它网站
  • 锚链接(href=“#name” ):用于添加页面内快速引导，可以从页面的一个位置快速的转到另一个位置
4. 图像标签：<img>
<img src="a.jpg" height="140" width="100"/>

图像的名称和尺寸是以属性的形式提供的

图片和文本的位置：
1. 文字在图片下方：
	<p>文字<img src="/a/b.jpg" align="bottom"/>在底部</p> 默认
2. 中间
	<p>文字<img src="/a/b.jpg" align="middle"/>在中部</p>
3. 顶部
	<p>文字<img src="/a/b.jpg" align="top"/>在顶部</p>
图片的浮动：
靠左：
	<p><img src="/a/b.jpg" align="left"/>图片在左边</p>
靠右：
	<p><img src="/a/b.jpg" align="right"/>图片在右边</p>

alt属性：当浏览器无法加载图片时，会用alt属性的值来代替图片显示

2. HTML元素

HTML元素是指从开始标签到结束标签的所有代码
空元素是在开始标签中进行关闭 如<br/>
大多数HTML标签可以拥有属性
HTML标签对大小写不敏感

3. HTML属性

属性是在开始标签中以键值对的形式出现

4. HTML注释
<!--这是一个注释-->
5. HTML样式
  • style属性淘汰了旧的<font>标签
  • font-family：字体
  • color：字体颜色
  • font-size：字体大小
  • text-align：文本的对齐方式
<p style="font-family:arial;color:red;font-size:20px;">这是一段文字</p>
6. HTML文本格式化
  1. 文本格式化
  • 加粗：<b>…</b>,<strong> …</strong>
  • 大号字体：<big>…</big>
  • 小号字体：<small>…</small>
  • 斜体：<em>…</em>,<i>…</i>
  • 下标：这里是文字<sub>这里是下标</sub>
  • 上标：这里是文字<sup>这里是上标</sup>
  1. 预格式文本
    <pre>…</pre>标签，保留了空格和换行
    比较适合用来显示计算机代码
  2. "计算机输出"标签
    <code>…</code>
    <kbd>…</kbd>
    <tt>…</tt>
    <var>…</var>
  3. 地址
    <address>…</address>
<address>
		地址<a href="www.baidu.com">百度.</a><br/>
		Example.com
</address>

效果：


地址百度.

Example.com

5. 缩写和首字母缩写 

在某些浏览器中，当您把鼠标移至缩略词语上时，
title 可用于展示表达的完整版本。
<abbr title="超文本标记语言">HTML.</abbr>
<acronym title="超文本标记语言">HTML</acronym>

效果：
HTML.
HTML

6. 文字方向

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

效果：

Here is some Hebrew text

7. 删除字效果和插入字效果

<p>原价：<del>100元</del>,现在只要<ins>59元</ins></p>

效果：

原价：100元,现在只要59元

7. HTML颜色

颜色由红、绿、蓝混合而成，由一个十六进制的符号来定义(rgb)
每种颜色最小值是0，最大值255
例如：rgb(0,0,0)：黑色 十六进制：#000000

8. HTML表格

表格使用<table>标签来定义
行项目用<tr>来定义
列项目使用<td>来定义
表头使用<th>来定义
标题使用<caption>来定义

横向的表头：

<table border="1">
<caption>
	这里是标题
</caption>
<tr>
	<th>a</th>
	<th>b</th>
	<th>c</th>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

效果：

这里是标题
abc
100200300
400500600
竖向的表头： 
<table border="1">
	<tr>
		<th>a</th>
		<td>100</td>
	</tr>
	<tr>
		<th>b</th>`在这里插入代码片`
		<td>200</td>
	</tr>
	<tr>
		<th>c</th>
		<td>&nbsp;</td>
	</tr>
</table>

效果如下：

a100
b200
c 

横跨两列的单元格(单元格的合并)

<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

效果如下：

姓名电话
Bill Gates555 77 854555 77 855
姓名Bill Gates
电话555 77 854
555 77 855

表格内包含其他的标签：
代码：

<table border="1">
<tr>
  <td>
   <p>这是一个段落。</p>
   <p>这是另一个段落。</p>
  </td>
  <td>这个单元包含一个表格：
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元包含一个列表：
   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

效果展示：

这是一个段落。

这是另一个段落。

这个单元包含一个表格：
AB
CD
这个单元包含一个列表：
  • 苹果
  • 香蕉
  • 菠萝
HELLO

单元格边距：
代码：

<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

单元格间距：
代码：

<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellspacing：</h4>
<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

单元格内控制内容的位置：
代码：

<table width="400" border="1">
 <tr>
  <th align="left">消费项目</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">食物</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th align="left">总计</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>

效果：

消费项目....一月二月
衣服$241.10$50.20
化妆品$30.00$44.45
食物$730.40$650.00
总计$1001.50$744.65

框架(frame)属性

<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
9. HTML列表

无序列表

<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>

效果展示：
在这里插入图片描述

有序列表 ：

<h4>数字列表：</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>

效果展示：
在这里插入图片描述
自定义列表：

<dl>
<dt>A</dt>
<dd>ABCDEF</dd>
<dt>B</dt>
<dd>ABVDEF</dd>
</dl>

效果展示：

A
ABCDEF
B
ABVDEF
列表嵌套： 
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

效果展示：

  • 咖啡
  • 茶
    • 红茶
    • 绿茶
      • 中国茶
      • 非洲茶
  • 牛奶
IT农夫.z
关注
【python三维深度学习】python三维点云从基础到深度学习
叶子的博客
04-07 2万+
从三维点云基础知识到深度学习，将按照以下目录持续进行更新。更新完成的部分可以在三维点云专栏中查看。含数据与python源码。
C/C++学习路线总结与分享
dvlinker的技术专栏
10-07 8万+
C/C++学习路线总结与分享
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
HTML基础学习（全）
qq_44732593的博客
07-11 1万+
HTML概述 HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。 HTML骨架格式 日常生活的书信，我们要遵循共同的约定。 同理：HTML 有自己的语言语法骨架格式： <HTML> <head> <title></title> </head> <body> &
javaScript学习笔记（一）js基础
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
HTML基础学习
qq_37235798的博客
09-06 374
HTML的基础属性介绍。 什么是网页？      一个html文件，就是一个网页 什么是网站？      把所有的网站资源文件（html，css，js，图片，视频等）整合到一起的一个文件夹 什么是html？      HTML指的是超文本标记语言（Hyper Text Markup Language） 什么是XHTML?      XHTML指可扩展超文本标记语言（标识语言）（Ex...
linux基础学习方法指导（学习方法+基础命令用法）
景天科技苑
12-31 1万+
1、学习工具：笔记类app:notepad++云笔记有道云笔记印象笔记markdown博客头脑风暴思维导图：xmind2、学习模式：学习时间：不能中断，持续学习，视频学习与实际操作结合学习方向：以企业要求来学习总结分析讨论3、学习新的技术：去网上书店看书籍，看目录，在目录中找相同的知识点根据这些知识点去查找相关资料把这些知识用思维导图画出来注意知识的时效性，注意设置时间节点，并按时实施注意总结，整理出自己的想法发布出来。
学习基础的html代码知识（入门篇）
weixin_56134381的博客
03-18 6639
Html介绍 1、定义 HTML(Hyper Text Markup Language ) ： 中文译为“超文本标记语言”，主要是通过html标记对网页中的文本，图片，声音等内容进行描述。 HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”，通过超链接可以实现网页的跳转。从而构成了丰富多彩的Web页面。 2、结构 1、HTML基本文档格式 1<!DOCTYPE html> 2 <html lang="en"> 3
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4779
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML + CSS - 网页布局之一般布局&浮动布局
qq_51222843的博客
09-11 1200
讲解CSS中的一般布局以及浮动布局
XWiki中添加 html 二次编辑失效
galoiszhou的博客
09-12 295
使用 XWiki 中的 HTML 宏：如果标准的 Markdown 语法和 XWiki 的链接语法都无法工作，可以考虑使用 HTML 宏，它可以让你在 XWiki 页面中插入纯 HTML 代码，而不会被自动转换回 Markdown。如果直接在 XWiki 中添加 html, 例如 修改颜色, 新窗口打开主页面等功能, 首次保存是生效的. 如果再次编辑, 则失效, 原因是被转换成了 Markdown 的代码, 而 Markdown 不支持.解决这个问题可以使用 HTML 宏.
html 中如何使用 uniapp 的部分方法
weixin_59685936的博客
09-11 346
好了，现在就可以 uni. 使用相关的方法了。
【HTML】Html标签
千里之行，始于足下
09-12 994
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
Openlayers 报错记录 Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘:
Liszter
09-12 460
原因是引用的图层得配置跨域问题。这是浏览器对canvas 设置的导出安全策略。每个引用的图层添加一个。即可、、、 不用谢、、
HTML贪吃蛇游戏
最新发布
weixin_65477256的博客
09-15 1012
贪吃蛇是一款经典的休闲益智游戏。本文将通过HTML5和JavaScript详细解析如何实现一个简易版的贪吃蛇游戏。游戏的主要逻辑包括蛇的移动、碰撞检测、食物生成等功能。以下是游戏的完整代码及注释解析。（纯属好玩）
HTML中2种实现点击后出现隐藏列表的方法
qq_39551449的博客
09-13 242
script>}else{// }// });</script>
requests-html的详细使用方法
2301_79698214的博客
09-11 376
requests-html是一个Python库，用于发送HTTP请求并解析HTML。它基于 requests 和 pyquery 库，提供了一种更简单和更方便的方式来获取和处理网页内容。以上是requests-html的一些常用使用方法，可以根据实际需求灵活使用。
python爬虫基础:了解html
是哥哥呀的专栏
09-10 352
【代码】python爬虫基础:了解html。
HTML与CSS基础学习指南
"HTML和CSS是构建网页的基础，本学习笔记主要涵盖了HTML的基本概念、结构、标签语法以及常用标签的介绍。HTML是超文本标记语言，通过标签定义网页内容和结构，如<!DOCTYPEhtml>用于声明文档类型，<html>是根元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值