首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML-CSS基础学习

HTML5中: 使用id替代name autocomplete:表单的自动填充功能,on/off novalidate:提交表单不进行验证 HTML5新增的input元素 HTML4中input元素...background-color 背景颜色 background-image 背景图像 background-repeat 背景图像如何铺排填充 background-attachment 背景图像随着对象内容滚动或者固定...background-position 背景图像位置 background-origin 背景图像显示的原点 background-clip 背景向外剪裁的区域 background-size...auto表自动;shape表按照形状定义显示 布局属性 display属性 用来确定页面元素是否显示以及显示方式,不可继承 float属性 用来定义元素是否浮动以及浮动方式 clear属性 用来定义不允许有浮动对象的边...overflow-y属性 指明如果溢出元素内容区域的话是否对内容的上下边缘进行裁剪 overflow -visible 不裁剪内容,可能会显示这内容框外 -hidden 裁剪内容,不提供滚动机制

4.8K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    标签的选择

    */ td, th { display: table-cell; }/*默认为单元格显示*/ caption { display: table-caption; }/*默认为表格标题显示*/ 二、标签的语义性...2、主动减少html标签 1) 减少html标签嵌套:精简代码,是在确认了需求改动不频繁的前提下,能用1层标签的就不要用两层,然后通过css来达到相同的视觉效果; 2) 尽量少使用内联css:就是style...因为背景图、数据图总是让人难以区分,所以接下来小编就给大家好好划分一下: 1、使用img标签 1) 如果图像是内容的一部分或图表或人,使用img标签加上alt属性; 2) 如果你想打印页面并且你想要的图像包括默认情况下使用...img; 3) 使用img(alt文本)图像有一个重要的语义时,比如一个警告图标; 4) 如果依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用img; 5) 如果配合 z-index 伸展背景图像来填补它的整个窗口时使用...img; 6) img会首先加载因为src在html文件本身中,而背景图是样式表中引入的图像,样式表加载后才出现。

    1.2K90

    使用标签承载内容

    (image) 图像存储位置 图像及其宽高 选择正确的图像格式 JPEG GIF PNG 矢量图 figure标签 表格(table) 基本的表格结构 表格的标题 跨行和跨列 长表格 表单(form)...如何收集信息 表单控件(input) 文本框 / 密码框 / 文本域 单选按钮 / 复选按钮 / 下拉列表 提交按钮 / 图像按钮 / 文件上传 组合表单元素 fieldset / legend HTML5...(list-style) 表格的边框和背景(border-collapse) 表单控件的外观 表单控件的对齐 浏览器的开发者工具 图像 控制图像的大小(display: inline-block) 对齐图像...背景图像(background / background-image / background-repeat / background-position) 布局 控制元素的位置(position /...z-index) 普通流 相对定位 绝对定位 固定定位 浮动元素(float / clear) 网站布局 HTML5布局 适配屏幕尺寸 固定宽度布局 流体布局 布局网格

    2.3K20

    HTML以及CSS初级操作

    Interchange Format)的缩写,gif支持透明色,使得Gif图像在网页的背景和一些多层特效的显示上使用得非常多,另外gif格式还支持动画,这是它最突出的一个特点;Bmp格式在windows...以此我们进行分类: 块元素:无论内容的多少,该元素都独占一行 行内元素:内容撑开宽度,左右都是行内元素的可以排在一行 1.2 使用媒体元素在页面中播放视频 1.2.1 html5的媒体元素 视频元素 html5...这种方式不能是内容与表现分离,本质上没有体现CSS的优势,因此不推荐使用。...div标签 块级元素 独占一行 , 可以将页面分割出一块独立的、不同的部分 背景属性 背景颜色 在css中使用backgroun-color来设置背景颜色,与color用法相同 背景图像 在css中使用...来设置 其参数包括 :repeat沿着水平和垂直两个方向进行平铺,no-repeat不平铺并且图像只显示一次,repeat-x只沿着水平方向平铺,repeat-y只沿着垂直方向平铺; 背景定位 主要有三种对应取值

    2.5K30

    (近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备

    =utf-8"> HTML5: HTML5的语法出现就是为了兼容各种不规范的HTML文档,HTML5文档有时可以写成不是一个严格规范的XML文档,但是,还是要强烈要求自己的书写规范...HTML5保留的常用元素主要的: HTML的注解,注解是不会在浏览器中显示的,可以对代码进行解释,有助于其他开发者了解该代码的具体内容。...head是用于定义HTML5文档的页面头部分,在head内部的标签主要有base,link,meta,script,styple,title。 title用于定义文档的页面标题。...: background-clip 设置背景覆盖范围 border-box/padding-box/content-box border-box背景显示区域到边框 padding-box背景显示区域到内边距框...content-box背景显示区域到内容框 background-origin 设置背景覆盖的起点 border-box/padding-box/content-box border-box:背景起点在边框的左上角

    1.1K30

    Web前端HTML入门教程大全

    样式包括背景颜色、文本颜色、边框、边距和填充,在 .important 类下。...这些元素不使用结束标签,因为它们没有内容: 图像" > 这个图像标签有两个属性——一个src属性,图像路径,和一个alt属性,描述性文本。...例如,标题元素将位于与段落元素不同的行中。 每个 HTML 页面都使用这三个标签: 标签是定义整个 HTML 文档的根元素。 标签保存页面标题和字符集等元信息。...内联元素 内联元素格式化块级元素的内部内容,例如添加链接和强调的字符串。内联元素最常用于在不破坏内容流的情况下格式化文本。...例如,一个标签会以粗体呈现一个元素,而标签会以斜体显示它。

    1.5K00

    一文读懂H5新特性的应用

    这样,图像和其说明可以独立于正文内容进行展示。 二、HTML5 表单增强功能 HTML5 对表单进行了显著增强,引入了许多新的输入类型、属性和元素,使表单更加强大和灵活。 1....poster:指定视频加载前显示的预览图像。... 在这个示例中, 标签嵌入了一个视频文件,并提供了多个格式和一个预览图像,以确保跨浏览器的兼容性和用户体验。用户可以通过显示的控件播放、暂停、调整音量、全屏观看视频等。... 元素 元素用于提供 元素的预定义选项。当用户在输入框中键入内容时,会显示一个下拉列表,用户可以从中选择一个选项。... 元素 元素用于显示计算或脚本的结果。它通常与 JavaScript 一起使用,用于显示动态计算值。

    45210

    【HTML基础】HTML的基本结构

    在头部标记中,说明文件标题的标记: (如果标题内容为空,标题显示的是文件本身的名字) ... 浏览器显示页面内容的主体: ...... head标记是HTML文档的头部标记,头部信息不会在浏览器窗口的正文中显示; … ... 可以插入在头部标记中,指定HTML文档的网页标题的标记。...… meta标记可用来描述不包含在标准HTML里的文档信息,例如显示字符集、开发工具、作者、网页关键字、网页描述、页面定时刷新及跳转等。... body标记中填写的是页面中的所有内容,可有文字、图片、表格、表单、音频、视频、超链接等元素; body标记有许多属性,用来控制文档的颜色,背景等。...body标记的属性介绍: ①bgcolor: 用来设置页面的背景颜色,可直接使用颜色的英文名称或对应十六进制数来表示需设置的颜色。 ②background: 用来设置背景图像。

    1.1K30

    前端成神之路-品优购代码规范

    HTML 规范 DOCTYPE 声明 HTML文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明: HTML5标准模版 元素属性 元素属性值使用双引号语法 元素属性值可以写上的都写上 推荐: 段落元素与标题元素只能嵌套内联元素 推荐: 不推荐: 背景图 背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片 PNG 与 GIF 格式,优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率 图像颜色比较简单的,如纯色块线条图标...,优先考虑使用 PNG8 格式,避免不使用 JPEG 格式 图像颜色丰富而且图片文件不太大的(40KB 以下)或有半透明效果的优先考虑 PNG24 格式 图像颜色丰富而且文件比较大的(40KB - 200KB

    70510

    面试100题及答案_三特点带你认识基层岗位常见面试题

    第5期:在html5中,实现输入框占位符的属性是:? 答案:placeholder属性;它提供可描述输入字段预期值的提示信息,该提示会在输入字段为空时显示,并会在字段获得焦点时消失。...第7期:在html5的新特性中,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,结合JavaScript实现绘制图像的元素是?...第18期:在img标签中,当图像加载失败,会用替换文本来显示相关信息,那么,定义替换文本的属性是:? 答案:alt属性,用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。...第20期:在html标签中,定义最小的标题的是:? 答案:标签。 定义最大的标题。 定义最小的标题。 第21期:用于播放 HTML5 音频文件的元素是:?...第28期:在 HTML5 中,哪个元素用于组合标题元素? 答案:元素,用于对网页或区段的标题进行组合。 第29期:在HTML5中,哪个属性用于规定输入字段是必填的?

    1.1K10

    面试题必备-web页面基础

    标题标签 标题标签用来描述一个标题 标签标签总有六级。...网页头部header html5新增语义化标签,定义网页的头部 主要用于布局,分割页面的结构 底部信息footer html5新增语义化标签,定义网页的底部 主要用于布局,分割页面的结构 导航nav html5...head定义文档的头部 头部元素title,script,style,link,meta title定义文档的标题 link标签将css样式文件链接到html文件内 meta定义文档的元数据 每个网页都是由不同的功能模块组成的...背景图片重复background-repeat background-repeat: no-repeat no-repeat: 设置图像不重复,常用 round: 自动缩放直到适应并填充整个容器...space:以相同的间距平铺且填充满整个容器 背景图片定位 background-attachment background-attachment:fixed 背景图像是否固定或者随着页面的其余部分滚动

    2.5K10

    联系我们吧 - 12个联系我们表单和页面设计赏析和学习

    如果说,用户点击了联系页面,用户其实已经在尝试联系你了,这个时候,你需要提供的,不是花哨的设计,而是直观的联系方式,不阻碍用户尝试联系你的行为。...Contact Form 15 特色: 谷歌地图背景 简洁精致的标题 自定义样式提交按钮 CSS3和HTML5技术 优秀的配色方案 该模板是一个基于CSS3和HTML5的简易联系表格,可以在任何不同行业的网站上使用...它有一个自定义风格的按钮,采用了纯色配色方案,响应式设计使其在任何网页和移动屏幕上可以完美显示。该模板发表于2018年5月,采用了最新设计趋势,为你提供一个非常不错的收集用户信息的解决方案。 ?...Bootstrap 3 contact form 特色: HTML代码 视频演示 定制/使用指南 CSS样式 jQuery表单提交 表格验证 服务器端处理 图像背景 Bootstrap 3联系表单是一个完全响应的网站联系页面...这个模板与常见的普通联表单设计完全不同,具有梦幻般的全屏图像背景。该模板还有优秀的配色方案,在深色背景和白色表单之间创建出强烈的对比,刺激用户反馈。

    6.3K30

    前端语言基础【第一篇:HTML5 & CSS】

    (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现,用于标记文本内容的含义 浏览器通过元素标签解析文本内容并将结果显示在网页上...,而元素标签本身并不会被浏览器显示出来 (2) 基本结构 HTML5元素的内容一般以起始标签元素名>开始,以结束标签终止 标题,字符集和关键字等- 网页标题标签,即被收藏以及搜索引擎中搜索出的名称 元数据标签,不显示,但是机器可读,常用于搜索引擎索引(SEO优化) 字符集声明(网页编码声明) 关键词声明...设置文字背景和周围其他元素的空白间距 数字 设置文字背景和周围其他元素的空白间距的绝对值 loop 设置移动文字的循环次数 infinite、正整数 文字移动无限次、文字移动n次 sscrollmount...同样属于块级元素的还有段落标签、表格标签、标题标签-等。 B.

    1.8K20

    HTML入门与进阶以及HTML5

    、多媒体 (一)、插入音频、视频和flash (二)、插入背景音乐 10、浮动框架iframe (一)、浮动框架iframe简介 (二)、设置浮动框架是否显示滚动条scrolling 三、进阶内容 1、...(一)简介 (二)标题语义化 (三)图片语义化 (四)表格语义化 (五)表单语义化 (六)其他语义化 (七)语义化验证 6、HTML5舍弃的标签 四、HTML5 一、什么是 HTML5 1.HTML5...(一)、图像标签 在HTML中,图像标签为。...语法: 属性 说明 src 图像的文件地址 alt 图片显示不出来时的提示文字 title...不过结构语义标签是HTML5的内容,因此这里不展开介绍。 (七)语义化验证 前面这几节,我们介绍了页面语义化需要注意的各个地方。那么平常有什么好的办法来 判断一个页面是否语义良好呢?

    4.8K30

    HTML入门与进阶以及HTML5_html 菜鸟教程

    、多媒体 (一)、插入音频、视频和flash (二)、插入背景音乐 10、浮动框架iframe (一)、浮动框架iframe简介 (二)、设置浮动框架是否显示滚动条scrolling 三、进阶内容 1、...HTML、XHTML和HTML5 (一)HTML 和 XHTML (二)HTML5 2、div和span 3、id和class (一)id 属性 (二)class属性 4、浏览器标题栏小图标 5、语义化...(一)简介 (二)标题语义化 (三)图片语义化 (四)表格语义化 (五)表单语义化 (六)其他语义化 (七)语义化验证 6、HTML5舍弃的标签 四、HTML5 一、什么是 HTML5 1.HTML5...(一)、图像标签 在HTML中,图像标签为。...不过结构语义标签是HTML5的内容,因此这里不展开介绍。 (七)语义化验证 前面这几节,我们介绍了页面语义化需要注意的各个地方。那么平常有什么好的办法来 判断一个页面是否语义良好呢?

    4.1K20

    HTML入门与进阶以及HTML5

    、多媒体 (一)、插入音频、视频和flash (二)、插入背景音乐 10、浮动框架iframe (一)、浮动框架iframe简介 (二)、设置浮动框架是否显示滚动条scrolling 三、进阶内容 1、...(一)简介 (二)标题语义化 (三)图片语义化 (四)表格语义化 (五)表单语义化 (六)其他语义化 (七)语义化验证 6、HTML5舍弃的标签 四、HTML5 一、什么是 HTML5 1.HTML5...(一)、图像标签 在HTML中,图像标签为。...语法: 属性 说明 src 图像的文件地址 alt 图片显示不出来时的提示文字 title...不过结构语义标签是HTML5的内容,因此这里不展开介绍。 (七)语义化验证 前面这几节,我们介绍了页面语义化需要注意的各个地方。那么平常有什么好的办法来 判断一个页面是否语义良好呢?

    3.1K30
    领券