安全的网站建设推广,wordpress 出名主题,网站icp申请,有哪些做兼职的网站HTML是什么#xff1f;
超文本标记语言#xff08;英语#xff1a;HyperText Markup Language#xff0c;简称#xff1a;HTML#xff09;是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是#xff1a;一组段落、一个重点信息列表、也可以含有图片和数据表…HTML是什么
超文本标记语言英语HyperText Markup Language简称HTML是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示本文将对 HTML 及其功能做一个基本介绍。
HTML 不是一门编程语言而是一种用于定义内容结构的标记语言。
HTML基础
HTML的组成 HTML由开始标签、内容和结束标签组成。
开始标签(0pening tag): 包含元素的名称(本例为 p)被左、右角括号所包围。开头标签标志着元
素开始或开始生效的地方。在这个示例中它在段落文本的开始之前。
内容(Content):元素的内容本例中就是段落的文本。
结束标签(Closing tag):与开始标签相似只是其在元素名之前包含了一个斜杠。这标志着该元素
的结束。没有包含关闭标签是一个常见的初学者错误它可能会产生奇特的结果。
元素Element开始标签、结束标签与内容相结合便是一个完整的元素。 注意
某些 HTML 元素具有空内容empty content
空元素在开始标签中进行关闭以开始标签的结束而结束
嵌套元素
把元素放到其他元素之中——这被称作嵌套。
例如P标签中嵌套这strong标签
pMy cat is strongvery/strong grumpy./p
块级元素
块级元素在浏览器显示时通常会以新行来开始和结束。例子h1, p, table ,div h2我是二级标题/h2p块级元素/pb内联元素/bb内联元素/bbr 例如上述代码块级元素h2p结束后就会重新换行。
内联元素
内联元素在显示时通常不会以新行开始。例子b, td, a, img
例如上述例子中的b两个标签连接着一起不会换行
空元素
不包含任何内容的元素称为空元素。比如 img 元素例如brhr
img srcimages/firefox-icon.png altMy test image /本元素包含两个属性但是并没有 /img 结束标签元素里也没有内容。这是因为图像元素不需要通过内容来产生效果它的作用是向其所在的位置嵌入一个图像。
属性 属性包含额外的信息这些信息不会出现在实际的内容中可以添加多个属性 属性必须包含 1、一个空格它在属性和元素名称之间。 如果一个元素具有多个属性则每个属性之间必须由空格分隔。 2、属性名称后面跟着一个等于号 3、 一个属性值由一对引号()引起来。 下例子a有三个属性 !-- 双标签有属性--!--属性class href超链接的web地址title超链接的页面名称 target 在新标签页显示--a titlew3school target_blank hrefhttps://www.w3school.com.cn/html/html_jianjie.asp属性class实例/abr
布尔类型 有时候有些属性是没有值的这些属性被称为布尔属性 布尔属性只能有一个值这个值一般与属性名称相同
例如下例中的disabled属性没有值是布尔属性 !-- 单标签有属性--布尔类型input typetext disabled/注意属性中的单引号和双引号都可以
HTML中的特殊字符 p空格nbsp;/pp小于号lt;/pp大于号gt;/pp与amp;/pp单引号apos;/pp双引号quot;/pp版权copy;/pp注册商标reg;/pp商标trade;/pp乘号times;/pp除号divide;/p HTML中常用的标签
Vue会使用各种样式库基本的标签了解即可~
1、 标题 h1-h6 h1标题/h1
2、 段落 p p 段落/p
3 、无序列表 ulli
ulli无序列表/liulli元素1/lili元素2/lili元素3/li/ul/ul
4、 有序列表 olli olli有序列表/liolli元素1/lili元素2/lili元素3/li/ol/ol
5 、重点强调 em斜体 strong加粗 em强调/em br/
strong加粗/strong br/6 、超链接 a a hrefhttps://www.baidu.com超链接/a
7 、换行 br br/
8 、水平分割线 hr hr/
9、 图片 image img src/images/home.png alt图片/
10 、视频 video
11、 音频 audio
12、 表格 table tr td table每个表格的内容都包含在这俩标签中 tr列 td行 rowspan 纵向合并单元格 colspan 横向合并单元格 tabletrtd序号1/tdtd1/tdtd2/tdtd3/td/trtrtd序号2/tdtd2/tdtd4/tdtd6/td/tr/tabletablecaption员工信息表/captiontheadtrth姓名/thth年龄/thth职业/th/tr/theadtbodytrtd张三/tdtd28/tdtd工程师/td/trtrtd李四/tdtd35/tdtd设计师/td/tr/tbodytfoottrtd colspan2总计人数/tdtd2/td/tr/tfoot/tablestyle scoped
table {/*边框合并*/border-collapse: collapse;/*border-collapse: separate;*//*border-collapse: inherit;*//*border-collapse: initial;*//*border-collapse: revert;*//*border-collapse: unset;*/
}td,
th {/*单元格边框*/border: 1px solid black;/*单元格内边距*/padding: 10px 20px;text-align: center;
}
/style 上述输出截图 HTML其他常用 1 HTML 样式示例 2 HTML 注释 3 HTML的id和class HTML id 属性用于 为HTML 元素指定唯一的 id。 一个 HTML文档中不能存在多个有相同 id 的元素。 1 id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。 2id 的语法是写一个井号 (#)后跟一个 id 名称。然后在花括号 {} 中定义 CSS 属性。后面讲css时会详细介绍 3JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素 class 类同一个类名可以由多个 HTML 元素使用而一个 id 名称只能由页面中的一个 HTML 元素使用 templatedivh2html——其他基础/h2!-- 后期会使用其他的样式库所以就简单介绍一下比较常用的标签--!--1 HTML 样式示例 2 HTML 注释ctrl/ctrlshift/3 HTML的id和classHTML id 属性用于 为HTML 元素指定唯一的 id。一个 HTML文档中不能存在多个有相同 id 的元素。id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。id 的语法是写一个井号 (#)后跟一个 id 名称。然后在花括号 {} 中定义 CSS 属性。后面讲css时会详细介绍JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素class 类同一个类名可以由多个 HTML 元素使用而一个 id 名称只能由页面中的一个 HTML 元素使用--divhrbody stylebackground-color:yellowh2 stylebackground-color:redThis is a heading/h2p stylebackground-color:greenThis is a paragraph./p/bodyh1 stylefont-family:verdanaA heading/h1p stylefont-family:arial;color:red;font-size:20px;A paragraph./phr/div/div
/template 结果 HTML表单 form 表单用于向服务器传输数据。form 元素是块级元素其前后会产生折行。 表单提交时必须设置表单元素的name属性值否则无法获取数据。 表单需要结合表单元素一起使用。 常用属性 action 提交表单的地址 target 提交数据时打开窗口的方式 _self 当前窗口 _blank 空白窗口 2 下拉框 select 下拉框标签 option 下拉框的选项标签
select常用属性 multiple 设置下拉框可多选 size 设置下拉框可见选项数 disabled 禁用元素option常用属性 selected 默认选中项 disabled 禁用某个选项 value 提交给服务器的选项值 如果设置了value属性值则提交的是value的值 如果未设置value属性值则提交option双标签中的文本值
form actionxxx.php methodget!-- text 文本框 用户可以里面输入任何文字 --用户名: input typetext nameusername value maxlength6 placeholder请输入用户名 brbr!-- password 密码框 用户看不见输入的密码 --密码: input typepassword namepwd brbr!-- radio 单选按钮 可以实现多选一 --!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 --!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 --性别:男 input typeradio namesex value男女 input typeradio namesex value女 checkedchecked人妖 input typeradio namesex value人妖 brbr!-- checkbox 复选框 可以实现多选 --爱好:吃饭 input typecheckbox namehobby value吃饭睡觉 input typecheckbox namehobby打豆豆 input typecheckbox namehobby checkedcheckedbrbr籍贯:selectoption山东/optionoption北京/optionoption天津/optionoption selectedselected火星/option/selectbrbr!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 --input typesubmit value免费注册!-- 重置按钮可以还原表单元素初始的默认状态 --input typereset value重新填写!-- 普通按钮 button 后期结合js 搭配使用--input typebutton value获取短信验证码 brbr!-- 文件域 使用场景 上传文件使用的 --上传头像: input typefilebrbrinput typecheckbox checkedchecked 我同意注册条款和会员加入标准bra href# 我是会员立即登录/a/form 本文主要用于学习Vue回顾HTML基础
