HTML学习

作者: 零点知晨 | 来源:发表于2017-03-24 10:20 被阅读3次

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

h标签 - 标题

一共6级标题，独占一行

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

p标签 - 段落

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

<p>一段文字</p>

hr标签 - 水平分割线

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

<hr>

img标签 - 图片

不是独占一行了

![](xxx)

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

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

br标签 - 换行

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

<br>

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

路径问题

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

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

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

a标签

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

格式：

<a href="跳转的链接">展示给用户的内容</a>

a标签的特点：

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

注意：

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

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

base标签

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

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

假链接

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

假链接的格式：

javascript:

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

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

锚点

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

格式:

<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>

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

格式:

<a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>
<h2 id="bottom">我是锚点测试界面33333</h2>

ul/ol/dl 列表标签

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

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

ul

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

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

2.无序列表格式:

<ul>
    <li>需要显示的条目内容</li>
</ul>

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

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

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 - 定义列表

开发中还是会用到的

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

用途：

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

table - 表格标签

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

form 表单

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

表单的格式:

<form>
    <表单元素>
</form>

常见的表单元素
input
select
textarea

input标签

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

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

<form>
    <!--明文输入框-->
    账号:<input type="text"><br>
    <!--暗文输入框-->
    密码:<input type="password"><br>
    <!--给输入框设置默认值-->
    账号:<input type="text" value="lnj"><br>
    密码:<input type="password" value="123"><br>

    <!--
    单选框
    注意点:
    1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值
    2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性
    3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略取值
    -->
    性别:
    <input type="radio" name="xx" checked>男
    <input type="radio" name="xx">女
    <input type="radio" name="xx" >保密<br>

    <!--多选框-->
    爱好:
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox" checked="checked">棒球
    <input type="checkbox" checked="checked">足浴
</form>

<form action="http://www.520it.com">
    <!--明文输入框-->
    账号:<input type="text" name="aa"><br>
    <!--暗文输入框-->
    密码:<input type="password" name="bb"><br>

    <!--
    定义普通按钮
    可以通过value属性来给按钮指定标题
    作用: 配合JS完成一些操作
    -->
    <input type="button" value="我是按钮">
    <!--
    图片按钮
    作用: 配合JS完成一些操作
    -->
    <input type="image" src="images/register.jpg">
    <!--
    重置按钮
    作用: 用于清空表单中已经填写好的数据
    注意点:
    如果想想改重置按钮默认的按钮标题可以通过value属性来修改
    -->
    <input type="reset" value="清空">
    <!--
    提交按钮
    作用: 将表单中已经填写好的数据, 提交到远程服务器
    注意点:
    要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
    1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
    2.需要给需要提交到服务器的表单元素添加一个name属性
    -->
    <input type="submit">
    
    <!--
    隐藏域
    作用 : 配合提交按钮将一些数据默默的悄悄咪咪的提交到服务器
    Ajax
    -->
    <input type="hidden" name="cc" value="kukuku">
</form>

label标签

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

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

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

<label for="account">账号:</label><input type="text" id="account">

datalist标签

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

2.datalist格式:
<datalist>
<option>待选项内容</option>
</datalist>

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

请输入你的车型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>路虎</option>
    <option>宾利</option>
</datalist>

其他表单元素

select
textarea

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

格式:

<select>
    <optgroup label="分组名称">
        <option>列表数据</option>
    </optgroup>
</select>

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

<select>
    <optgroup label="北京">
        <option>朝阳区</option>
        <option>昌平区</option>
        <option>通州区</option>
    </optgroup>
    <optgroup label="广州">
        <option>天河区</option>
        <option>越秀区</option>
        <option>黄浦区</option>
    </optgroup>
</select>

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

格式:

<textarea>
</textarea>

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