html中的基本标签

2017-11-03 本文已影响40人 __Willing

a标签

注意点：

a标签必须有一个herf属性，制定一个网页跳转到另一个网页。
herf属性的网页URL必须加上http:// 或者 https://

<a herf"转到的路径">在网页显示的文字或者是图片<a/>

例：

<a herf"http://www.baidu.com">百度一下<a/>
<a herf"http://www.baidu.com><img src"code.jpg"><a/>"

控制是否跳转到一个新的页面
属性：

target
一个是_self （默认），另一个是_blank
其中“_self”是调转到当前页面，“_blank”是跳转到新的页面。
格式： target" _self"
title
作用是控制鼠标悬停时显示的内容。
格式：title" xxx"

base标签

作用：base标签专门用来统一指定网页中当前所以的a标签超链接如何打开
注意点：base标签必须写在head标签内部，格式为
<base target"_blank">.

假链接

假链接的两种

JavaScript：
两者的区别：# 会自动回到网页的顶部，但是 JavaScript：不会自动回到顶部。

锚点

要想通过a标签跳转到指定位置，那么必须告诉目标标签一个独一二的id。
步骤
1.给目标的标签添加一个id属性，并且添加一个独一无二的值。
2.给a标签的herf属性中写上#+id（id就是目标属性的id值）

<h2>我是顶部</h2>
<a href="#center">跳转到中部</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2 id="center">我是中部</h2>
<a href="#end">调转到底部</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2 id="end">我是底部</h2>

列表标签

无序列表

无序列表表示没有先后之分，列表是一个整体。
格式为：

<ul>
    <li>
            需要显示的列表条目
    </li>
</ul>

eg：

<h2>中国的城市</h2>
<hr width="500px" align="left">
<ul >
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>西安</li>
</ul>

<h1>物品清单</h1>
<ul>
    <li>
        <h2>蔬菜</h2>
        <ul>
            <li>白菜</li>
            <li>萝卜</li>
            <li>黄瓜</li>
        </ul>
    </li>
    <li>
        <h2>水果</h2>
        <ul>
            <li>苹果</li>
            <li>桃子</li>
            <li>香蕉</li>
        </ul>
    </li>
</ul>

有序列表

有序列表：所有的数据都是有序的
格式：

<ol type="a或者1或者I">
    <li></li>
</ol>

ol有type属性，列表的排列目录。即1,2,3或者a,b,c等
其他与无序列表大同小异

定义列表

定义列表的应用场景：

做网页的尾部信息
做图文混排
格式：

<dl>
    <dt></dt>  中间写的是事物
    <dd></dd>  中间写的是描述
</dl>

<dl>
    <dt>
        (img/QRcode.jpg )
    </dt>
    <dd>
        <h3>我的头像</h3>
    </dd>
</dl>

表格标签

目的：给数据添加表格语义
格式：

<table border="1">                           整个表格
    <tr>                          一行
        <td>需要显示的内容</td>   一行的一个单元格
    </tr>
</table>

注意点：border默认为零，因此不显示。故要设置成1.
表格的属性：

宽度和高度
可以给table和td标签使用。
默认是按照内容来自动设定的，也可以给table设置width或者height属性。给td设置width或者height属性时候，总宽度或者高度不变。
水平对其和垂直对其
其中，水平对其能给table和tr和td标签使用，垂直对其只能给tr和td使用。
水平对齐是设置align属性,垂直对其是valign 格式为align="center/left/right". valign="top/bottom".
外边距和内边距属性
只能给table使用。
外边距是单元格与单元格之间的距离，默认情况下的外边距是2。格式为 cellspacing"20px"
内边距是单元格与文字之间的距离默认值是1. 格式为 cellpadding"20px"

eg:写一个表格，2行2列,外边距为0，文字全部居中的一个表格

<table border="1" width="500px" height="200px" cellspacing="0" align="center">
    <tr align="center">
        <td>1.1</td>
        <td>2.3</td>
    </tr>
    <tr align="center">
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>

细线表格

先给整个表格设置背景颜色为黑色，然后给每个行设置背景颜色为白色，把黑色线条就显示出来了，因为外边距的默认值为2，设置成1，即可。
步骤：
1.给table设置bgcolor和cellspcing
2.给tr设置bgcolor

<table bgcolor="black" cellspacing="1px" width="500" height="200">
    <tr bgcolor="white" align="center">
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>

表格的其他标签

表格的标题：caption标签，一定要写在table内部才会有效，并且紧跟table后面。

