企业网站建设图片,沈阳网页模板建站,会建设简单的网站可以赚钱吗,wordpress 分享插件【HTML】HTML标签实例学习笔记#xff08;待更新#xff09;-黑马程序员
成对出现的标签
标签一般都是成对出现#xff0c;标签之间的关系有包含关系和并列关系两种。 像 head/head为双标签#xff0c;br/为单标签 单标签很少 大多数都为双标签。…【HTML】HTML标签实例学习笔记待更新-黑马程序员
成对出现的标签
标签一般都是成对出现标签之间的关系有包含关系和并列关系两种。 像 head/head为双标签br/为单标签 单标签很少 大多数都为双标签。 !DOCTYPE 文档类型声明作用就是i告诉浏览器哪种 HTML格式来显示网页 lang语言种类 用来定义当前文档显示的语言 1.en定义语言为英语 2.zh-CN定义语言为中文 字符集 meta charset”UTF-8” / :一定要写 否则会出现乱码的情况
标题标签 h1-h6重要 为了使网页具有语义化我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题。即h1-h6。
h1我是一级标题/h1单词head的缩写意为头部、标题。 标签语义作为标题使用并且依据重要性递减。
特点 加了标题的文字会变的加粗字号也会依次变大。 P标签用于定义段落它可以将整个网页分为若干个段落
p/p标签语义将文章分成几段 特点 1、文本在一段落中会根据浏览器窗口的大小自动换行。 2、段落和段落之间保有空隙。 br /换行标签 在HTML中一个段落中的文字会从左到右一次排列直到浏览器窗口的右端然后才自动换行如果希望某段文字自动换行就需要使用换行标签br / 标签语义强制换行 特点1、是一个单标签
文本格式化标签使文字以特殊的方式显示。 标签语义突出重要性比普通文字更重要。 加粗strong/strong或者b/b 倾斜em/em或者i/i 删除线del/del或者s/s 下划线ins/ins或者u/u
div和span标签 div和span是没有语义的它们就是一个盒子用来装内容的。 div这是头部/div 超大的盒子一个人独占一行可以装很多的内容 span今日价格/span 一行上可以多个span。小盒子
图像标签和路径重点 1、图像标签 在HTML标签中img标签用于定义HTML页面中的图像。 alt(图片显示不出来的时候 显示在图片上 图片裂开) title鼠标放到图片上提示的文字 width height border设置图像边框的粗细
img src”图像URL“/图像标签注意点 1、图像标签可以拥有多个属性必须写在标签名的后面。 2、属性之间不分先后顺序标签名与属性、属性与属性之间均以空格分开。 3、属性采取键值对的格式即key”value”的格式属性”属性值“。
下一级 / 上一级../ 相对路径是从代码所在的这个文件出发去寻找目标文件的而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置 绝对路径是指目录下的绝对位置直接到达目标位置通常是从盘符开始的路径。
链接的语法格式 a/a 必须属性href
链接分类target为窗口打开方式
1.外部链接必须以http// 开头_self为默认值 _blank为在新窗口中打开方式。 2.内部链接 3.空链接 4.下载链接 5.网页元素的链接即把中间的文字换成一个图片的格式 6.锚点链接点击链接可以快速定位到页面中的某个位置 成果展示一点击就到了
注释 如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字就需要使用注释标签。 HTML中的注释以!-- 开头以-- 结束 Ctrl / 能够快速的添加注释 注意注释标签是给程序员看的这个代码不执行不显示到页面中的
特殊字符
1.表格标签 1.1表格的主要作用 表格主要用于显示、展示数据 1.2表格的基本语法
1.table/table用于定义表格的标签 2.tr/tr标签用于定义表格中的行必须嵌套在table/table标签中 3.td/td用于定义表格中的单元格必须嵌套在tr/tr标签中 4.字母td指表格数据即数据单元格的内容
1.3表头单元格标签 一般表头单元格位于表格的第一行或第一列表头单元格里面的文本内容加粗居中显示。 标签表示HTML表格的表头部分table head的缩写
1.4表格属性 表格标签这部分属性我们实际开发我们不常用后面通过CSS来设置 这些属性要写到表格标签table里面去 例如
1.5表格结构标签 在表格标签中分别用thead标签表格的头部区域、tbody标签表格的主体区域.
1.6合并单元格 合并单元格方式 跨行合并rowspan“合并单元格的个数” 跨列合并colspan“合并单元格的个数” 目标单元格写合并代码 跨行最上侧单元格为目标单元格写合并代码 跨列最左侧单元格为目标单元格。写合并代码
合并单元格三部曲
-》
1.7表格总结 1.表格的相关标签 我们学习了 table标签 tr行标签 td单元格标签 th表头单元格标签thead表格头部区域标签 tbody表格主体区域标签 合并单元格标签
2.列表标签 表格是用来显示数据的那么列表就是用来布局的。 列表最大的特点就是整齐、整洁、有序它作为布局会更加自由和方便 列表分为三大类无序列表、有序列表、自定义列表。 2.1无序列表重点
标签表示HTML页面中项目的无序列表一般会以项目符号呈现列表项而列表项使用 标签定义。 无序列表的语法格式如下
2.2有序列表 在HTML标签中ol标签用于定义有序列表列表排序以数字来显示并且使用li标签来定义列表项。 有序列表的基本语法格式如下
3.3自定义列表 自定义列表常用于对术语或名词进行解释和描述定义列表的列表项前没有任何项目符号。
在HTML标签中dl标签用于定义描述列表该标签会与dt定义项目/名字和dd描述每一个项目/名字一起使用。 基本语法
2.4列表总结
3.表单标签
3.2表单的组成 在HTML中一个完整的表单通常由表单域、表单控件也称为表单元素和提示信息3个部分构成。
3.3表单域 表单域是一个包含表单元素的区域 在HTML标签中form标签用于定义表单域以实现用户信息的收集和传递。 form会把它范围内的表单元素信息提交给服务器
3.4表单控件表单元素 在表单域中可以定义各种表单元素这些表单元素就是允许用户在表单输入或者选择的内容控件。
1.input输入表单元素 2.select下拉表单元素 3.textarea文本域元素
3.4.1 input input标签用于收集用户信息。 在input标签中包含一个type属性根据不同的type属性值输入字段拥有很多种形式
input/标签为单标签 type属性设置不同的属性值用来指定不同的控件类型 type属性的属性值及其描述如下
例 password密码 输入会隐藏 radio:单选按钮 checkbox复选框 实现多选效果 复选name属性和单选按钮一样需要做到几个的名字一致 submit提交 reset:重置 button:普通按钮 file:上传文件 input的属性 value: checked:单选按钮和复选框可以设置checked属性当页面打开的时候就可以默认选中这个按钮checked”checked” maxlength:输入字段输入的最大长度 name
注意 1.name和value是每个表单元素都有的属性值主要给后台人员使用。 2.name表单元素的名字要求单选按钮和复选框要有相同的name值。 3.checked属性主要针对于单选按钮和复选框主要作用一打 开页面就可以默认选中某个表单元素
3.4.2label标签 label标签为input元素定义标注(标签) label标签用于绑定一个表单元素当点击label标签内的文本时浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上用来增加用户体验
语法
核心 label标签的for属性应当与相关元素的id属性相同
3.4.3select表单元素 使用场景在页面中如果有多个选项让用户选择并且想要节约页面空间时我们可以使 用select标签控件定义下拉列表。 语法
注意 select中至少包含一对option 在option中定义selected”selected时当前项即为默认选中项” 3.4.4textarea表单元素 使用场景当用户输入内容较多的情况下我们就不能使用文本框表单了此时我们可以使用textarea标签。在表单元素中textarea标签是用于定义多行文本输入的控件。 使用多行文本输入控件可以输入更多的文本该控件常见于留言板评论。 语法
1.通过textarea标签可以轻松地创建多行文本输入框。 2.cols“每行中的字符数”rows“显示的行数”我们实际开发中不会使用都是使用css来改变大小
