HTML学习

html中的标签是用来给文本添加语义的，不是用来修改文本样式的

h标签 - 标题

一共6级标题，独占一行

一级标题
二级标题
三级标题
四级标题
五级标题
六级标题

p标签 - 段落

作用：告诉浏览器哪些文字是一个段落
独占一行

一段文字

hr标签 - 水平分割线

作用：添加水平分割线
独占一行

img标签 - 图片

不是独占一行了

![](xxx)

属性：
src - 图片资源路径
width - 宽度
height - 高度
title - 鼠标悬停图片的时候的提示信息
alt - 图片没有找到是的信息

注意：
直接设置宽和高会导致图片变形，如果希望能保证宽高比，只需要设置宽或者高的一个，浏览器就会自动去计算另外一个

br标签 - 换行

企业开发中，很少用到br。即便是淘宝，整个页面就4个

br标签的语义:在不开启新的段落的情况下换行 -- 也就是说br换行的上下2段是一个完整的段落（而我们使用p标签换行，会重新起一个新段落）

路径问题

企业开发中不会使用绝对路径的,都是相对路径。因为代码是从服务器加载的，本地根本没有

相对路径：在html文件所在的当前文件夹去查找
绝对路径：

1. 开发中一律使用反斜杠/,
2. 使用绝对路径的可移植性很差，换个盘符就找不到了

a标签

a标签的作用：控制页面与页面之间的跳转，也可以当前页面的跳转

格式：

展示给用户的内容

a标签的特点：

1. 都有下划线
2. 鼠标移动在a标签时，鼠标会变成小图标

注意：

1. 一个a标签必须有一个href属性，否则a标签不知道跳转到哪里
2. a标签不仅可以让包裹的文字可以点击，也可以让包裹的图片能够被点击
3. 如果通过a标签的href属性指定一个网络上的url地址，那么必须加上http://或者https://

a标签的属性：
target -- 专门用来控制如何跳转
_self（默认值） --在当前页面跳转
_blank --在新页面进行跳转
title属性 -- 和img的title属性一样，都是用来控制器鼠标悬停时的提示

base标签

这个标签是专门用来指定所有的a标签，点击时候的跳转方式的

1. base标签必须写在标签的开始和结束之间
2. 如果摸个标签有特殊需求，可以重新设置target，来覆盖原来的值

假链接

在项目开发初期，跳转的页面还没有写好，只能先跳转到假链接，当项目后期其他界面都完成时再把真链接替换上去

假链接的格式：

2. javascript:

2者的区别
#的假链接会自动回到网页的顶部，而javascript:的假链接不会回到顶部

京东返回顶部的功能实现 - 使用#假链接

锚点

在当前页面跳转到不同的位置

格式:

跳转到中部
我是中部

注意点:
1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置

格式:

跳转到锚点测试界面
我是锚点测试界面33333

ul/ol/dl 列表标签

1.什么是列表标签?
列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

2.HTML中列表标签的分类
2.1无序列表(最多)(unordered list)
2.2有序列表(最少)(ordered list)
2.3定义列表(其次)(definition list)

ul

1.无序列表作用:
给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分

什么叫有先后之分?
例如: 排行榜
什么叫没有先后之分?
例如: 中国有哪些城市

2.无序列表格式:

    
需要显示的条目内容

li其实是英文list item的缩写
list是列表的意思
item是条目的意思
所以结合起来就是 列表条目的意思

注意点:
1.一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的

2. ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用
   3.由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签

无序列表应用场景:
1.新闻列表
2.商品列表
3.导航条

==ul类似iOS中的tableView/collectionView,li类似iOS中的cell==

ul不管是水平还是垂直方向都可以，所以更类似collectionView

ol - 有序列表

可以直接跳过了，开发中很少用到，比ol就是多了一个1，2，3，4的序号

dl - 定义列表

开发中还是会用到的

1. 和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现。
2. 和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签

用途：

1. 图文混排（人物简介）
2. 做网站尾部的相关信息

table - 表格标签

基本可以忽略了，曾经是一个时代的代表，以前基本都是用table来搭建的界面，现在逐渐被div，css取代了

form 表单

用途：收集用户数据，上传后台

表单的格式:

    <表单元素>

常见的表单元素
input
select
textarea

input标签

input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同

注意:
表单元素一定要写在表单中

    
    账号:

    
    密码:

    
    账号:

    密码:


    
    性别:
    男
    女
    保密


    
    爱好:
    篮球
    足球
    棒球
    足浴

    
    账号:

    
    密码:


    
    
    
    
    
    
    
    
    
    
    

label标签

1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定

2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签

3.绑定的格式:
3.1将文字利用label标签包裹起来
3.2给输入框添加一个id属性
3.3在label标签中通过for属性和输入框中的id进行绑定即可

账号:

datalist标签

1.datalist标签
作用: 给输入框绑定待选项

2.datalist格式:

3.如何给输入框绑定待选列表
1.搞一个输入框
2.搞一个datalist列表
3.给datalist列表标签添加一个id
4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

请输入你的车型: 

其他表单元素

• select
• textarea

1.select标签
作用: 用于定义下拉列表

格式:

    
        列表数据
    

注意点:
1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
2.可以通过给option标签添加一个selected属性来指定列表的默认值
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

    
        朝阳区
        昌平区
        通州区
    
    
        天河区
        越秀区
        黄浦区
    

2.textarea标签
作用: 定义一个多行输入框

格式:

注意点:
1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
4.默认情况下输入框是可以手动拉伸的