<table bgcolor="black" cellspacing="1px" width="800px" align="center">
    <caption>
        <h2>今日小说排行榜</h2>
    </caption>
    <tr bgcolor="#a52a2a" align="center">
        <td>排名</td>
        <td>关键词</td>
        <td>趋势</td>
        <td>今日搜索</td>
        <td>最近七日</td>
        <td>相关链接</td>
    </tr>
    <tr align="center" bgcolor="white">
        <td>1</td>
        <td>暴走大事件</td>
        <td>上升</td>
        <td>8888</td>
        <td>779897</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    </tr>
    <tr align="center" bgcolor="white">
        <td>1</td>
        <td>暴走大事件</td>
        <td>上升</td>
        <td>8888</td>
        <td>779897</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    </tr>
    <tr align="center" bgcolor="white">
        <td>1</td>
        <td>暴走大事件</td>
        <td>上升</td>
        <td>8888</td>
        <td>779897</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    </tr>
    <tr align="center" bgcolor="white">
        <td>1</td>
        <td>暴走大事件</td>
        <td>上升</td>
        <td>8888</td>
        <td>779897</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    </tr>
    <tr align="center" bgcolor="white">
        <td>1</td>
        <td>暴走大事件</td>
        <td>上升</td>
        <td>8888</td>
        <td>779897</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
</table>

单元格的合并

水平方向上单元格合并
可以给td标签添加colspan属性，来指定把一个单元格看做两个。格式：<td colspan="2"></td>
但是这样会多出一个单元格，那么还应该删掉一个单元格，就是删掉一个td
注意点：单元格一定是向后合并或者向下合并。
垂直方向上单元格合并
可以给td标签添加rowspan属性，把一个单元格当做两个看待。
但是这样会在垂直方向上多出一个单元格，还应该删掉一个单元格。

<table height="200" width="500px" bgcolor="black" align="center" cellspacing="1px">
    <tr bgcolor="white">
        <td colspan="2"></td>

        <td rowspan="2"></td>
    </tr>
    <tr bgcolor="white">

        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

表单标签

表单就是收集用户的信息的。
表单的格式：

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

<form>
    <!-- 明文输入框-->
    账号: <input type="text"/><br/>
    <!-- 暗文输入框-->
    密码: <input type="password"/><br/>
    <!-- 给输入框设置默认值-->
    姓名: <input type="text" value="stf"/><br/>
    <!-- 单选框
    注意点：单选框默认情况下不会互斥，要想互斥，都添加一个name属性
    要想默认选中某个值，添加一个checked属性
    -->
    性别：
    <input type="radio" name="stf" checked="checked"/>男
    <input type="radio" name="stf"/>女 <br/>
    <!-- 多选框-->
   喜欢的运动 <br/>
    <input type="checkbox"checked/>篮球
    <input type="checkbox" checked/>足球
    <input type="checkbox" checked/>乒乓
</form>

按钮

普通按钮的type：button
图片按钮的type：image
清空按钮的type：reset
提交按钮的type：submit，其中要想提交至服务器 1.给form添加一个action属性填写地址 2.给需要提交的信息添加name属性。

<form action="http://www.baidu.com">
    账号：<input type="text" name="12"/>
    密码：<input type="password" name="23"/>
<!--普通按钮-->
<input type="button" value="我是按钮"/>
<!--图片按钮-->
<input type="image" src="img/QRcode.jpg"/>
    <!-- 重置按钮-->
    <input type="reset" value="清空一下"/>
    <!-- 提交按钮-->
    <input type="submit"/>
    <!-- 隐藏域-->
    <input type="hidden"/>
</form>

输入框的聚焦

上次说的有一些不足之处，点账号，账号输入框不会聚焦，同理，密码输入框也不会聚焦。怎么实现聚焦呢？
就要使用label标签。
有两种方法。

1.将文字用label标签包裹
2.给input添加一个id属性。
3.用label的for属性与id绑定（官方推荐）
格式就是：<label for="aaa">账号：</label><input type="text" id="aaa"/>
直接将文字和所绑定的输入框用label标签包裹。
局限性：不能实现账号与密码输入框聚焦。
格式就是：<label>账号：<input type="text"/></label>

<form action="">
    账号：<input type="text"/> <br/>
    密码：<input type="password"/> <br/>
    <hr/>
    <label for="aaa">账号：</label><input type="text" id="aaa"/> <br/>
    <label for="bbb">密码：</label><input type="password" id="bbb"/> <br/>
    <hr/>
    <label>账号：<input type="text"/></label> <br/>
    <label>密码：<input type="password"/></label> <br/>
</form>

待选框

给输入框添加待选内容
1.有一个输入框
2.写一个datalist标签，内部写一个option标签，option标签内部输入待选内容。
3.给datalist添加一个 id属性
4.给input标签添加一个list属性，并且与datalist标签的id关联。

请输入你要的车：<input type="text" list="cars"/>
<datalist id="cars">
    <option>宝马</option>
    <option>路虎</option>
    <option>奥迪</option>
    <option>宾利</option>
</datalist>

新增的表单标签

一些固有的格式，这样可以自动校验是否符合格式。

<form action="">
    邮箱：<input type="email"/>
    电话：<input type="number"/>
    时间：<input type="date"/>
    颜色:<input type="color"/>
    网址：<input type="url"/>
    <input type="submit"/>
</form>

练习

注册界面

