html下拉列表不居中_每个非网站开发人员都应该了解的21个HTML基础知识

news/2024/5/9 9:51:14/文章来源:https://blog.csdn.net/weixin_39532352/article/details/110109103

1.标题

标题可能是最容易学习的代码之一,并考虑到 它们对您的SEO至关重要,这是一件好事。共有六种不同类型,如下所示。要创建标题,只需将文本包装在所选的标题标签中:

5a0c517c0ca34f3c8a1364d01e7b18e3.png

2.段落

没有一段要详细说明该消息的标题会是什么?要获得类似于您现在正在阅读的段落,只需将文本包装在

标记中,如下例所示,并且别忘了用 p>标记将其关闭!

嘿,我是一个段落! p>

嘿,我是一段!

3.链接

如果不将您本已丰富的内容链接到其他相关文章和网站文章,则入站营销就算什么。尝试使用以下代码在段落中链接单词或短语:

让我们访问IMPACT的真棒网站!

奇迹般地变成:让我们访问IMPACT的真棒网站!

代码语句的href部分指定了您要链接访问的目标网站地址。

4.图片

这很有趣。图像使一切变得更好,它们使您的内容对读者更具吸引力。插入这样的图像:

“

image标签为空,因为它仅包含属性,因此不需要关闭。上面列出的属性包括“ class =“ lazy” data-src“或图像URL。我还包括了图像替代文本(对于SEO而言很重要),以及一些样式属性(宽度和高度)。

您可以根据需要自定义图像。哦,对于你们那里所有的小狗爱好者-像我一样-这是我上面编码的实际图像:

6475e67095f217792b658b82124415ec.png

5.换行

换行符也是一个空元素,因此不需要将其关闭。换行符基本上是用
创建的两行文本之间的有意空格。

在此句子下放置换行符。
在此句子上方放置换行符。 p>

在此句子下放置换行符

在此句子上方放置换行符。

转换完上述HTML后,与使用

标记分隔两个段落相比,您可以说第一行和第二行之间的空间较小。添加换行符有助于使句子位于同一段落的不同行中。

6.大胆而坚强

为了使内容醒目,有两个有效的代码元素。但是,我的开发人员告诉我的使用量远超过。不要忘记关闭标签! strong>

将整个句子加粗! strong>
或仅加粗 strong>一个字!

大胆的整句话!
或只加粗一个字!

7.斜体和强调

斜体和强调文本与粗体和强文本相似。有两个代码元素,但一个元素比另一个元素使用更多。在这种情况下,将起作用,但是更常用。

这句话很漂亮 em>

这句话很漂亮。

8.下划线

粗体,斜体,并加下划线。这一个和其他两个一样容易。只需将要加下划线的文本包装在标记中,例如

看,我们可以加下划线! u>

看,我们可以强调!

9.有序列表

有序列表和无序列表之间有区别。有序列表包含数字,而无序列表包含项目符号。它们都遵循相同的结构,但是一个字母会发生变化。

