Python day32_前端_html

html概述和基本结构

html概述

HTML是 HyperText Mark-up Language 的首字母简写。用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页。

html基本结构



            
    
    网页标题


      网页显示内容


说明:“head”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“body”内编写网页上显示的内容。

快捷键:!+tab键

html 文档规范

1、所有的标签必须小写

2、所有的属性必须用双引号括起来

3、所有标签必须闭合

4、img必须要加alt属性(对图片的描述)

5、html5可部分遵守,也可全部遵守,看开发要求。

html注释

快捷键:ctrl+/

html标签

在html语言中, 用尖括号括起来的部分, 我们称为标签.

有成对出现或者单个出现


......

......

......
......

标签的分类

注意:元素即标签

标签按照显示的不同, 可以分为两类:

  • 块元素 (行元素)
  • 内联元素 (行内元素)

块元素的特点:

  • 单个块元素在浏览器中默认独占一行
  • 两个块元素不能够在一行显示, 他们会自动换成两行显示
  • 块元素可以设置宽高等属性.

内联元素:

  • 多个内联元素可以在一行显示
  • 内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果
  • 内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.

常用的块元素标签:

1. 标题标签

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

2.段落标签:

    

人工智能(Artificial Intelligence),英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。

3. 通用块容器标签 div

可以把它当成一个容器

这是一个div元素

常用内联元素标签

1.超链接标签 a

链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线

尖括号包裹的内容可以是文字或者图片

常用格式有下面几种:


第二个网页

百度网站



默认链接
新窗口打开界面
百度

说明:

  • a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址
  • 不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可
  • 如果想要跳转到当前页面的最上方时, 可以使用 #
  • a 标签有 target 属性
    • 如果不设置该属性, 在当前页面打开新页面
    • 如果设置该属性, 则会在新窗口中打开新页面
  • 通过title属性定义鼠标悬停时弹出的提示文字框
  • 通过 text-decoration: none; 可以设置去掉下划线
  • 'text-decoration':'underline' 是设置下划线

2.通用内联容器标签 span

一般在文字段落的中间部分强调某一部分的时候用span

3. 图片标签 img

在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置

图片

说明:

  • src属性主要是添加要展示的图片地址
  • alt属性的作用:
    • 图片加载失败时, 显示的提示信息

补充标签:

空格:在html中, 空格一般会用: 表示 7个  可表示大概两个汉字的缩进
回车: 在html中回车换行一般用
表示 小于号( < ):在html中一般用<表示 大于号( > ):在html中一般用>表示 删除标签: del 倾斜标签: em 行内元素 下划线标签: ins

绝对路径和相对路径

绝对地址:相对于磁盘的位置去定位文件的地址

相对地址:相对于引用文件本身去定位被引用的文件地址

html列表

前端中列表分为两种:

  • 有序列表
  • 无序列表

有序列表

  1. 列表文字一
  2. 列表文字二
  3. 列表文字三

在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开发中较少使用

无序列表

  • 列表标题
  • 列表标题
  • 列表标题

每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

list-style:none; /* 取消列表前面的序号或者是点 */

列表的内容一般是可以链接的,点击链接到新闻或者文章的具体内容,所以具体结构一般是这样的:


emmet 语法

.box>.box1+.box2

#page>div.logo+ul#navigation>li*5>a{Item $}

div#header+div.page+div#footer.class1.class2.class3

html表格

1、标签

声明一个表格

2、标签

定义表格中的行

3、
标签 定义列以及列中的标题 td代表列,th表示列中的标题部分(加粗)

table常用属性:

1、border 定义表格的边框

2、text-align 设置单元格中内容的水平对齐方式,设置值有:left | center | right

3、colspan 设置单元格水平合并 列合并

4、rowspan 设置单元格垂直合并 行合并 行列合并都是td 标签中的属性

5、 border-collapse 设置表格的边线合并,如:border-collapse:collapse; 这个是设置样式

6、border='1' 可以设置table的边框大小 table 属性

html表单

表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:

1、
标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式,一般有“get”方式和“post”方式 使用方式:
2、

页面嵌套

在一个页面中可以开一个局部的窗口,嵌入另外一个页面

制作这样的功能我们一般使用: iframe 标签来实现

使用方法: 


  • src: 设置另一个网页的地址
  • frameborder: 设置这个局部窗口边框的粗细

iframe 可以和 a 标签搭配使用, 呈现切换的效果:
如果 target 的值和 iframe 的 name 值保持相同, 则 a 标签切换后的 href 将作用到 iframe 的 src 上:

001页面
002页面
003页面


你可能感兴趣的:(Python day32_前端_html)