HTML基础知识点总结

目录

1.HTML简介

2.HTML基础结构

主要字符:

3.基础知识 

(一)p标签

(二)hr标签

(三)尖角号

(四)版权号

  (五)div和span

div

span

  (六)列表

(1)无序列表

(2)有序列表

(3)自定义列表

(七)img

(八)超链接

(九) table表格

(2)tr和td属性

(3)合并表格

(十)表单标签

总结                                                                                                                                                                                                                                                                          


1.HTML简介

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
  • HTML是一种标记语言,而不是编程语言

2.HTML基础结构




    
    
    
    Document


    

主要字符:

  特殊且固定的文档声明标签
告诉浏览器写的代码是英文的,也可改为别的语言
字符集
头部信息和主题部分
  标题用于更改名字

3.基础知识 

p标签

 p 标签是段落标签可以主动换行


换行标签,可以用于任何地方
加粗文本
文本删除线
下划线
sub为下标签  sup为上标签

hr标签

        可以用于画线



1.第一句是设置线条颜色为绿色2

2.第二句不仅设置了颜色,并且可以支持修改宽度 ,align可将该线条左对齐

尖角号

左尖角号:<
右尖角号:>
空格:
	第一种是 
	该空格所占宽度受字体影响明显,宽度较随机
	第二种是 
	该空格所占宽度正好是一个中文宽度,基本不受字体影响,更推荐

hello <world>

  hello

HTML基础知识点总结_第1张图片

版权号

版权©:©
商标:已申请商标TM为™
	  法定注册商标®为®
    

©

©

®

®

div和span

div

可定义文档中的分区或节(division/section)。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

如果用 id 或 class 来标记

,那么该标签的作用会变得更加有效。

是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是
固有的唯一格式表现。可以通过
的 class 或 id 应用额外的样式。

span

HTML 中的标签被视为内联元素,它类似于 div 标记,但 div 标记特意用于块级元素,而 span 用于内联元素.

它适用于 , , , , ,  等等.

也可以使用 span 标记更改文本的字体。它将有助于负责更改字体大小,颜色,背景颜色,字体样式等

hello worldsports

列表

列表有3种:有序列表、无序列表和定义列表。

有序列表和无序列表都比较常用,而定义列表比较少用。在实际应用中,最常用的是无序列表

(1)无序列表

  • 无序列表项
  • 无序列表项
  • 无序列表项

注意:

1. ul里面只能放li

2.前面是实心圆

3.type中可以写disc(实心圆),circle(空心圆),square(实体正方行),none

(2)有序列表

  1. 有序列表项
  2. 有序列表项
  3. 有序列表项

注意:

1.ol 后面只能跟 li 不能跟其他的标签

2.数字是自动生成的

3.type中可以写:1,a,A,I,i 可以修改前面序号的类型

        start:取值只能是一个数字

ype属性值 列表项的序号类型
1 数字1、2、3……
a 小写英文字母a、b、c……
A 大写英文字母A、B、C……
i 小写罗马数字i、ii、iii……
I 大写罗马数字I、II、III……
  1. 11111
  2. 22222
  3. 33333

(3)自定义列表

可用于图文混排的情况,css对此处有优化,所以用的不多

我是图片
我是文字

img

同级目录

        1. code.jpg

        2. ./code.jpg

    例:

 不同级目录

   

  上级目录,先跳出当前文件夹再找到图片

src 文件路径
alt 无法显示图片时出现的提示文字
title 将鼠标移至图片上会出现提示信息

    

相对路径:指的是同一个网站下,不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言,从而得到相对路径。(多数用相对路径)

绝对路径:指的是文件的完整路径。

超链接

1.HTML用来设置超文本链接

2.在标签 中使用了href属性来描述链接的地址。

百度

此时页面会跳转到浏览器,并出现“百度”的字样,点击此字段会跳转到百度官网

 通过设置图片也可进行超链接操作,更加的直观明了

target属性值 说明
_self 默认方式,即在当前窗口打开链接
_blank 在一个全新的空白窗口中打开链接

table表格


    
1 2
3 4
border 设置边框宽度
bgcolor 背景色

cellspacing="0"

单元缝隙

cellpadding

单元格与内容的缝隙  

                                                                                                                                                                                                                     

tr和td属性

tr table row(表格行)
td table data cell(表格单元格)

单元格

合并表格




    
    
    
    Document


    
1 2 3
4 5 6
7 8 9

 

HTML基础知识点总结_第2张图片HTML基础知识点总结_第3张图片

表单标签




    
    
    
    Document


    
    
用户信息:
密码:

 (1)input标签

大部分表单都是用input标签完成的。

语法:

(2)botton标签可以和input标签互换

(3)placeholder

        placeholder 是HTML5 中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示,一旦用户输入信息该提示就会自动消失。比如:我们在登录时需要输入用户名和密码,它会提示你什么地方输入用户名,什么地方输入密码。

HTML基础知识点总结_第4张图片

总结

由于 HTML 文档属于文本文件,所以我们可以使用任何文本编辑器来创建和修改 HTML 文件,例如 Notepad++、Sublime Text、VS Code 等。                       

你可能感兴趣的:(html)