HTML入门基础1

1  HTML基本概念

HTML即超文本标记语言,由一些标签来将网页的内容表示出来。不需要编译,直接由浏览器执行,其实质是一个后缀名为.html或者是.htm的文本文件。对大小写不敏感。

2  基础语法

HTML基本结构




    
    网页标题


    网页主体内容


HTML标签:一般成对出现,分为开始标签(如

)和结束标签(如

)。也有单标签,即只有结束标签(如)。
HTML元素:从开始标签到结束标签的所有代码,称为HTML元素。
标签属性:可以在开始标签里定义元素的属性。
语法:<标签名 属性名1="值" 属性名2="值"... ... >... ...

3  常用标签

3.1  文字和段落

标题: h1~h6
段落: p
align对齐属性值:可以选择p标签里的段落内容的对齐方式。

HTML入门基础1_第1张图片

换行: br/ 是单标签
空格:  
预格式: pre 保持编辑器里的格式,在编辑器里是什么格式,在浏览器中显示的就是什么格式,不必再输入空格  和换行标签。
水平线: hr/ 是单标签

HTML入门基础1_第2张图片

3.2  格式

斜体: i 或 em
粗体: b 或 strong
上标: sup
下标: sub
特殊符号:

HTML入门基础1_第3张图片

3.3  列表

无序列表基本语法

  • 列表项1
  • 列表项2
  • 列表项3
  • ...

ul的type属性值:可以设置列表项前面的样式,默认样式是实心圆点。


有序列表基本语法

  1. 列表项1
  2. 列表项2
  3. 列表项3
  4. ...

ol的type属性值:可以设置列表项前面的样式,默认样式是数字。


HTML入门基础1_第4张图片

定义列表基本语法
注意:dl、dt、dd标签组合使用。dt和dd是同级标签。dd前面自动缩进。

列表项
列表项描述
列表项描述
列表项
列表项描述
...

列表标签使用场景:网站导航条、新闻列表、电商网站商品分类、商品排行榜等。
注意,在实际开发中,往往需要把ul和ol前面的默认编号去掉,不使用type属性而使用图片代替。

3.4  图片

img是单标签,基本语法:

当图像无法显示时显示的文本

img属性值:


HTML入门基础1_第5张图片

绝对路径:从盘符开始写起,写到需要的图片为止。
相对路径:从当前正在编辑的HTML文件开始写起,写到需要的图片为止。
当图片与当前HTML文档在同一目录中,直接写即可。
当图片在当前HTML文档的上一级一目录中,用../定位到上级目录。
当图片在当前HTML文档的下一级一目录中,用下一级的文件夹名定位到下一级文件夹。
开发中要用相对路径,不用绝对路径。因为一旦整个网站的文件夹移动了位置,用绝对路径方式就会导致图片加载失败。

宽和高如果设置成定值,图片大小固定为该定值;如果设置成百分比,该百分比是以图片的父容器大小为基准的。

3.5  超链接

基本语法:

内容

其中,当链接到同一个网站内时,使用相对路径;当链接到外部网站时,使用绝对路径。


HTML入门基础1_第6张图片

target属性:_self是默认值,效果是在当前窗口打开新的页面; _blank的效果是创建新的窗口打开新的页面。
title属性:当鼠标移动到超链接上时的提示文字。

同一页面内的锚链接:当一个网页内容太多,需要先定义一个目录,然后点击目录跳转到页面的相应位置。锚链接实现在同一个页面内跳转到不同的位置。
首先在页面内需要跳转到的地方定义锚点,用到的是a标签的name属性。接着在页面最上方添加目录,把相对应的锚点绑定到目录上,用到的是a标签的href属性,属性值是#号加上name的值。点击目录,目录就可以根据name属性跳转到相应位置了。
基本语法:

这里是顶部
水果
蔬菜
运动

水果

  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
返回顶部

蔬菜

  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
返回顶部

运动

  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
返回顶部

不同页面的锚链接:如果需要点击第一个网页的某个目录,跳转到另一个网页的某个位置,则需要在href属性的值的#号前面加上跳转的网页的名称(当两个网页在同一级目录下时)。
基本语法:例子中的目录在index.html文件里,而跳转到index2.html页面的不同位置



这里是顶部
水果
蔬菜
运动


    

水果

  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
  • 香蕉
返回顶部

蔬菜

  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
  • 西红柿
返回顶部

运动

  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
  • 游泳
返回顶部

邮件应用:给文字添加邮件链接,点击链接文字时即可打开电脑上的邮件发送软件进行发送。
基本语法:

意见反馈

文件下载:给文字添加下载链接,点击链接文字即可下载对应的文件。href属性直接写该文件所在位置的路径。注意文件一定是要压缩的,如果不压缩,点击链接文字会直接打开该文件而不是下载。
基本语法:

点我下载

你可能感兴趣的:(HTML入门基础1)