博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Python Day 8: html 基本知识
阅读量:7086 次
发布时间:2019-06-28

本文共 9992 字,大约阅读时间需要 33 分钟。

从别人截取过来的少了图  源自 https://www.cnblogs.com/46ly/p/5740144.html

HTML基础知识总结经过这段时间的学习,对于html的一些基础知识有了一定的了解。所谓好记性不如烂笔头,唯有一点点累积,才能汇聚成知识的海洋。现在,我对这段时间的学习做一个总结。一、HTML的定义   HTML,超文本标记语言,写给浏览器的语言,目前网络上应用最广泛的语言。HTML也在不断的更新,最新版本已经出现了HTML5。在HTML5中出现了许多新特性,也遗弃了一些旧元素。我们写好html文件后,在浏览器中打开。主流的浏览器包括IE、Firefox、Chrome、Goole等。二、HTML标签元素HTML元素由开始标签和结束标签组成。如

/

,

。虽然现在我们还不知道具体标签代表的意思,但标签一定是这样的格式:有一对开始<>和结束。一般标签名推荐用小写。标签具有属性,属性用来表示标签的特征。比如,我们用大小这个属性,来衡量一个苹果。所以,大小可以用来表示苹果的特征。属性时写在标签里面的,而且是开始标签内。三、HTML 的基本结构结构由网页的头部和网页的身体组成。如下例子:复制代码 这是我的博客 这是我的身体。 复制代码 在上面的例子中,第一个标签是告诉浏览器这是html文档的开始。Html文档的最后一个标签是,是告诉浏览器这是html的终止。标签之间的文本是头部信息,在之间的文本是文档标题,会显示在浏览器的窗口的标题栏。之间的文本是正文。二、规范的html页面1、文档声明在前,要写文档声明语句: ,当然也可以用小写表示。文档声明的作用是告诉浏览器该文档遵循html规范。2、标题一般情况下,我们都会设定html文档的标题。这样的作用是使用户看起来感觉友好。标签为,标签内放标题名称。3、页面编码编码的种类有多种,但常用的是utf-8和gb2312。utf-8为多国语言编码,gb2312为中文简体编码。对于编码的详细问题,可以浏览博客。设置网页编码的语句为
,是在标签内定义的。4、页面关键字,内容我们可以在文档中设置一些关键词,内容介绍。这样的好处是,当我们的网页发布在网上,用户可以通过在搜索框中输入关键字,找出一些比较符合的网页。这样一来,我们的网页便可以更容易地被别人访问。 四、常用元素 1、 换行符
。换行对于文本编辑来说是最正常不过的了。当文字写满一行,需要换行。或者根据需要,在文本中换行,这都是可以的。如下例子: 我要换行
换行后 2、段落

在写文章时,我们可以用p标签来定义一个段落。如下定义了两个段落:复制代码

UTF-8。UTF-8就是在互联网上使用最广的一种unicode的实现方式。

GBK编码,包括了GB2312中的编码,同时扩充了许多,通行于大陆。

复制代码在定义了段落后,可以利用属性align来对段落进行设置。属性align的值包括left(左对齐)、center(居中对齐)、right(右对齐)三种。

UTF-8。UTF-8就是在互联网上使用最广的一种unicode的实现方式。

3、标题。标题有六种大小h后的数字越大,说明标题越大。分别为复制代码

标题1

标题2

标题3

标题4

标题5
标题6
复制代码 4、文本格式化,一些常用于设置文本字体的元素: 定义粗体文本
定义斜体文本
定义删除文本
定义上标字
定义下标字
效果图如下: 5、定义超链接 a标签用来定义一条超链接,其中要有的是href属性,href的作用是指明超链接要链接到的网址。除了href属性,还有title属性表示链接的提示信息。target属性表示链接的打开方式,即当点击了链接,选择是在另一个页面打开还是本页面打开。其属性值包括_blank(新的空白页)、_self(当前页),_top(当前页)。百度一下 href的值可以是外部链接,也可以是内部文件,如***.html文件。外部链接内部链接 href也可以链接到别的地址,如邮箱、电话、sms。邮件链接拨打电话发送短信6、 锚点有时我们在浏览网页时会发现,有些网页比较人性化,会有点击返回顶部的按键。这样的效果其实用锚点标签就能做到。锚点就是点击使用户跳到文档的某个部分。 如代码例子:跳转

