HTML学习笔记1_网站信息页面显示

1. HTML介绍

1. 什么是HTML

HTML是超文本标记语言。

  超文本:比普通文本功能更加强大

  标记语言:使用一组标签对内容进行描述的一门语言,它不是编程语言(不需要进行编译,直接通过浏览器解析就可以执行)。

2. 如何使用HTML

语法和规范:

1.所有的html文件的后缀名都是以.html或者.htm结尾的,建议使用.html结尾。

2.整个html文件分别由头部分<head></head>和体部分<body></body>组成。

3.Html标签都是由开始标签和结束标签组成(也有例外,如:<br />换行)

4.Html忽略大小写的,建议使用小写。

3. HTML相关标签的学习

3.1 标题标签

标题标签使用<hn></hn>,n从1到6逐渐变小。如<h1></h1>,超过6的按6进行显示

特点:加粗加黑显示,单独占用一行。与其他行有一定的行间距。

注释:<!---注释内容--->

快捷键:ctrl+/

3.2 水平线标签

水平线标签<hr />

size属性:水平线高度,单位像素

noshade属性:没有阴影,取值:noshade,表示显示纯色

<hr  size="5" />

<hr  noshade="noshade" />

3.3 段落标签

段落标签:<p></p>

特点:段落标签内的内容是单独的一块内容,与该段的上下方内容都有一定的间距。

3.4 字体标签

1. 字体样式设置标签:<font></font>

  color属性:设置字体的颜色(可以是英文单词也可以是十六进制),如:color="#0000FF"、color="red"

  size属性:设置字体的大小(从1到7逐渐变大,超过7的部分按照7来显示,如:size="3"

  face属性:设置字体的类型(字体类型必须是你本机已经有的),如:face="arial black"

  注意:使用font标签时要结合font标签的属性来进行设置,如果单独使用<font></font>没有任何效果。

2. 字体加粗标签:<b></b>

3. 字体倾斜标签:<i></i>

2. 网站图片信息显示页面

1.图片标签

图片标签:<img />

  图片的位置属性:src

    SRC:

      绝对路径:带有盘符的

      相对路径:

        1.如果是同级,直接写文件名称或者./文件名称

        2.如果上一级:../文件名称(如果是多层,那么多写几个../) 

        3.如果是下一级:写目录名称/文件名称

   width:设置图片的宽度

   height:设置图片的宽度

   alt:当图片无法正常显示的时候给出的提示信息。

3.网站友情链接页面显示

1.列表标签

  有序标签:<ol></ol>

  属性:type有5个取值    start起始位置  reverse:倒序

  无序标签:<ul></ul>

  属性:type有3个取值

2.超链接标签

  <a href=" " target="_self/_blank">点我</a>

       #表示是超链接但是不会跳转

4.网站首页显示页面

1.表格标签

表格标签使用的是<table></table>

<table>

  <tr>

    <td></td>

  </tr>

<table>

Table属性:

  边框:border

  宽度:width

  高度:height

  背景颜色:bgcolor

  边框与边框之间的距离:cellspacing

  边框与内容之间的距离:cellpadding

  居中显示:align

表格的跨行、跨列操作是真对单元格的(对<td></td>标签的操作)

     

 

 

4.补充说明

HBuilder的一些快捷键:

1.快速选中一行:shift+end

2.整理代码格式:ctrl+shift+F

3.加注释:ctrl + /

附录

【1】HBuilder的使用方法:https://www.runoob.com/w3cnote/hbuilder-intro.html

【2】HTML基础教学文档:https://www.w3school.com.cn/html/index.asp

原文地址:https://www.cnblogs.com/lty1661489001/p/12387615.html