HTML
介绍
HTML(hypertext markup langage)超文本标记语言 主要用于描述网页的结构和内容
学习HTML主要学习HTML标签以及标签对应的属性, 标签就是一些特殊的符号
比如
img图片标签(属性src,width,height,alt,tilte),在网页中显示图片
a超链接标签(属性href, target ), 实现网页的跳转
html文件名后缀名是.html , 使用浏览器可以直接解析html文件,因为浏览器里面有一个渲染引擎
基本结构
1 |
|
标签分类
1 | <!-- |
文本修饰标签
1 | <!-- 加粗 b(bold) 与 strong(强壮)--> |
img标签
img标签常用属性
- src是source单词的简写, 设置图片文件所在路径
- border设置图片的边框 默认图片边框大小为0 0代表没有边框 属性取值可以写数值
- width设置图片的宽度, 默认不设置width,将使用图片默认的宽度 该属性取值可以写数值或者百分比,百分比会相对父元素
- height设置图片的高度, 默认不设置height,将使用图片默认的高度 该属性取值可以写数值或者百分比,百分比会相对父元素
注意: 如果只设置width或者height其中一个, 另一个会跟随图片原始宽度高度比例,进行等比例缩小放大 - title设置鼠标悬停在图片元素上显示的文本内容信息
- alt设置图片无法正常显示时,显示在图片元素上的替换信息
- align设置图片元素”周围文字”的对齐方式 取值 left center right
路径问题
路径就是文件的存放位置经过的路线
为什么需要路径? 因为我们引入图片,引入外链式样式css文件,引入外链式脚本js文件以及超链接跳转到本地某个文件的时候,都需要通过路径找到对应的文件
路径主要又分为两种
- 第一种: 绝对路径, 以盘符开始的路径 , 比如 g:/abc/1.txt, 绝对路径移植性差,需要保证同样的盘符下有同样的文件
1 | <!-- \反斜杠 /正斜杠 在window系统下, 正斜杠和反斜杠都可以识别, 但是在linux下只能使用正斜杠 而且linux系统下没有盘符的概念--> |
- ❤第二种: 相对路径, 相对路径就是会根据一个参考物,进行参考,这个参考物一般是”当前文件”
1 | <h1>相对路径又有三种常见关系</h1> |
超链接a标签
超链接是用于实现网页之间跳转的标签
语法:<a href="跳转目标地址" target="目标地址打开方式">超链接的标签内容</a>
- ❤外部链接 跳转到互联网的某个地址 一般是https://或者http://开头的
- ❤内部链接 跳转到本地文件 如果浏览器可以打开的文件,浏览器会帮我们打开 浏览器无法打开的文件,浏览器会提示我们下载
- ❤空链接 要记 就是点击以后,不会跳转的链接 空链接主要用于书写css样式或者触发js事件的时候使用
- ❤图片链接 要记 就是点击图片以后,会跳转到某个链接 使用a标签包括img图片标签
- 链接到本页的某个部分(锚点)
阻止默认事件
- onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。
1 | <a href="javascript:void(0);" οnclick= "myjs( )"> Click Me </a> |
和void(0)一样,都返回”undefined”
1 | <a href="javascript:;" > Click Me </a> |
- 是网上很常见的代码,#是标签内置的一个方法,用这种方法点击后网页后返回到页面的最顶端所以又有了“##”“#!”等,尽管解决了返回顶部的问题但仍存在其他缺陷
1 | <a href="#"> Click Me </a> |
事件处理函数的工作机制中,在给某元素添加事件处理函数后,一旦事件发生,相应JavaScript代码就会执行,所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后,
如果相应JavaScript代码返回true,onclick事件处理函数就会认为这个链接呗点击了,同样的若返回false即会认为链接未被点击当点击a标签时,JavaScript代码返回值为false,故此链接默认行为未被触发。
1 | <a href="http://www.baidu.com" οnclick=" myjs(); return false; "> Click Me </a> |
- preventDefault()阻止事件的默认行为但不支持IE,所以在IE中使用returnValue阻止事件默认行为
1 | var test = document.getElementByTagName('a'); |
- download属性(HTML 5 新增): 接受一个 filename (文件名) 作为属性值或不设置任何属性,此属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件。
1 | <h2>不添加download属性 直接在浏览器中打开图片</h2> |
- 基准参考点base标签 单标签 可以设置所有超链接的href属性以及target属性,base标签只能出现一次!!!
1 | <base href="https://ent.163.com" target="_blank" /> |
表格基本使用以及表格属性
- table表示表格
- tr表示表格的行
- td或者th表格的列(单元格) th包括的内容会进行加粗并水平居中显示
- caption设置表格的标题
table标签的属性:
❤border设置表格的边框:
表格边框合并:border=”1”
bordercolor设置表格颜色
❤width设置表格的宽度 数值或者百分比
height设置表格的高度 数值或者百分比
❤align设置整个表格的水平对齐方式 left center right
bgcolor设置背景颜色
background设置背景图片, 背景图片会覆盖背景颜色
❤cellpadding设置单元格内容到边框的距离
❤cellspacing设置单元格与单元格之间的距离
❤rules=”all”合并边框线
tr的属性:
- tr的align,bgcolor,background属性同table属性
- align属性是设置tr中所有单元格内容水平对齐方式,取值:left(左 默认),center(居中),right(右)
- 还有一个valign属性是设置单元格内容垂直对齐方式,取值:top(上),middle(默认,垂直居中),bottom(下)
小结:
tr的align是设置单元格内容的水平对齐方式
如果tr跟table都设置的bgcolor跟background属性,以tr设置的为准,”靠近原则”
th,td单元格的属性
- th跟td都是单元格标签,但是th包裹的内容会加粗并且水平居中显示
- width,height,align,valign,bgcolor,background属性跟tr设置的时候,效果是一样的
合并单元格
两个th,td单元格比较重要的属性:
- rowspan row行的意思,跨行合并单元格,垂直(上下)方向合并几个单元格 取值数值
- colspan column列的意思,跨列合并单元格,水平(左右)方向合并几个单元格 取值数值
合并单元格的步骤
1.先找到你要合并的单元格,随便改成相同的内容
2.确定左右合并单元格,还是上下合并单元格,再决定使用对应colspan或者rowspan,要几个单元格合成1个单元格
3.删除多余的单元格
thead,tbody,tfoot表格结构化标签
- 没有被thead,tbody,tfoot这三个结构化标签包裹的内容,默认会把内容都放在一个tbody中
- thead表示表格的头部
- tbody表示表格的身体
- tfoot表示表格的底部
thead,tbody,tfoot都有align跟valign属性; 设置align跟valign属性的时候优先级:靠近原则
13-thead,tbody,tfoot表格结构化标签.html
表单
表单介绍
- 表单是什么,就是一些可以让你填写或者选择的东西
- 表单作用是什么,收集用户所填写或者选择信息
- 表单组成有哪些, 有三部分 :
- 表单域(容器,存放表单的地方)
- 提示信息(告诉用户需要填写的信息是什么)
- 表单控件(收集用户信息的东西, 比如文本框, 单选按钮等 )
form标签表示表单域
form标签的action属性,表示数据提交到哪里去, 取值是一个url
form标签的method属性,表示数据提交的方式 get(默认)或者post
get提交的数据会拼接到url(url是统一资源定位符,简单理解就是网址)地址栏中, 拼接形式是 url?键名1=键值1&键名2=键值2…
post提交的数据不会出现在url中
注意: 表单控件需要设置name属性, 这样提交数据的时候,才是有效提交 并且后端才可以通过name属性区分是哪个控件提交过去的数据
注意: 某些控件需要设置value属性,value属性才是真正提交到后端的数据
1 | <!-- <form action="https://www.baidu.com" method="get"> --> |
button按钮
1 | <form action="https://www.baidu.com" method="get"> |
项目标题标签label
元素(描述标签)表示用户界面中某个元素的说明。
lablel标签主要目的是为了提高用户体验。 为用户提高最优质的服务。
- 概念:label 标签为 input 元素定义标注(标签)。
- 作用:用于绑定一个表单控件, 当点击label标签的时候, 被绑定的表单控件就会获得输入焦点。
如何绑定元素呢?
第一种用法:使用label标签包裹要设置的内容和表单元素
第二种用法:使用label中的for属性 for=”id名” 表单元素需要设置一个id属性
1 | <p> |
placeholder属性
- placeholder属性,占位符,当某些表单控件value值为空的时候,placeholder属性设置的值才会显示出来
- placeholder属性,当input元素type为password, search, tel, text, url时,当表单控件为空时,控件中显示的内容
1 | <p> |
多行文本框(文本域):
1 | <!-- 通过rows设置高度 --> |
- 防止拖拽文本域resize
1 | textarea { |
select下拉框
- 通过option设置选项, 默认下拉框会选中第一项, 默认下拉框的宽度由最宽的选项内容决定
- 给option选项设置selected属性,可以指定选中选中项
- 如果option没有设置value属性,那么value属性值将使用option的标签内容 提交数据的时候,会提交选中项的value属性值
1 | <select name="province"> |
- select标签可以设置size属性,表示显示多少个选项
- select标签可以设置multiple属性, 表示允许多选 可以按ctrl或者shift键
- 使用optgroup标签,可以对选项进行分组
1 | <select size="5" multiple> |
- multiple除了可以让下拉框可以选择多个选项,还可以让file上传框允许选择多个文件
1 | <input type="file" multiple /> |
表单控件常用属性
- 通过src属性可以设置图片按钮的图片, 通过width属性设置宽度, 通过height属性设置高度
1 | <input type="image" src="./images/btn_reg.png" width="300" /> |
- disabled禁用控件,不能修改值也不能输入值 数据不会提交
1 | <input type="text" name="username2" disabled value="zhangsan2"> |
- readonly只读 内容不允许修改, 但是数据还可以提交
1 | <input type="text" name="username3" readonly value="zhangsan3"> |
- autofocus自动获取焦点,仅第一个使用的表单控件可以生效
1 | <input type="text" autofocus /> |
- autocomplete:所有input元素,用于表单的自动填充功能 取值 off关闭自动填充 或者 on(默认,开启自动填充)
注意:想要使用autocomplete属性触发表单自动填充功能, 前提是这个表单控件需要有一个name属性, 并且成功提交过数据,才会把之前成功提交的数据记录下来
1 | <input type="text" name="myAge" placeholder="请输入年龄" autocomplete="off"/> |
- required:绝大部分input元素,表示此值为必填项
- maxlength:当input元素type为password, search, tel, text, url时,value 的最大长度(最多字符数目)
- size:当input元素email, password, tel, text时,控件的大小 , 取值数值, 默认20
1 | <input type="text" required maxlength="6" size="30" /> |
H5新增表单输入类型
- number:只能输入数字的输入框。
- max属性设置最大值
- min属性设置最小值
- step设置步长值
1 | <p> |
- email:编辑邮箱地址的输入框。类似 text 输入,但在支持的浏览器上会有邮箱格式的规则验证提示。
1 | <p>邮箱: <input type="email" /></p> |
- search (H5新增):用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。
1 | <p>搜索框: <input type="search" /></p> |
- tel (H5新增):用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
1 | <p>电话号码:<input type="tel" /></p> |
- url (H5新增):用于输入 URL 的控件。类似 text 输入,在支持的浏览器上会有URL的规则验证提示,在支持动态键盘的设备上有相应的键盘。
1 | <p>网址:<input type="url" /></p> |
表单日期类型:
1 | <!-- week:用于输入以年和周数组成的日期,不带时区。 --> |
表单颜色类型
1 | <p> |
表单范围控制类型
1 | <p> |
常用布局标签div与span
div的特点
1. 独占一行,默认只要有标签内容,不管内容多或者少,都会占满一行
2. 不会标签内容的样式(不会加粗,不会倾斜等)
3. div上下无空白距离
4. 所以div作为容器使用, 方便设置CSS样式
span的特点
1. 不独占一行, 一行可以存放多个, 直到放不下才会换行
2. 不会标签内容的样式(不会加粗,不会倾斜等)
3. span上下左右无空白距离
4. span的宽度由内容决定
5. span也是作为容器使用,方便设置CSS样式
HTML全局属性
全局属性是所有 HTML 元素共有的属性;它们可以用于所有元素,尽管它们可能对某些元素没有影响。
参考文档: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes
class:我们将class的属性值称之为“类名”,只要是拥有相同的class的属性值 不管是什么标签 我们都可以将其称之为一类!class属性一般多用于CSS中
设置多个类名的时候,多个类名之间使用空格隔开
1 | <b class="one two three">bbb</b> |
- id:id属性是标签的唯一标识,一个页面中可以有很多id属性,但是每个标签的id属性的值必须是唯一的 ; 它就好多我们的身份证号码一样!id属性一般多用于JavaScript中
1 | <div id="div1">id为div1的内容</div> |