web技术基础—HTML

  推荐使用VS Code,微软推出的开源文本编辑器,异常的强大,请官网下载( VS Code 最新版)安装。
 
  运行该软件后,点击软件界面左侧第五个图标即可进行插件安装。推荐安装以下插件:Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。
 
  运行code后,请注意在File -> Auto Save 选中,如此code将自动保存我们的代码
 
  HTML中文全称为“超文本标记语言”,HyperText Markup Language,是一种用于网络浏览器编辑和设计的标记语言。
 
  新建工作目录
 
  前面我们已经安装了开发软件 code 及其相关的插件(code下载)。运行该软件,打开/新建一个文件夹,如下图所示:
 
  新建 HTML 文件
 
  接下来在该文件夹下新建一个 后缀名为html 的文件,如下图所示:
 
  新建 HTML 文件
 
  接下来在该文件夹下新建一个 后缀名为html 的文件
 
  在该文件中输入如下内容:
 
  在开发工具 code 中我们已经安装了open in browser插件,因此在 code 的编辑区点击鼠标右键即可看到快捷方式将该文件在浏览器中打开。如下图所示:
 
  HTML元素(elements)
 
  HTML 使用”标记”(markup)来注明文本、图片和其他内容,以便于在浏览器中显示。HTML 标记包含一些规定的”元素”如 ,<header>,<footer>,<article>,<section>,<p>,<div>,<span>,<img/>,</span><aside>,<nav>, 等等。</nav></aside></div></p>
 
  </section></article></footer></header>
 
  检查我们刚创建的 HTML 文档你会发现,整个 HTML 就由一个个元素组成(可以嵌套),而元素则一般由一对标签(tag)构成。
 
  剖析一个 HTML 元素
 
  如下所示的一个用于展示段落的元素:
 
  注释
 
  如同大部分的编程语言一样,在 HTML 中有一种可用的机制来在代码中书写注释 。
 
  注释是被浏览器忽略的,而且是对用户不可见的,它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等。 如果你在半年后重新返回你的代码库,而且不能记起你所做的事情,或者当你处理别人的代码的时候, 那么注释是很有用的。
 
  为了将一段 HTML 中的内容置为注释,你需要将其用特殊的记号
 
  包括起来, 比如:
 
  在 code 软件中,输入Ctrl + /即可快捷的进行注释!
 
  空元素
 
  一般来说,元素都拥有开始标签,内容,结束标签。但有一些元素只有一个开始标签,通常用来在此元素所在位置插入/嵌入一些东西,如下:
 
  元素的属性
 
  元素是可以有相关属性的。属性包含元素的额外信息,这些信息不会在浏览器中显示出来。
 
  HTML 提供了从大到小6级标题,分别是:
 
  ,如下所示:
 
  我们需要知道的文本格式标签如下:
 
  拿百度为例,去访问到另一个页面。
 
  锚点
 
  锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。
 
  先使用id属性生成某元素的锚点,然后再使用超链接指向该锚点即可。
 
  在页面插入一张图片如下:
 
  说明:
 
  src属性为要显示图片文件的位置 URL,即图片文件的路径
 
  alt属性当获取图片出现问题时显示的文字(占位符)
 
  可为图片指定高宽度,但不建议(可能导致图片变形)
 
  代码中,表示行, 表示行中的单元, 是表头的单元(将会加粗显示)
 
  我们也可以使用列表来呈现内容,分为无序列表和有序列表。
 
  无序列表
 
  无序列表使用
 
  标签,默认使用实心圆点作为每项的标志,其它的标志可以是空心圆circle,实心方块square以及不出现标志。
 
  有序列表
 
  有序列表使用
 
  标签,默认使用数字作为每项的标志,其它的标志可以是大写字母A,小写字母a,罗马字母i等
 
  使用表单(form)进行信息的选择或者填写。提交信息,表单中没有name属性的元素将不会提交。
 
  HTML 的元素可以以称为区块 或 内联的方式进行显示。
 
  区块元素
 
  区块元素在浏览器显示时,通常会以新行来开始(和结束)。
 
  内联元素
 
  内联元素相反,他们总是一个接一个进行显示,不会新起一行。
 
  预设格式
 
  如果你想在网页中展示一首诗或一些特别格式的文本,那么请使用pre标签。
 
  特殊字符
 
  在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
 
  如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)
 
  这就是我对HTML的初步学习,相信这为我接下来的学习打好了好的基础。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61658.shtml

张贴在2