Web之HTML、CSS、JS

Web标准一、HTML(超文本标记语言)HTML 基本结构标签常用标签1.font标签2.p标签3.注释4.h系列标题5.img6.超链接a7.列表8.表格9.表单

Web之CSS笔记 Web之JavaScript(jQuery)笔记

Web标准

结构标准用于对网页元素进行整理和分类(HTML)表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)行为标准用于对网页模型的定义及交互的编写(JavaScript)

一、HTML(超文本标记语言)

HTML 基本结构标签

标签名含义说明HTML标签页面中的最大的标签,称为跟标签文档的头部注意在head标签中必须要设置的标签是title文档的标题让页面拥有一个属于自己的网页标题

文档的主体元素包含文档的所有内容,页面内容基本都是放到body里面的

常用标签

1.font标签

部分常用属性(html5不支持该标签,建议使用CSS):

color属性:修改颜色

face属性:修改字体(类型)

size属性:修改文本大小(1-7)

font字体标签

font字体标签

2.p标签

全称paragraph,用来表示段落,它是一个行内元素,一个标签独占一行。

......

......


:全称barter rabbet,换行标签,用于插入一个换行符。

3.注释

4.h系列标题

:标题标签,用于定义标题的级别,

是最高级别的标题,依次递减。

标题标签1

标题标签2

标题标签3

标题标签4

标题标签5

标题标签6

标题标签1

标题标签2

标题标签3

标题标签4

标题标签5

标题标签6

5.img

: 图像标签,用于插入图像;通过src属性指定图像的URL,可以是相对路径或绝对路径。

前端 python xml 开发语言 Web之HTML笔记  第1张

常用属性

alt属性:alt属性用于指定图像的替代文本。当图像无法加载时,替代文本会显示在图像的位置。

width和height属性:width和height属性用于指定图像的宽度和高度。可以使用像素(px)、百分比(%)或其他单位来指定。

title:提示文本,鼠标放到图片上,就会有提示

6.超链接a

用于从一个页面链接到另一个页面。

网址直接跳转

相对路径跳转

如果是打不开的文件,则下载之

空链接是刷新

#是回到顶部

禁止链接跳转

网址直接跳转 相对路径跳转 如果是打不开的文件,则下载之 空链接是刷新 #是回到顶部 禁止链接跳转

常用属性

target:打开方式,默认是_self.如果是_blank则用新的标签页打开

锚点

href里面为#id变为锚点功能,点击跳转到id对应的块。

1.快速定位到页面中的某个位置。

第一集

第二集

第三集

第一集剧情

第一集剧情

...

第二集剧情

第二集剧情

...

第三集剧情

第三集剧情

...

第一集 第二集 第三集

第一集剧情 第一集剧情 ...

第二集剧情 第二集剧情 ...

第三集剧情 第三集剧情 ...

2.跳转到不同页面的不同位置

demo.html页面 xxx元素位置

demo.html页面box元素位置

demo.html页面 xxx元素位置

demo.html页面box元素位置

7.列表

ul ——无序列表

  • 无序列表1
  • 无序列表2
  • 无序列表3
  • 无序列表4

无序列表1无序列表2无序列表3无序列表4

ol ——有序列表

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

有序列表1有序列表2有序列表3有序列表4

8.表格

一种用于展示结构化数据的标记语言元素。 表格由

标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

caption标签:表格的标题

thead标签:表格的页眉

tbody标签:表格的主体

tfoot标签:表格的页脚

th标签:行/列的标题,文字加粗显示

height="175px">

鲜鱼价目表
序号鱼的种类价格
1草鱼18.6
2鲤鱼28.9
3食人鱼1000

鲜鱼价目表

序号鱼的种类价格1草鱼18.62鲤鱼28.93食人鱼1000

table标签的属性

border=“1px” 设置边框bgcolor=“green” 设置背景颜色bordercolor=“yellow” 设置边框颜色width=“300px” 设置表格的宽度height=“175px” 设置表格的高度table表格里的边框是带有间距的 解决方案就是给table标签加: style="border-collapse: collapse;" 去掉边框间的间距align=“center” 设置表格本身的水平对齐方式,注意不是文字居中,而是整张表格在页面居中显示

tr标签的属性

align=“” 设置内容的水平对齐方式 left靠左/center居中/right靠右valign=“” 设置内容的垂直对齐方式 top靠上/middle居中/bottom靠下

td标签的属性

colspan=“n” 跨列,从当前单元格开始,向右合并n个单元格(n也包含当前单元格)rowspan=“n” 跨行,从当前单元格开始,向下合并n个单元格(n也包含当前单元格)

1-11-31-4
2-12-22-32-4
3-13-33-4


1-11-31-42-12-22-32-43-13-33-4

9.表单

HTML 表单用于收集用户的输入信息。 HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。 一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。

表单标签

表单域

input属性

type

type值表单类型text单行文本框passworld密码文本框button按钮reset重置按钮image图像形式的提交按钮radio单选按钮checkbox复选框hidden隐藏字段file文件上传

name属性:给出当前input表单的名字。value属性:表示该input表单的默认值。 1)当input type=“text”、“password”、"hidden"时,value中的值会成为其输入框的初始值; 2)当input type=“button”、“reset”、"submit"时,定义按钮上的显示的文本; 3)当input type=“checkbox”、“radio”、"image"时,定义与输入相关联的值; 注意:input type="checkbox"和input type="radio"中必须设置value属性;value属性无法与input type="file"一通使用。style属性:为input元素设置简单的CSS样式。width属性:当input type="image"时,通过width属性控制元素的宽度;height属性:当input type="image"时,通过height属性控制元素的高度;maxlength属性:定义input元素中可输入的最长字符数。

select和option创建下拉式表单

selected标注默认选中的内容。

textarea标签创立多行文本框

表单示例

表单




性别:


游泳

看书

爬山

思考


头像前端 python xml 开发语言 Web之HTML笔记  第2张



000000

相关链接

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。

发表评论

返回顶部暗黑模式