《HTML语言控制》课件

语言控制HTML概述HTML基础知识网页结构（超文本标记语言）是用使用标签来定义网页内HTML HTML于创建网页的标准标记语言它容的结构，并告诉浏览器如何显定义了网页的内容，包括文本、示内容图像、视频和音频标签和元素标签是的基本组成部分，用于标记网页内容的特定部分每个标HTML签都包含一个开始标签和一个结束标签，例如...基础语法HTML标签属性元素使用标签来定义网页内容的结构和属性用于提供有关标签的额外信息标签和其内容构成一个元素HTML HTML格式属性以键值对的形式出现，例如中的例如，```标签通常成对出现，例如属性``src`这是一个段落和``表示一个段落元素``标签HTML标题标签段落标签用来定义标题的标签，例如用来定义一段文本的标签，例如H

1、等，用于划分文章结构，用于组织和划分文本H2P链接标签图像标签用来创建链接的标签，例如用来插入图像的标签，例如A，用于连接到其他页面或资源，用于在网页中显示图像IMG属性HTML定义属性是用于提供有关元素的额外信息的名称值对，它用于控制元素的HTML HTML-行为或外观语法属性以名称值对的形式出现，例如图片描述-img src=image.jpg alt=/用途属性用于设置元素的、类、链接地址、图像路径、文本内容等ID元素HTML元素的基本单位标签的语法嵌套结构元素是构建网页的基本单位，由开始标签使用尖括号（）包围，例如表元素可以嵌套，例如标签可以包含HTMLp p标签、内容和结束标签组成示段落元素的开始标签标签，形成嵌套结构b标题HTML标题标签1用于定义网页标题标题级别2从到，表示标题级别H1H6标题样式3默认样式取决于浏览器段落HTML标签P使用1`标签定义段落`换行2段落之间自动换行文本格式3可以使用、等标签对段落内的文本进行格式化````链接HTML链接标签使用标签创建链接a链接地址使用属性指定链接的目标href URL链接文本链接文本是用户点击的文字或图像图像HTML在中，图像通过标签插入标签拥有属性，该HTML`````src`属性指定图像文件的路径例如将显示名为的图像``image.jpg图像标签还支持其他属性，例如属性用于提供图像的描述，`alt`和属性用于设置图像的尺寸`width``height`列表HTML无序列表使用标签和标签创建无序列表ul li有序列表使用标签和标签创建有序列表ol li定义列表使用标签和和标签创建定义列表dl dtdd表格HTML1234表格结构单元格内容跨列和跨行表格标题表格由标签定义，每个单元格可以包含文本、可以使用属性可以使用标签定义表格TABLE COLSPANTH使用标签创建行，并使图像或其他元素跨越多个列，使用标题，通常用于描述表格列TR HTML用标签创建单元格属性跨越多个TD ROWSPAN行表单HTML输入字段表单中最重要的部分是输入字段，例如文本框、密码框、下拉菜单等，用于收集用户的输入信息提交按钮提交按钮用于将表单数据发送到服务器，通常情况下会包含提交或确认等字样验证表单验证可以检查用户输入的有效性，确保数据完整性和准确性，例如必填字段验证、数据格式验证等框架HTML网页结构内容组织框架定义了网页的整体结通过框架，可以将网页内容进行HTML构，就像房子的骨架一样合理的划分和排列页面布局框架为页面布局提供了基础，方便进行内容的排版和设计内联框架HTML嵌入网页响应式设计安全性使用标签嵌入另一个网页或文档内联框架可以自动调整大小以适应周围内容使用标签时，需注意安全问题，iframe iframe避免恶意代码攻击样式HTML样式规则CSS使用选择器来指定要应用样Cascading StyleSheets CSSCSS控制文档的外观和格式式的元素，并使用属性和值来定HTML义样式内联样式外部样式表直接在元素中使用将规则存储在单独的文件中HTML styleCSS属性来设置样式，并通过标签将其链接到link文档HTML字体HTML选择字体设置字体大小设置字体样式设置字体粗细可以使用属性来可以使用属性来设可以使用属性来可以使用属性font-family font-size font-style font-weight选择网页上的字体可以指定置字体的尺寸例如，设置字体的样式，例如，来设置字体的粗细，例如，font-多个字体，浏览器会按照顺序设置字体大小为设置斜体设置粗体size:16px;font-style:italic;font-weight:bold;尝试使用它们例如，像素字体字体font-16family:Times NewRoman,Times,serif;颜色HTML颜色名称例如、、red greenblue十六进制颜色码例如（红色）#FF0000颜色值RGB例如（红色）rgb255,0,0布局HTML块级元素1块级元素占据整行，独占一行，比如段落标签p内联元素2内联元素仅占据所需的空间，可以和其他内联元素并排显示，比如链接标签a浮动3浮动元素可以从文档流中脱离，移动到指定位置，比如图像标签img层HTML层级结构定位层设计布局使用层来组织网页元素，方便管理使用定位属性控制层的位置和大小层可以用来创建复杂的网页布局块HTML块级元素示例12块级元素始终从新行开始，并占据其父元素的整个宽度例如，``、`到```、``和``都是块级元素块级元素特点块级元素通常用于创建网页结构和布局，并提供内容的视觉组织类HTML定义类应用样式组合类使用属性定义元素的类类通过选择器，可以将样式应用于具同一个元素可以拥有多个类，通过空格分class HTMLCSS名可以是任何有效标识符，并且可以在不有特定类的元素这允许你为不同的元素隔这允许你灵活地将多个样式应用于单同的元素中重复使用创建不同的样式，同时保持代码的组织性个元素HTML ID唯一标识选择器CSS属性用于为元素可用于选择器，以选择特HTML IDHTML IDCSS分配唯一的标识符每个页面上定元素进行样式设置的必须是唯一的ID引用JavaScript可用于，以访问和操作特定的元素ID JavaScriptHTML类和HTML ID类ID类用于将样式应用于一组元素您可用于将样式应用于单个元素每个ID以为每个元素设置多个类，允许您创元素只能有一个，确保其唯一性ID建更灵活的样式选择器HTML元素选择器选择器ID选择所有具有特定标签名的元素选择具有特定属性的元素ID类选择器属性选择器选择具有特定类属性的元素选择具有特定属性的元素组合选择器HTML组合选择器后代选择器子元素选择器相邻兄弟选择器用于选择多个元素可以使用用于选择父元素内部的子元素用于选择父元素的直接子元素用于选择与特定元素相邻的元逗号,分隔多个选择器例如使用空格分隔选择器例如使用符号分隔选择器例素使用+符号分隔选择器，p,h1,div选择所有段落，div p选择所有div元素内如，divp选择所有div元例如，h1+p选择紧接在h

1、标题和元素的段落素的直接子段落元素之后的段落div继承HTML样式继承层级关系子元素自动继承父元素的样式属性，例如字体颜色、大小等继承沿着元素的层级结构向下传递，父元素的样式影响子元素盒模型HTML内容填充12盒模型的内容区域是盒子的中填充是内容区域周围的空白区心区域，包含实际的文本或图域，它控制内容与边框之间的像内容距离边框边距34边框是围绕填充区域的线条，边距是边框外部的空白区域，可以设置颜色、样式和宽度它控制盒子之间相互的距离边框HTML边框类型边框宽度12边框类型可设置为（实可以使用像素（）或其他单solid px线）、（虚线）、位来指定边框的宽度，例如dashed（点线）等、或dotted2px5px10px边框颜色3边框颜色可以使用颜色名称或十六进制颜色代码来指定，例如、red或#FF0000rgb255,0,0边距HTML外边距内边距定义元素周围的空间定义元素内容与边框之间的空间填充HTML填充填充值填充属性填充用于在内容和边框之间添填充值可以使用像素、百分比、padding px%•padding-top加空格或其他单位em•padding-right•padding-bottom•padding-left。