这是有序列表的代码语句。

  1. 是整个“有序列表”,而
  2. 是一个“列表项”。您可以根据需要包括任意数量的列表项。
    249e7114cf09a86d3be382828ee3fee3.png

    10.无序列表

    从一个有序列表切换到一个无序列表,只需要更改一个字母即可。

    4339add0ce377156d7ed2516b53def18.png

    11.上标

    要在文本中插入上标格式,请将要显示为上标的文本包装在标记中。 sup>您将得到类似这样的结果。

    商标应使用上标 TM sup>书写。

    商标应使用上标TM书写。

    12.下标

    如果您知道如何上标,那么您应该知道如何下标。只需使用标记 sub>即可获得这样的文本。

    有时,引文用下标写成。

    有时,引文用下标写成。

    13.水平线

    是否要拆分页面或文章的各个部分?尝试一条水平线!只需使用空元素(无需关闭它)


    在我和句子2之间插入一条水平线。



    嗨,我是句子2。

    在我和句子2之间插入一条水平线。

    嗨,我的句子是2。

    14.标记或突出显示的文本

    我敢打赌,您不知道可以通过HTML代码突出显示文本,是吗?太酷了,太容易了。将要在标记 mark>中突出显示的文本换行,以便获得酷炫的突出功能。

    仅突出显示最重要的注释 mark>。

    仅突出显示 最重要的注意事项。

    15.删除(贯穿)文本

    如果您想在文本上显示穿越效果(也许您创建了一个任务列表,并希望在执行过程中对每个任务进行划线),则有相应的代码。尝试使用标记删除完整的句子甚至一个单词。 del>

    喂狗。 del>写我的博客文章。 del>
    做饭。

    喂狗。
    写我的博客文章。
    做晚饭。

    16.短期和长期报价

    到目前为止,您可能想知道我如何将所有示例都放在文本框中。好吧,惊喜!也有一个代码。它实际上称为块引用或长引号。您可以在下面看到长引号和短引号(普通引号)之间的区别。

    与其余示例一样,所有这些文本都将以blockquote出现。 blockquote>之所以引用这是因为我是大声说出来。 q>

    与其余示例一样,所有这些文本都将以大括号显示。
    我引用此内容是因为我要大声说出来。

    17.设置特定字体

    接下来的几个会变得有些棘手,所以请尝试和我在一起。现在,您知道如何创建标题,段落和样式化的文本,这对您知道可以使用元素“字体家族”轻松更改字体很有用。

    不要忘记所有小的细节,例如等号,引号和分号。查看以下示例。

    我想将此标题更改为Georgia字体。 h4>

    我想将此段落更改为Verdana字体。 p>

    我想将此标题更改为Georgia字体。

    我想将此段落更改为Verdana字体。

    18.设置特定的文本颜色

    该代码使用与上一个示例相同的代码类型,但是使用“颜色”代替使用字体家族。您可以尝试使用实际的颜色(蓝色,红色,橙色等),也可以插入十六进制颜色以自定义品牌的文字。

    今天的天空真的是蓝色。 p>

    火是橘红色的 p>

    今天的天空真的很蓝。

    火是橘红色的。

    19.设置特定的文字大小

    同样,此代码使用相同的基本代码逻辑,但使用元素“ font-size”。将字体大小设置为像素或px。

    将此段落设置为36字体。 p>

    将此段落设置为12字体。 p>

    使此段落大小为36字体。

    使此段落大小为12字体。

    20.设置特定的文本对齐方式

    左,居中,右或对齐。您如何看待您的文字?使用“文本对齐”以任何方式进行设置。

    此段落应居中。 p>

    此段落应右对齐。 p>

    本段应居中。

    本段应右对齐。

    21.桌子

    我把最好的留在了最后!好吧,我不知道这是否是最好的,但我认为这很酷。用于创建表的HTML代码可能会变得非常复杂,但是如果您掌握了基本知识,那么您应该不会有太大的问题。

    我将在下面显示如何创建一个简单表。

    为了易于理解,

    代表表行,而代表表数据。请记住,您可以更改字体,文本大小,文本颜色,文本对齐方式等。
    f257bc765b0a5a18f5fa66b8f1edfee3.png

    开始编码!

    您刚刚阅读的21个代码非常不错,可以开始练习来增强HTML技能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_754225.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无人机官方网站_大疆发布全新编程教育无人机,Mind+编程助力其创意无限!

8月25日,大疆发布了全新编程教育无人机新品—ROBOMASTER TT 创造力套装。作为行业领先教育无人机,该款无人机不仅将强大飞行性能注入轻小机身中,使用大疆行业顶尖飞控算法,保障飞行安全性与稳定性,同时搭载500万高清摄…

python网站开发换行_Python在图片中插入大量文字并且自动换行

问题 如何在图片中插入大量文字并且自动换行 效果 原始图效果图注明 若需要写入中文请使用中文字体 实现方式 from PIL import Image, ImageDraw, ImageFont class ImgText: font ImageFont.truetype("micross.ttf", 24) def __init__(self, text): # 预设宽度 可以…

wordpress include 不生效_wordpress零基础建站(4)-在腾讯云搭建LNMP+Redis+wordpress

今天这篇教程我们开始在腾讯云服务器上搭建wordpress环境并安装wordpress,开始涉及到搭建代码了,对于代码不熟悉的小伙伴也不要着急,我会在教程中对于每条命令执行了什么操作作出说明,只要按照步骤操作即可完成wordpress的搭建。本…

云主机管理神器网站管理助手

云主机越来越普及的时代,很多用户苦于没有合适的windows版的管理工具,IIS太弱而且没法支持到目录安全、PHP环境、mysql数据库等。这里推荐西数管理助手给各位,关键是免费可用! 西部数码网站管理助手是一款面向拥有独立服务…

11个与众不同、令人叹为观止的单页网站

单页网站能够给网站浏览者提供一个简洁、叹为观止的体验。在单一的页面内展示完你需要的内容可能是一个富有挑战性的过程,但许多网页设计师喜欢用这种方法 把网站的内容放在一个令人惊讶的页面设计中。从单页所用的图片和文字,以叹为观止的视觉差滚动效果…

java和seo哪个好,seo和java哪个更好

一个seo行业站点,科学的内容制作应该与seo相关,且内容本身是有人搜索的。seo和java哪个更好是有人搜索的语句,且与seo是强相关的,对于seo教程自学网来讲,这样的内容再适合不过了。 任何一门技术,如果精通&a…

Sogou搜狗搜索引擎登录网站 - Blog透视镜

