NotionNext BLOG https://txsjyy.net/ 这是一个由NotionNext生成的站点 Thu, 10 Aug 2023 06:53:16 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed zh-CN All rights reserved 2023, txsjyy <![CDATA[HTML学习小记1]]> https://txsjyy.net/article/blog1 https://txsjyy.net/article/blog1 Thu, 10 Aug 2023 00:00:00 GMT
😀
作为一个 Web 前端工程师，我的主要工作是制作具有动态效果和交互效果的漂亮界面。而开发网页的最基础技能，就是 HTML。
 

📝 HTML

HTML是什么？

HTML是一种用于创建网页的标记语言，它可以用于描述网页的结构和内容
这就是一段HTML将它放在一个HTML文件里，保存后再双击打开就可以在浏览器的网页上看到Hello world！

HTML标签

或者叫HTML元素，是构成网页结构的一个个小版块
 

文本内容元素

使用HTML文本内容元素来组织在<body></body>里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于“网站易用性”和“搜索引擎优化”很重要。
  1. div
      • <div>元素是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其他元素进行分组，一般用于样式化相关的需求（使用class或id特性）或者对具有相同特性的一组元素进行分组（比如lang）。
      • 应在没有任何其他语义元素可用的时候才使用。
  1. hr
      • <hr>元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。
  1. li
      • <li>元素（HTML列表条目元素）用于表示列表里的条目。
      • 它必须被包含在一个父元素里：一个有序的列表<ol>，一个无序的列表<ul>，或者一个菜单<menu>。
  1. ol
      • <ol>元素表示多个有序列表项，通常渲染为有带编号的列表。
      • 允许包含一个或者多个<li>元素，这些<li>元素可用再包含嵌套的<ol>或<ul>元素。
  1. p
      • <p>元素（HTML段落元素）表示文本的一个段落。
      • 使用CSS margin属性去改变段落之间的间隙，不要再段落之间插入空的段落元素或者 元素。

内连文本元素

内联元素又名行内元素（inline element），和其对应的是块元素（block element），都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左到右的顺序显示，不单独占一行。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异里。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，或者把块元素加上display:inline这样的属性，让它在一行上排列。
  1. a
      • <a>元素可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址、或任何其他URL的超链接。
      • <a>标签可接受短语内容和任何元素或接受流内容的任何元素，但不接受<a>元素。
      • 使用target属性时，添加rel="noopener norefferrer"以防止针对window.opener API的恶意行为。
      • 无障碍建议。
  1. br
      • 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。
      • 不要使用 来增加文本之间的行间隔；应使用CSS margin属性或者<p>元素。
  1. span
      • <span>元素是短语内容的通用行内容器，并没有任何特殊语义。
      • 类似div应该在没有其他合适的语义元素时才能使用，不过<div>是块级元素，<span>是行内元素。
  1. strong
      • <strong>表示文本十分重要，一般用粗体显示。

表格内容元素

用于创建和处理表格数据。
  1. caption
      • <caption>元素展示一个表格的标题。
      • <table>子元素出现。
      • 常出现在<table>第一个子元素的位置。
  1. col
      • <col>元素定义表格中的列，并用于定义所有公共单元格上的公共语义。
      • <col>通常位于<colgroup>元素内。
  1. colgroup
      • <colgroup>表格列组标签用来定义表中的一组列表。
      • 必须是<table>的子元素。<colgroup>必须出现在任何可选的<caption>元素之后，且必须出现在任何<thead>、<th>、<tbody>、<tfoot>和<tr>元素之前。
  1. table
      • 表示表格数据，不许使用其进行页面布局。
  1. tbody
      • 定义表格中的主体内容。
  1. td
      • 定义表格中的单元格内容。
  1. tfoot
      • 定义表格中的脚注内容。
  1. th
      • 定义表格的表头单元格内容。
  1. thead
      • 定义表格的表头内容。
  1. tr
  • 定义表格中的行。

表单元素

创建和处理表格数据。
  1. button
      • 表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。
      • 如果按钮不是用于向服务器提交数据，请确保这些按钮的type属性设置成button。
  1. datalist
      • 用于定义选项列表。
      • 需要与input元素配合使用该元素，来定义input可能的值。使用input元素的list属性来绑定datalist。
      • Safari和Android webview不支持此标签。
  1. fieldset
      • 用来对表单中的控制元素进行分组。
  1. form
      • 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。
      • 如果没有需求，请将表单的autocomplete属性设置成off。
  1. input
      • 用于为基于Web的表单创建交互式控件。
      • 尽量使用button元素替代type-button的input元素。
  1. label
      • 表示用户界面中项目的标题。
      • 尽量使用for属性匹配与之关联的input元素。
  1. legend
      • 域说明元素用于定义它的父元素<fieldset>的内容标题。
      • 必须是<fieldset>的子元素，且必须是第一个子元素。
  1. meter
      • 用了显示一项任务的完成进度。
      • <main>标签不被IE支持，在兼容IE的应用场景中请慎用。
  1. optgroup
      • 在一个web表单中，<optgroup>会创建包含在一个<select>元素中的一组选项。
      • 父元素必须是<select>元素。
  1. option
      • 在web表单中，<option>用于定义在<select>、<optgroup>或<datalist>元素中包含的项。
  1. output
      • 表示计算或者用户操作的结果。
  1. progress
      • 用了显示一项任务的完成进度。
  1. select
      • 表示一个控件，提供一个选项菜单。
  1. textarea
      • 表示一个多行纯文本编辑控件。
 

