速刷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一周目(上)
82 0
|
人工智能 前端开发 JavaScript
|
9天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
80 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
73 7
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
47 6
|
2月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
50 1
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
51 5
|
2月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
39 1
[HTML、CSS]知识点
|
2月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
81 12