速刷html一周目(下)

简介: 速刷html一周目(下)

续上文

目录

改变文字方向

删除线与下划线

 以下是常见标签

HTML注释

HTML链接

HTML链接语法

HTML表格

HTML列表

 无序列表

 有序列表


[]()改变文字方向

<html>
 
<body>
 
<p>如果浏览器支持的话,下一行从右到左输出</p>
 
<bdo dir="rtl">
right to left
</bdo>
 
</body>
 
</html>

输出如下

[]()删除线与下划线

下划线

删除线

<html>
<body>
<p>我<del>不喜欢</del><ins>喜欢</ins>你</p>
<p>一些老式浏览器并不支持删除线和下划线,会将其显示为普通文本</p>
</body>
</html>

输出如下

[]() 以下是常见标签

标签 描述
定义粗体文本。
定义大号字。
定义着重文字。
定义斜体字。
定义小号字。
定义加重语气。
定义下标字。
定义上标字。
定义插入字。
定义删除字。
标签 描述
定义缩写。
定义地址。
定义文字方向。
定义长的引用。
定义短的引用语。
定义引用、引证。
定义一个定义项目。

[]()HTML注释

HTML中注释格式 例如

<html>
<body>
<!--其实我不是高手-->
<p>我是高手!</p>
</body>
</html>

输出如下

[]()HTML链接

HTML使用超链接与网站上另一个文件相连,方便用户跳转。

<html>
<body>
 
<p>
<a href="www.baidu.com">这几个文字</a>会让你跳转到百度。
</p>
 
</body>
</html>

输出如下

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以通过点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当鼠标指针移动到网页中的某个链接上时,鼠标会显示可交互式操作。

通过使用 标签在 HTML 中创建链接。

有两种使用 标签的方式:

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

[]()HTML链接语法

1.text

开始和结束标签中间的文本被标示为超链接。

若想让超链接被点击后,在新标签页中打开,可以如下操作

visit baidu

2.在HTML中,name被定义成锚,可以使用name属性创建HTML页面中的书签。

书签不会以任何特殊方式显示。

<a name="label">锚(显示在页面上的文本)</a>

锚的名称随你喜欢定义

可以使用id属性来替代name属性。

[]()HTML表格

<html>
<body>
 
<p>表格标签table开始</p>
<p>表格行由tr开始</p>
<p>表格数据由td开始</p>
 
<h4>一列</h4>
<table border="1">
<tr>
    <td>250</td>
</tr>
</table>
 
<h4>一行两列</h4>
<table border=1>
<tr>
    <td>250</td>
    <td>500</td>
</tr>
</table>
 
<h4>两行两列</4>
<table border="1">
<tr>
    <td>250</td>
    <td>500</td>
</tr>
<tr>
    <td>750</td>
    <td>1000</td>
</tr>
</table>
</body>
</html>

输出如图

 border="1"是定义边框,如果只写

表格中的表头用

定义。

空单元格

<html>
 
<body>
 
<table border="1">
<tr>
  <td>Some text</td>
  <td>Some text</td>
</tr>
<tr>
  <td>&nbsp</td>
  <td>Some text</td>
</tr>
</table>
</html>

输出如图

 &nbsp相当于空格,添加之后可以有效避免空白单元格中无边框的情况发生。

[]()HTML列表

标签 描述
定义有序列表。
定义无序列表。
定义列表项。
定义定义列表。
定义定义项目。
定义定义的描述。

[]() 无序列表

<html>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>

输出如图

[]() 有序列表

<html>
<body>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
</body>
</html>

输出如图

\

目录
相关文章
速刷html一周目(上)
速刷html一周目(上)
68 0
|
人工智能 前端开发 JavaScript
|
5天前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
18 1
|
5天前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
14 0
|
1天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
5天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
8 2
|
7天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
15 4
|
4天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
5天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
WK
|
7天前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
23 3