HTML5新特性

引用的话语

🤗 总结归纳

总结文章的内容

📎 参考文章

  • 一些引用
  • 引用文章
 
💡
有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
]]> <![CDATA[对于博客的思考]]> https://txsjyy.net/article/thoughts1 https://txsjyy.net/article/thoughts1 Thu, 10 Aug 2023 00:00:00 GMT
😀
第一次使用NotionNext。在开始进入程序员生活这一年里看了越来越多的博客网站。从一开始的自己拿三件套加jquery和bootstrap写页面，到wordpress一键式建站，再到vuepress和vitepress用markdown构建文档。页面和交互变得越来越精美，构建的流程也越来越简单。。。
 

📝 对于博客的思考

搭建网页博客将越来越简易化

在不远的将来，人们不需要再借助主流社交媒体就可以轻松拥有自己网页博客
网页博客的历史可以追溯到1991年，当时一些程序员开始使用HTML和一些简单的脚本语言来创建自己的博客。这些博客通常是静态的，只能用来展示一些简单的文本和图片。
随着互联网的普及和技术的发展，网页博客的功能和形式也不断地发展和完善。1995年，Blogger平台诞生，它是一个基于Web的博客平台，可以让用户创建自己的博客，并且可以选择不同的模板和主题。
1998年，WordPress平台诞生，它是一个开源的博客平台，可以让用户创建自己的博客，并且可以选择不同的模板和主题。WordPress平台也吸收了许多其他博客平台的优点，例如分类、标签、评论等功能。
2005年，Movable Type平台诞生，它是一个基于Web的博客平台，可以让用户创建自己的博客，并且可以选择不同的模板和主题。Movable Type平台也吸收了许多其他博客平台的优点，例如分类、标签、评论等功能。
2006年，B2/B2B/B2C网站平台诞生，它是一个基于Web的网站平台，可以让用户创建自己的网站，并且可以选择不同的模板和主题。B2/B2B/B2C网站平台也吸收了许多其他网站平台的优点，例如分类、标签、评论等功能。
然而，随着社交平台如微信、QQ的兴起，不需要任何技术知识和成本搭建个人社交媒体的平台极大地冲击了博客平台的市场。人们更乐意于在各种媒体平台上注册账号运营，而非自己去运营一个博客。

对社交媒体的影响

微信qq等社交媒体平台的兴起极大的冲击了个人博客，但是随着人们对于生活的追求不断提高，在社交层面上更期待展现出个人的独特魅力，也许个人博客的时代会再度来临
随着互联网的普及和社交媒体的兴起，网页博客也逐渐受到社交媒体的冲击。社交媒体的普及使人们更加方便地分享自己的想法和经验，并且可以与其他人进行交流和互动。
然而，社交媒体的用户群体可能不如博客的用户群体大，而且社交媒体的用户可能不太喜欢使用复杂的界面和交互方式。因此，社交媒体可能会对网页博客的发展产生一些冲击。
例如，社交媒体可能会限制网页博客的自由度和创造性，因为社交媒体的用户可能无法很好地管理和组织自己的想法，而且社交媒体的用户可能无法很好地与其他用户进行交流和分享。此外，社交媒体可能会限制网页博客的曝光率和流量，因为社交媒体的用户可能无法很好地利用社交媒体来扩大自己的影响力和曝光度。
虽然社交媒体可能会对网页博客的发展产生一些冲击，但是随着社交媒体的发展和普及，我们可以期待更加多元化和开放的社交媒体生态系统，以及更加多样化和灵活的网页博客生态系统。我们可以期待社交媒体的用户可以更好地利用社交媒体来分享自己的想法和经验，以及更好地与其他用户进行交流和分享，同时也可以期待网页博客的用户可以更好地利用网页博客来展示自己的想法和经验，以及更好地与其他用户进行交流和分享。

🤗 总结归纳

  • 本文主要探讨博客平台的发展历程以及与社交媒体的关系。我认为，博客平台的开发者应更注重用户体验和功能的优化，简化搭建网页博客的流程，以吸引更多用户。虽然社交媒体的兴起对博客平台产生了冲击，但随着社交媒体的发展和普及，我们可以期待更多元化和开放的社交媒体生态系统，以及更多样化和灵活的网页博客生态系统。总之，博客平台的未来有很大的发展空间，需要不断创新和优化。
  • 本文有些内容来源于AIGC，如果有任何不准确的地方，请指出。
]]>