<form action="http://www.baidu.com">
    <!--
         fieldset可以给表单添加一个边框，legend标签可以添加标题。
    -->
    <fieldset>
        <legend>注册界面</legend>
        <label>账号：<input type="text"/></label> <br/>
        <label>密码：<input type="password"/></label> <br/>
        性别：<input type="radio"name="xxx" checked="checked" />男
        <input type="radio" name="xxx" />女
        <input type="radio" name="xxx"/>保密<br/>
        爱好：
            <input type="checkbox"/>篮球
            <input type="checkbox"/>足球
            <input type="checkbox" checked="checked"/>足浴<br/>
            <label for="ddd">个人简介：</label>
            <textarea cols="20" rows="5" id="ddd"></textarea><br/>
            <label for="aaa">生日：</label>
        <input type="data" id="aaa"/><br/>
        <label for="bbb">邮箱：</label>
        <input type="email" id="bbb"/><br/>
        <label for="ccc">手机：</label>
        <input type="number" id="ccc"/><br/>
        <input type="submit" value="注册"/>
                           
        <input type="reset" value="清空"/>
    </fieldset>
</form>

其他的表单标签（select标签和textarea标签）

1.select标签

1.1作用：用于定义下拉列表
1.2设置默认显示的内容：给option添加selected属性
1.3给下拉列表的内容分类格式为：
<select>
<optgroup label="类名">
<option>列表内容</option>
</optgroup>
</select>
2.textarea标签

2.1作用：定义一个多行输入框
2.2格式：<textarea cols="30" rows="10"></textarea>
注意点：cols和rows可以设置行数和列数。但是在网页里面依然可以通过右下角的三角号进行拉伸。

<select>
     <optgroup label="不发达省份">
    <option>山西</option>
    <option selected>陕西</option>
    <option>河南</option>
    </optgroup>
    <optgroup label="发达城市">
    <option>北京</option>
    <option selected>上海</option>
    <option>广州</option>
    </optgroup>

    <hr/>

    <textarea  cols="30" rows="10"></textarea>
</select>

视频和音频标签

视频的第一种形式

格式:
<video src=""></video>
属性:
autoplay：视频默认不会自动播放，因此添加autoplay属性。
controls：控制条
poster:视频没有播放之前显示的展位图片，但是使用这个的时候应该没有autoplay标签的，因为那样会自动播放。
loop：用于广告，不能控制，不能关闭
preload：预加载视频。如果设置了autoplay属性，那么preload就会自动失效。
muted:设置静音
width：视频的宽度
height：视频的高度

<!--<video src="videos/再见只是陌生人.mp4" autoplay="autoplay" controls="controls" poster="img/QRcode.jpg"></video>-->
<video src="videos/再见只是陌生人.mp4" autoplay="autoplay" loop="loop" muted="muted" width="200px"></video>

视频的第二种形式

video第二种形式存在的意义：因为五大浏览器厂商都不愿意支持其他浏览器的视频格式，导致了有的视频格式在浏览器上不会播放，
为了解决这个问题，推出了第二中形式。

<video >
    <source src="videos/再见只是陌生人.mp4" type="video/mp4" ></source>
    <source src="videos/再见只是陌生人.ogg" type="video/ogg"></source>
    <source src="videos/再见只是陌生人.webm" type="video/webm"></source>
</video>

注意点：浏览器必须支持HTML5标签，否则同样无法播放的。
以后可以通过JS框架实现。

<video autoplay="autoplay">
    <source src="videos/再见只是陌生人.mp4" type="video/mp4" ></source>
    <source src="videos/再见只是陌生人.ogg" type="video/ogg"></source>
    <source src="videos/再见只是陌生人.webm" type="video/webm"></source>
</video>

音频

音频和视频是基本上相同的，也是有两种可是的。
video使用的属性基本上可以在audio中使用。功能也基本上差不多。

   1.<audio src="" autoplay="autoplay" controls="controls" muted="muted"></audio>
   2. <audio>
         <source src="" type=""></source>
         <source src="" type=""></source>
         <source src="" type=""></source>
      </audio>

marquee标签

作用：跑马灯效果
属性：

direction:left/right/up/down
scrollamount 单词是滚动速度的意思：设置滚动的速度，值越大，速度越快。
loop：设置滚动的次数，默认情况是-1.即无限滚动。
4.behavior 单词是行为的意思:设置滚动的类型。slide滚动到边界就停止，alternate滚动到边界就自动弹回。
marquee标签：

跑马灯可以让文字滚动，也可以让图片滚动

<marquee behavior="" direction="left">
    你们好！
</marquee>
<marquee behavior="slide" direction="right">你们好！</marquee>
<marquee behavior="slide" direction="right" scrollamount="100" loop="3">哎呀我炸你</marquee>

字符实体标签

字符实体：

空格：一个“&nbsp” 是一个空格，多个就是多个空格；
<>在HTML中有特殊的含义，因此不能再网页中直接显示出来
其中 < 用lr >用bl 分别表示。

3.版权符号：©

<p>我          爱你</p>
<p>现在我们学习了<p>、<table>等标签</p>
©2017-2018.

html中废弃的标签

<b>加粗文本
u 给文本添加下划线
i 将文本倾斜
s 给文本添加下划线
这些没有语义，就是改变样式，违背了HTML的原则，因此不到万不得已都不使用这些标签。
现在用下列标签替代这些：
strong 代替 b
ins （instead）代替 u
em （emphasizde）代替 i
del （deleted）代替 s