珠海建站公司,创维网站关键字优化,专业的网站设计师,百度竞价托管费用HTML#xff08;超文本标记语言#xff09; 文章目录 HTML#xff08;超文本标记语言#xff09;1.HTML1.概念2.标签2.1双标签超链接音频标签视频标签无序列表有序列表定义列表表格合并单元格 表单表单项单选框-**radio**文件上传-file多选框-checkbox 下拉菜单文本域-text…HTML超文本标记语言 文章目录 HTML超文本标记语言1.HTML1.概念2.标签2.1双标签超链接音频标签视频标签无序列表有序列表定义列表表格合并单元格 表单表单项单选框-**radio**文件上传-file多选框-checkbox 下拉菜单文本域-textarealabel标签按钮-buttondivspan 2.2单标签图像标签 2.3路径绝对路径相对路径 2.4文本格式化标签2.5字符实体 3.HTML 基本骨架4.注释 1.HTML
1.概念
Hyper Text Markup Language 超文本标记语言
2.标签
2.1双标签
标签解释注意h1~h6标题标签字号依次减小字体加粗独占一行p段落标签独占一行段落之间存在间隙a超链接点击跳转到其他页面audio音频标签播放音频video视频标签播放视频ul、li无序列表ul 标签里面只能包裹 li 标签li标签里面可以包裹任何内容ol、li有序列表ol 标签里面只能包裹 li 标签li标签里面可以包裹任何内容dl、dt、dd定义列表dl 里面只能包含dt 和 dddt 和 dd 里面可以包含任何内容table、tr、th、td表格table 嵌套 trtr 嵌套 td/th。form表单包裹表单项methodactioninput表单项type 属性值不同则功能不同。不换行select、option下拉菜单默认显示第一个optiontextarea文本域多行输入文本的表单控件.双标签labellabel标签作用网页中某个标签的说明文本。经验用label标签绑定文字和表单控件的关系增大表单控件的点击范围。button按钮默认为type“submit”divdiv布局标签独占一行spanspan布局标签不换行
超链接
a hrefhttps://www.baidu.com target_blank跳转到百度/ahref属性值是跳转地址是超链接的必须属性。
target“_blank” 新窗口跳转
target“_self” 当前窗口跳转
herf“#” 为空链接
音频标签
audio src音频的 URL/audio属性作用特殊说明src必须属性音频URL支持格式MP3、Ogg、Wavcontrols显示音频控制面板loop循环播放autoplay自动播放为了提升用户体验浏览器一般会禁用自动播放功能
在HTML5 里面如果属性名和属性值完全一样可以简写为一个单词
视频标签
video src视频的 URL/video
!- 视频播放错误时执行回调myFunction --
video controls onerrormyFunction()/video属性作用特殊说明src必须属性视频URL支持格式MP4、WebM、Oggcontrols显示视频控制面板loop循环播放muted静音播放autoplay自动播放为了提升用户体验浏览器支持在静音状态自动播放
在浏览器中想要自动播放必须有 muted 属性
无序列表
ul 嵌套 liul 是无序列表li 是列表条目。默认为小圆点
ulli第一项/lili第二项/lili第三项/li
/ul有序列表
ol 嵌套 liol 是有序列表li 是列表条目。默认为1、2、3、…
olli第一项/lili第二项/lili第三项/li
/ol定义列表
dl 嵌套 dt 和 dddl 是定义列表dt 是定义列表的标题dd 是定义列表的描述/详情。
dldt列表标题/dtdd列表描述/详情/dd
/dl 表格
标签名说明table表格tr行th表头单元格td内容单元格thead表格头部tbody表格主体tfoot表格底部
表格属性border width cellspacing(/合并相邻边框/)
在网页中表格默认没有边框线使用border属性可以为表格添加边框线。例如 table border1table!-- 标题 --captionnowcoder/captiontrtd/tdtd/tdtd/td/trtrtd/tdtd/tdtd/td/tr
/table注意
在css中书写
/合并相邻边框/ border-collapsecollapse
合并单元格
1.明确合并的目标
2.保留最左最上的单元格添加属性取值是数字表示需要合并的单元格数量
跨行合并保留最上单元格添加属性 rowspan
跨列合并保留最左单元格添加属性 colspan
3.删除其他单元格
注意若使用了thead tbody tfoot 合并单元格时不能跨结构合并。
表单
form action methodget1.action为书写默认提交置当前页面2.methodget表单内所有表单项的值都拼接在url中注意url长度有限制3.methodpost表单内所有表单项的值通过请求体携带对大小无要求。
/form表单项
input 标签 type 属性值不同则功能不同。
type属性值说明text文本框用于输入单行文本。不换行password密码框以点的形式显示radio单选框小圆圈。注意name应该相同checkbox多选框小方块file上传文件date/time/datetime-local时间选择器number数字hidden隐藏域button普通按钮submit提交formreset重置表单email邮箱会进行邮箱格式的校验
input 标签占位文本提示信息。文本框和密码框都可以使用。
input type... placeholder提示信息单选框-radio
属性名作用特殊说明name控件名称控件分组同组只能选中一个单选功能checked默认选中属性名和属性值相同简写为一个单词
性别
input typeradio namegender 男
input typeradio namegender checked 女文件上传-file
默认情况下文件上传表单控件只能上传一个文件添加multiple属性可以实现文件多选功能。
input typefile multiple多选框-checkbox
多选框也叫复选框。 默认选中checked。
input typecheckbox checked 敲前端代码1
input typecheckbox 敲前端代码2
input typecheckbox checked 敲前端代码3下拉菜单
下拉菜单 标签select 嵌套 optionselect 是下拉菜单整体option是下拉菜单的每一项。 北京 上海 广州 深圳 武汉
文本域-textarea
属性cols 列 宽 rows 行 高 默认提示文字
label标签
label 标签-增大点击范围 写法一 label标签只包裹内容不包裹表单控件设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
input typeradio idman
label forman 男 /label写法二
使用label标签包裹文字和表单控件不需要属性
labelinput typeradio 女/label提示支持label标签增大点击范围的表单控件文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
按钮-button
按钮
type属性值
type属性值说明submit提交按钮点击后可以提交数据到后台默认reset重置按钮点击后将表单控件恢复默认值。注意需要重置的元素需被form表单包裹button普通按钮默认没有功能一般配合 JavaScript 使用
div
width父元素宽度 height内容撑开 可设置
这是 div 标答 这是 div 标签 span
width内容撑开 height内容撑开 不可设置
span这是 span 标签/span
span这是 span 标签/span2.2单标签
标签解释注意br换行hr水平线img图像标签多个img不换行
图像标签
img src图片的 URL alt替换文本 title提示文本属性作用说明alt替换文本图片无法显示的时候显示的文字title提示文本鼠标悬停在图片上面的时候显示的文字width图片的宽度值为数字没有单位宽高只写一个等比例缩放height图片的高度值为数字没有单位
src图片的来源例如绝对路径、相对路径、网络路径
2.3路径
绝对路径
1.本地
Windows 电脑从盘符出发 Mac 电脑从根目录/出发
C:/images/mao.jpg
2.网络
https://i0.hdslb.com/bfs/archive/771bd6d35c782a31565675f6d04f00fa1c48d0b9.png
相对路径
./同级…/上一级…/…/上一级的上一级
2.4文本格式化标签
标签双解释效果strong加粗加粗b加粗加粗em倾斜倾斜i倾斜倾斜ins下划线下划线u下划线下划线del删除线删除线s删除线删除线
2.5字符实体
作用在网页中显示预留字符。
显示结果描述实体名称空格nbsp小于号lt大于号gt
3.HTML 基本骨架
htmlheadtitle网页标题/title/headbody网页主体内容/body
/htmlhtml整个网页head网页头部用来存放给浏览器看的信息例如CSS title网页标题 body网页主体用来存放给用户看的信息例如图片、文字
VS Code 快速生成骨架 在 HTML 文件.html中英文配合 Enter/Tab 键
4.注释
!-- 在html中的注释 ctrl/ --