HTML控件元素和css样式基础理解

  HTML (超文本标记语言)

   1.该语言用于编写超文本文档,并在含有浏览器软件的设备上显示,超文本文档指集视频、音频、超链接、文本、图像、图片等多媒体信息为一体的文档。

  标签元素(控件元素)

   1.标签分为行内标签和块级标签,行内标签有small(文本字体小化)、 big(文本字体大化)、 address(文本地址样式化) 、img(加载图片元素) 、a(加载链接)等等。 块级标签有div(块级元素)、ul(列表父元素)、li(列表子元素) 、p(文本)等等。区别就在浏览器中的呈现效果。

  2.每个标签都有独有的功能作用,在浏览器里,只有加载了写入了HTML元素的页面,页面才有东西出现,然后才能在这些控件的基础上做特效。

  3.HTML语言是要符合W3c联盟规范的,W3c也是一直在完善和修整HTML,现在大多数浏览器厂商也都按照该规范制作浏览器。

  

  属性元素 (样式元素)


  1.属性,是给标签元素加载样式的,比如同一个P标签里,同一段文本内容,分别给予两个属性,在浏览器的呈现出来的,是同一个东西,却可以是不同的字体或是颜色。

  2.引入样式的三种方式  行内样式 、内联样式、外部样式。外部样式就需要编写CSS文件也就是层叠样式表。用style标签加载样式表到HTML文档中。

  在head里写上这样一句:<link rel="stylesheet" href="css文件的路径">

  总结:   用上HTML和css一个花花绿绿的网页是可以有的,有内容,有基本的样式。

    

时间: 2024-10-06 14:37:52

HTML控件元素和css样式基础理解的相关文章

背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项

原文:背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项 [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ListViewBase) 基础知识 拖动项 示例1.ListViewBase 的基础知识Controls/CollectionControl/ListViewBaseDemo/ListViewBaseDemo1.xaml <Page x:Class="Windows10.Con

背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter

原文:背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ItemsControl) 基础知识 数据绑定 ItemsPresenter GridViewItemPresenter ListViewItemPresent

如何用JavaScript去操作HTML元素和CSS样式

第3章 你也有控制权(DOM操作) 如何用JavaScript去操作HTML元素和CSS样式,实现简单的动态操作. 3-1 认识DOM 3-2 通过ID获取元素 3-3 innerHTML 属性 3-4 改变 HTML 样式 3-5 显示和隐藏(display属性) 3-6 控制类名(className 属性) 第4章 编程挑战 不断实践,提高技能. 4-1 编程挑战 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta char

js改变元素的class来实现改变元素的CSS样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

使用chrome查看页面元素的css样式

我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. 我们希望看到博客园这张图片的具体信息.就可以打开chrome的开发者工具,点击箭头后选中该图片,这时代码就自动定位到了该元素的HTML代码,如下图所示: 这个页面中,右上方的蓝色阴影下即为图片元素所在的HTML代码,而开发者工具的左下方就是该元素的css样式代码: 其中最上面的是行内样式, 往下有我们对其进行直接的样式设置的代码: 往下有从

MFC的组合框(ComboBox)控件切换下拉样式

由于课题的需求需要做MFC串口程序,看了百度下载的串口助手的界面风格,发现这个设计很好 波特率的组合框只给出了5个可选数值,然后第6个选项是Custom,即手动输入. 实际上DCB结构的BaudRate可选数值太多了,做成下拉框会很长很长,这种做法就是选用最常见的几个选项,不需要用户手动输入,也不需要在很长的列表中去选择. 从VS的属性框中可以看到,组合框控件有3种样式,也就是实现的功能是点击Custom选项时从Drop List切换到Dropdown. 从MSDN可以看到两者对应的宏分别为CB

Android版App的控件元素定位

前言 如何获取页面上各控件元素,无论是Web自动化还是App自动化,此步骤都是非常关键的! Web页面的控件元素可通过开发者选项(Chrome浏览器的F12)来协助定位,App端也是有相应的工具来协助定位的 uiautomatorviewer配置 Android版的元素定位依赖Android Studio里的自带的工具uiautomatorviewer来协助定位:uiautomatorviewer通过截屏并 分析XML布局文件的方式,为用户提供空间信息查看服务. uiautomatorviewe

Webview页面的控件元素定位

前言 现在有很多App都是Hybrid的,即有原生的页面又有Webview的页面,元素的可以通过uiautomatorviewer工具 进行控件元素的定位,Webview页面的则无法通过此方式定位,而是需要Chrome浏览器来协助定位. Webview控件元素定位 1.在手机中打开当前app的webview界面,使用usb连接电脑后, 2.在PC端的Chrome浏览器上输入:chrome://inspect/#devices(网络需FQ才可使用) 3.点击Webview里的inspect,即可弹

获取元素的CSS样式属性值 IE兼容写法

/** * 获取元素的CSS样式属性值 */function css(element, attrName) { /*if (window.getComputedStyle) return window.getComputedStyle(element)[attrName] return element.currentStyle[attrName];*/ return window.getComputedStyle ? getComputedStyle(element)[attrName]: el