Sogou搜狗是中国搜狐旗下的搜索引擎,其登录方式也很简单,只要输入网址,验证码即可,不需要注册账号,再进行登录,其他非 * 必填的字段,可留下空白不填,验证码只有4码,也很清…

vue+elementui完美实现博客、网站、个人网站,高仿“张凯博客”实现排版

1.本项目Demo实现灵感来源 张凯博客,采用vueelementui实现编码,最终效果图: 完整源码下载 2.首先创建vue项目,采用开发工具Hbuilder。vue创建项目教程可参考:https://www.cnblogs.com/pyjblog/articles/14349370.html …

vue+element简单实现商城网站首页,模仿小米电商商城(一)

1.本案例灵感来源于小米官网 https://www.mi.com/ 项目演示地址:可私聊作者获取(演示地址不定时变化) 源码 官方截图 产品效果图: 二级菜单、产品详情 购物车 2.首先创建vue项目,采用开发工具Hbuilder。vue创建项目教程…

vue+elementui实现非常好看的博客、网站首页,网站模板

1.效果图,设计上美观大方 源码 2.首先创建vue项目,采用开发工具Hbuilder。vue创建项目教程可参考:(一)Vue——如何创建一个Vue项目(完整步骤) - 㭌(mou)七 - 博客园 3.创建项目后安装elementui…

vue+element简单实现商城网站首页,模仿电商商城

1.安装启动vue项目可参考 vueelement简单实现商城网站首页,模仿小米电商商城https://blog.csdn.net/lucky_fang/article/details/121544242 本项目源码下载https://download.csdn.net/download/lucky_fang/85161752 2.产品效果图 3.项目结构图 4.src/page/top/ind…

衣服、商品、商城网站模板首页,仿U袋网,vue+elementui简洁实现

1.本案例灵感来源于网络 项目演示地址:可私聊作者获取(演示地址不定时变化) 仿照来源:网络案例 以下源码是第一版源码,最新源码请私聊作者获取,或通过博客后面微信名片添加作者 源码https://download.c…

生鲜水果商品商城静态网站,vue+elementui简单实现

1.安装启动vue项目 (一)Vue——如何创建一个Vue项目(完整步骤) - 㭌(mou)七 - 博客园 2.elementui官网 Element - The worlds most popular Vue UI framework 3.如果你下载的是本项目源码,则步骤一中可以不用执行&a…

html+css响应式旅游主题网站模板,旅游网站,企业文化新闻类网站,简单web假期课程作业

1.灵感来源预览 社区、企业、公益共享交流平台_优享人app-优享时代官网 2.demo效果图,同时兼容手机端访问,所有菜单都已完善功能,即拿即用,很简单 源码下载https://download.csdn.net/download/lucky_fang/85320989 手机端访问…

web静态网站,css+html旅游景点网站,web假期作业

1.项目共分为8个网页: 首页、历史文化、景区概况、推荐游玩、美食一览、文化活动、地理位置、联系我们 纯csshtml实现的静态网页,很适合新手学习和使用, 源码下载 如下图,首页: 含背景音乐循环播放,自…

vue+elementui+springboot前后端分离实现学校帖子网站,模拟“淘柳职”学校大作业

一.技术实现 项目演示地址:可私聊作者获取(演示地址不定时变化) 前端 vueelementui; 后端: SpringBootOAuth2Spring SecurityRedismybatis-plusmysqlswagger 二.前言 淘柳职网站:淘柳职 本项目完全是…

程序猿最应去的网站有哪些?

2019独角兽企业重金招聘Python工程师标准>>> 要想成为优秀的程序猿,不仅要有一定天分,常与大神交流,自己多加练习才是正确的方法。下面是一些Quora用户推荐的国外网站,与广大程序猿或者希望学习编程的朋友们分享&#…

通过建立自己的AuthorizeAttribute实现网站的权限管理

2019独角兽企业重金招聘Python工程师标准>>> 当我们用.net MVC构建网站平台的时候,势必会对网站平台的安全性和用户的使用权限进行一个统一的构建,首先在.net MVC 架构中,系统已经将权限管理分为三个层面来进行管理,第…

delphi RAD Studio新版本及路线图 及官方网站 官方 版本发布时间

delphi RAD Studio Berlin 10.1 主要是FireMonkey 移动开发的改动,VCL确实没有多大变化。 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Main_Page http://docwiki.embarcadero.com/RADStudio/Berlin/en/Whats_New EMB 官网地址资源 Bug fix list for RAD …

网站调查方法步骤.

1.查看对方网站pr值2.查看对方在搜索引擎快照的新鲜度3.到http://whois.domaintolls.com查看对方域名注册信息4.到http://www.archive.org查看对方的收录历史5.查看对方在搜索引擎的收录数6.查看对方的外部链接数7.查看对方是否被雅虎目录,开放目录dmoz.org,好123收…