代码代码

7、图像属性属性值说明srcurl图像资源的地址width像素(px)图像宽度height像素(px)图像高度alt替代文字图片的替代文字如下:风景7、地址的当我们引入一个文件时,要写明它的地址,也就是目录所在。分成以下几种情况:情形 html文件位置 图片位置 写法同一个目录 D:/html/demo.html D:/html/01.jpg 下一层目录 D:/html/demo.html D:/html/img/01.jpg 上一层目录 D:/html/demo.html D:/01.jpg 同一层不同目录 D:/html/demo.html D:/img/01.jpg 相关说明:./ 当前目录../ 回到上一层目录images/ 进入一层目录../images/ 回到上一层目录,然后再进入images目录7、列表(1)、无序列表。Html中列表也是常用的元素。无序列表用
表示。说明:属性:type属性值: 列表前的符号 disc    实心原点 circle     符号为空心圆 square     符号为方形例子如下:复制代码
  • 苹果
  • 香蕉
  • 雪梨
复制代码复制代码
  • 苹果
  • 香蕉
  • 雪梨
复制代码复制代码
  • 苹果
  • 香蕉
  • 雪梨
复制代码(2)、有序列表有序列表使用数字或字母系统来组织列表里包含的信息。有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。说明:属性 属性值 说明type 1、 a 、 A、i、I 用来设置项目前面的标记start 数值 排序的起点数值复制代码
  1. 苹果
  2. 香蕉
  3. 雪梨
  1. 苹果
  2. 香蕉
  3. 雪梨
  1. 苹果
  2. 香蕉
  3. 雪梨
  1. 苹果
  2. 香蕉
  3. 雪梨
  1. 苹果
  2. 香蕉
  3. 雪梨
