第一讲【初识html】

html的定义

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

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

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


  
    html示例
  
  
    

hello world

编写你的第一个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示例
  
  
    

hello world

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



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


  • 如果打开方式不是浏览器,请单击右键选择文件打开方式(苹果双指触控)


html标记符

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

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

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

标签 描述
定义了文档的信息
</td> <td>定义了文档的标题</td> </tr> <tr> <td><base></td> <td>定义了页面链接标签的默认链接地址</td> </tr> <tr> <td><link></td> <td>定义了一个文档和外部资源之间的关系(通常外链css文件)</td> </tr> <tr> <td><meta></td> <td>定义了HTML文档中的元数据(定义文件的编码方式)</td> </tr> <tr> <td><script></td> <td>定义了客户端的脚本文件</td> </tr> <tr> <td><style></td> <td>定义了HTML文档的样式文件</td> </tr> </tbody> </table> <p>重要的head标签<meta></p> <h2><body></h2> <p><body></body>;,网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。<br> 在body中我们可以添加许多的子元素,下面我列出一个常见的子元素</p> <h3>内容描述(样式标签)</h3> <p><strong><h1></h1> 最大的标题(一号标题)</strong></p> <p><pre></pre> 预先格式化文本 (英文全称:<strong>PRE</strong><em>formatted</em>)</p> <p><u></u> 下划线(英文全称:Underline)</p> <p><b></b> 黑体字 (英文全称:Bold)</p> <p><i></i> 斜体字 <tt></tt>打字机风格的字体<cite></cite>引用,通常是斜体</p> <p><em></em> 强调文本</p> <p><strong></strong> 加重文本(通常是斜体加黑体)</p> <p><font size="" color=""></font> 设置字体大小从1到7,颜色使用名字或RGB(中文全称:红绿蓝)的十六进制值</p> <p><BASEFONT></BASEFONT>基准字体标记</p> <p><big></big> 字体加大</p> <p><SMALL></SMALL> 字体缩小</p> <p><DELECT></DELECT> 加删除线</p> <p><CODE></CODE>程式码</p> <p><KBD></KBD>键盘字</p> <p><SAMP></SAMP> 范例</p> <p><VAR></VAR> 变量</p> <p><BLOCKQUOTE></BLOCKQUOTE> 向右缩排(向右缩进、块引用)</p> <p><DFN></DFN> 述语定义</p> <p><ADDRESS></ADDRESS>地址标记</p> <p><sup></SUP> 上标字</sup></p> <p><SUB></SUB> 下标字</p> <p><xmp>...</xmp>;固定宽度字体(在文件中空白、换行、定位功能有效)</p> <p><plaintext>...</plaintext>;固定宽度字体(不执行标记符号)</p> <p><listing>...</listing> 固定宽度小字体</p> <p><font color=00ff00>...</font>;字体 颜色</p> <p><font size=1>...</font>;字体 大小等于1(最小)。</p> <p><font style ='font-size:100 px'>...</font>;字体 样式等于无限增大(100像素)</p> <h3>格式标志标签</h3> <p><strong><p></p> 创建一个段落 (英文全称:Paragraphs)</strong><br> < br />定义新行<br> <blockquote></blockquote> 从两边缩进文本<br> <dl></dl> 定义列表(英文全称:DefinitionList)<br> <dt> 放在每个定义术语词前(定义术语、英文全称:DefinitionTerm)<br> <dd> 放在每个定义之前(定义说明、英文全称:DefinitionDescription)<br> <ol></ol> 创建一个标有序的列表,默认前面有数字,从数字“1”开始计数,依次叠加,也可以设置为字母或从任何自然数开始计数的列表项(要与<li>配合使用*)<br> <strong><ul></ul> 创建一个无序的列表,默认前面标有圆点,也可以自己设置为none或者其他形状,如空心圆、方块等。(要与<li>配合使用)</strong><br> <li> 放在每个列表项之前,若在<ol></ol>;之间则每个列表项加上一个数字,<br> 若在<ul></ul>;之间则每个列表项加上一个圆点<br> <strong><div></div> 用来排版大块HTML段落,也用于格式化表</strong><br> <MENU> 选项清单<br> <DIR> 目录清单<br> <nobr></nobr> 强行不换行(英文全称:nobreaking)<br> <hr size='9' width='80%' color='ff0000'>;水平线(设定宽度、外语全称:horizontalrule)<br> <center></center> 水平居中</p> <h3>表格标签</h3> <pre><code><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> </code></pre> <h3>链接标志表格标志</h3> <pre><code><a href="一个统一资源定位器"></a> </code></pre> <p>创建超文本链接。</p> <pre><code><a name="书签页"></a> </code></pre> <p>创建位于文档内部的书签。</p> <pre><code><a href="#书签页"></a> </code></pre> <p>创建指向位于文档内部书签的链接。</p> <h3>常用标签使用示例(加粗即为常用标签)</h3> <pre><code><html> <head> <title>html示例

这是标签h1

这是标签p

这是标签div
  • 这是一个无须列表
  • 这是一个无须列表
  • 这是一个无须列表
有序列表并不常用,这里是做对比
  1. 这是一个有序列表
  2. 这是一个有序列表
  3. 这是一个有序列表

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

相关要求

在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。

  1. 文本标记语言源程序的文件扩展名默认使用htm(磁盘操作系统DOS限制的外语缩写为扩展名)或html(外语缩写为扩展名),以便于操作系统或程序辨认,除自定义的汉字扩展名。在使用文本编辑器时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。

  2. 超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)“ (注意此字母必须小写,方可空格)”表示非换行空格;表示文件路径时使用符号“/”分隔,文件名及路径描述可用双引号也可不用引号括起。

  3. 标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号“ (注意此字母必须小写,方可空格)”;许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。

  4. 标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,而不能使用全角字符。

  5. HTML注释由"“结束结束,例如。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号,即被标识为注释,不予显示。

明天将推出的是将推出的是《html在使用中的重点标签》,敬请期待,谢谢阅读,欢迎纠错

你可能感兴趣的:(第一讲【初识html】)