第一讲【初识html】

作者: 码农小红依 | 来源:发表于2019-02-15 21:56 被阅读0次

html的定义

超文本标记语言，标准通用标记语言下的一个应用。是网页制作必备的编程语言

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

<html>
  <head>
    <title>html示例</title>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>

编写你的第一个html

大家所看到的网页截图，就是我上面那一段代码编写出来的，下面叫大家如何构建一个简单的html

编程工具的安装我在这里就不多说了，基本都是傻瓜式安装，一直下一步就行，在这里附上安装教程链接
Sublime https://blog.csdn.net/weixin_40682842/article/details/78727266
VS Code https://jingyan.baidu.com/article/e73e26c089135524adb6a722.html
WebStrom https://jingyan.baidu.com/article/00a07f380d500c82d028dcf0.html

我所用的软件是vs code ,电脑是mac（windows的操作步骤也差异不大），下面将见证你的第一个网页诞生
1.打开vscode,选择新建一个文件

点击后是这样的

按住键盘上的ctrl+s(苹果command+s)会弹出一个保存框

将文件扩展写.html将文件保存为html类型的文件

保存后，你会发现上面一栏变成了你保存的文件名

2.下面开始写代码。代码就是我上面的那一段，建议你照着抄一遍。

<html>
  <head>
    <title>html示例</title>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>

3.写完之后再按ctrl(command)+s保存一遍
4.打开我的电脑（苹果系统打开finder），找到你刚才保存的目录

双击打开，你将看到这样的效果

如果打开方式不是浏览器，请单击右键选择文件打开方式（苹果双指触控）

html标记符

<html>

标记符<html>,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,
它是文件的开头;而</html>,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

<head>

<head></head>；这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。

以下表格列出了 HTML head 元素：

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系(通常外链css文件)
<meta>	定义了HTML文档中的元数据（定义文件的编码方式）
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

重要的head标签<meta>

<body>

<body></body>；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
在body中我们可以添加许多的子元素，下面我列出一个常见的子元素

内容描述（样式标签）

<h1></h1> 最大的标题（一号标题）

<pre></pre> 预先格式化文本（英文全称：PREformatted）

下划线（英文全称：Underline）

黑体字（英文全称：Bold）

斜体字 <tt></tt>打字机风格的字体<cite></cite>引用，通常是斜体

强调文本

加重文本（通常是斜体加黑体）

设置字体大小从1到7，颜色使用名字或RGB（中文全称：红绿蓝）的十六进制值

<BASEFONT></BASEFONT>基准字体标记

<big></big> 字体加大

字体缩小

<DELECT></DELECT> 加删除线

<CODE></CODE>程式码

<KBD></KBD>键盘字

<SAMP></SAMP> 范例

<VAR></VAR> 变量

<BLOCKQUOTE></BLOCKQUOTE> 向右缩排（向右缩进、块引用）

<DFN></DFN> 述语定义

<ADDRESS></ADDRESS>地址标记

^{ 上标字}

下标字

<xmp>...</xmp>；固定宽度字体（在文件中空白、换行、定位功能有效）

<plaintext>...</plaintext>；固定宽度字体（不执行标记符号）

<listing>...</listing> 固定宽度小字体

...；字体颜色

...；字体大小等于1（最小）。

...；字体样式等于无限增大（100像素）

格式标志标签

 创建一个段落（英文全称：Paragraphs）
 定义新行
<blockquote></blockquote> 从两边缩进文本
<dl></dl> 定义列表（英文全称：DefinitionList）
<dt> 放在每个定义术语词前（定义术语、英文全称：DefinitionTerm）
<dd> 放在每个定义之前（定义说明、英文全称：DefinitionDescription）
<ol></ol> 创建一个标有序的列表，默认前面有数字，从数字“1”开始计数，依次叠加，也可以设置为字母或从任何自然数开始计数的列表项（要与<li>配合使用*）
<ul></ul> 创建一个无序的列表，默认前面标有圆点，也可以自己设置为none或者其他形状，如空心圆、方块等。（要与<li>配合使用）
<li> 放在每个列表项之前，若在<ol></ol>；之间则每个列表项加上一个数字，
若在<ul></ul>；之间则每个列表项加上一个圆点
<div></div> 用来排版大块HTML段落，也用于格式化表
<MENU> 选项清单
<DIR> 目录清单
 强行不换行（英文全称：nobreaking）
<hr size='9' width='80%' color='ff0000'>；水平线（设定宽度、外语全称：horizontalrule）
<center></center> 水平居中

表格标签

<Table>
 
　<caption></caption>
 
　<tr>
 
　<th></th><th></th>...
 
　</tr>
 
　<tr>
 
　<td></td><td></td>...
 
　</tr>
 
　<tr>
 
　<td></td><td></td>
 
　</tr>
 
　<tr>
 
　<td></td><td></td>
 
　</tr>
 
　...
 
　</Table>

链接标志表格标志

<a href="一个统一资源定位器"></a>

创建超文本链接。

<a name="书签页"></a>

创建位于文档内部的书签。

<a href="#书签页"></a>

创建指向位于文档内部书签的链接。

常用标签使用示例（加粗即为常用标签）

<html>
  <head>
    <title>html示例</title>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8" >
  </head>
  <body>
    <h1>这是标签h1</h1>
    <p>这是标签p</p>
    <div>这是标签div</div>
    <ul>
      <li>这是一个无须列表</li>
      <li>这是一个无须列表</li>
      <li>这是一个无须列表</li>
      
    </ul>
    有序列表并不常用，这里是做对比
    <ol>
      <li>这是一个有序列表</li>
      <li>这是一个有序列表</li>
      <li>这是一个有序列表</li>
    </ol>
  </body>
</html>

我这里所列的所有标签并不是都需要掌握，只需掌握常用标签即可，其他标签了解即可，如果有时间最好还是去每个标签都敲一下印象有更深刻。

网友评论

Web 前端开发

本文标题：第一讲【初识html】

本文链接：https://www.haomeiwen.com/subject/hrnmeqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！