复制代码(3)、定义列表定义列表用来组织术语和它们的定义。任何信息如果包含多个术语和相对应的解释,都可以使用定义列表进行组织。复制代码
爱好
听歌
爱好
跑步
唱歌
复制代码10、 HTML 实体字符。在html中,有些特殊字符是需要用html语言表示出来的。一个字符实体包含三个部分:一个&符,一个实体名或者一个实体号,最后一个分号(;)。如下表格所示:* 实体名是大小写敏感的。实体字符 字符实体 大于号 (>) > 小于号 (<) <引号 (") " 注册商标(®) ® 版权(© ) © © & 10、 图像热区平时我们在浏览网页时,当鼠标经过一张图片中的某个位置时,发现是可点击的。也就是说,我们点击这个部分,就会链接到别的地方。创建图像热区想要用b标签把图片插入进来,然后使用标签在刚才插入的图片里划分热区。 Rect:矩形 左上角坐标与右下角坐标(x,y,x,y)Circle:圆形 圆心坐标,半径 (x,y ,r)Poly:多边形 各顶点的坐标 (x,y,x,y,x,y。。。)说明:URL 图像的地址usermap 表示要使用#后面的那个名字的标签来为图片划分热区shape 热区形状(rect矩形、circle圆形、poly多边形 )coords 形状的坐标值注:usemap的值要与map的name值保持一致。坐标可以通过PS软件--菜单栏导航器----信息---坐标值。例子如下:热区范围为一个矩形复制代码   复制代码 在这里我设置了新疆为图像热区,热区范围为一个矩形。点击地图中的新疆,就会跳转到一张图片中。要注意的是要准确的写出热区的坐标,也就是热区的范围。其坐标值可以利用工具ps工具选取。11、 表格表格由
标签以及一个或多个 tr、th或td 元素组成。单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。基本结构:复制代码
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
复制代码row 1, cell 1 row 1, cell 2row 2, cell 1 row 2, cell 2说明:html有10个表格相关的标签。 定义表格标题      定义列   定义表格列的分组
    定义表格
    定义表格主体
    定义表格的表注(底部)
    定义表格的表头
      定义行* 通常很少使用
标签,因为浏览器对它们的支持不好。属性说明:属性 值 说明width px、 % 指定表格的宽度 height px、% 表格的高度border px 指定表格边框的宽度cellpadding px 指定边框与内容之间的空白 cellspacing px、 % 指定单元格之间的空白 align left、 right 、 center 指定表格的对齐方式 valign top、 middle 、 bottom 垂直排列方式colspan 列数 合并列单元格rowspan 行数 合并行单元格bgcolor 颜色值 表格背景色background 图片           表格背景图bordercolor    颜色值  表格边框颜色      复制代码
      定义一个单元格
      定义表格表头
 
   
复制代码 12、 如下: scrolling属性在没写明的情况下,是根据设定的框架高度来确定是否需要滚动条的。13、 form 表单html中表单的作用是很强大的。我们生活中经常要用到表单,如一些基本信息的填写。在网页中也是如此,我们免不了注册一些账号,此时用到的表单就比较多了。表单主要负责获取用户填写的数据,并通过浏览器向服务器传送数据。表单使用标签(
)定义。表单的基本结构:复制代码 用户名:
密 码:
复制代码说明:属性 说明name 表单的名称action 表单提交地址method 表单数据提交的方式 (get:在url地址上面传送参数到服务器,post:在后台传送参数到服务器)enctype MIME类型 target 打开方式(_blank:在一个新的窗口打开 _self:在相同的框架中调入文档 _top:把文档调入原来的最顶部的浏览器窗口中) 文本域:文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
First name:
Last name:
浏览器显示如下:First name: Last name: 注意:表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。说明:属性 说明type input元素类型 name input 元素的名称value input 元素的值size input 元素的宽度readonly 是否只读maxlength 输入字符的最大长度disabled 是否禁用密码字段密码字段通过标签 来定义:
Password:
浏览器显示效果如下:Password: •••••••••••属性 说明type input元素类型 name input 元素的名称size input 元素的宽度maxlength 定义最多输入的字符数注意:密码字段字符不会明文显示,而是以星号或圆点替代。单选按钮 标签定义了表单单选框选项
Male
Female
MaleFemale*name属性:定义单选框的名称,要保证数据的准确获取,单选框都是以组为单位使用的,在同一组的单选按项要用同一个名称。复选框 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项
听歌
跑步
爱好:听歌 跑步提交按钮 定义了提交按钮.提交隐藏域隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。 上传文件 注意:利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。说明: multiple 控制是否上传多文件mark_wang请选择文件...textarea(表单元素:多行文本域) 说明:属性   说明name   元素的名称rows   指定文本框的高度cols       指定文本框的宽度例:注:此处的文本框宽高是由字符个数组成的。简单下拉框:复制代码
复制代码属性 说明name 下拉列表框的名称 size 下拉列表框的显示行数multiple 是否多选disabled 是否禁用selected 设置默认选中的选项value 选项值 labellable 标签的作用是将输入项或选项及其标签文字关联起来。例:复制代码
复制代码 男 女optgroup(表单元素:下拉框分组)复制代码optgroup 元素用于组合选项
复制代码广东广州深圳其他长沙香港
标签定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。使用 input 元素的 list 属性来绑定 datalist。 HTML5新标签标签描述定义供用户输入的表单定义输入域

 

转载于:https://www.cnblogs.com/smile-fish/p/10526703.html

你可能感兴趣的文章
zoj3329(概率dp)
查看>>
CVE-2019-0708 PoC with EXP ( Proof of Concept with Exploits )
查看>>
React Native 之 学习资料
查看>>
NSQ
查看>>
SP2-0618: 无法找到会话标识符。启用检查 PLUSTRACE 角色 SP2-0611: 启用 STATISTICS 报告时出错...
查看>>
isolate-user-vlan隔离用户vlan的配置
查看>>
【linux下dhcp服务的简单搭建及优化部署】
查看>>
面试缺点
查看>>
位置属性
查看>>
Redis
查看>>
asp.net状态保持
查看>>
控制文件自动备份篇
查看>>
HTTP参数详解
查看>>
自创本派高考理数试题集现在发布
查看>>
取得给定月份的第一天和最后一天的日期
查看>>
运行时给java对象动态的属性赋值
查看>>
ftp prompt
查看>>
GDAL源码剖析(一)
查看>>
CCF201604试题
查看>>
ionic + cordova 配置和开发过程中的一些问题
查看>>