HTML基础知识(入门)

1.基本标签

标题<h1>~</h6>、段落<p></p>、换行</br>、加粗<strong></strong>、倾斜<em></em>

删除线<del></del>、下划线<ins></ins>、盒子<div></div>,<span></span>

图像<img src="URL" alt="替换文本" title="提示文本"/>

链接<a href="URL" target="_self或_blank"></a>

2.路径

A.相对路径:以引用文件所在位置为参考基础，而建立出的目录路径。

相对路径分类:同一级路径( ),下一级路径(/),上一级路径(../)

B.绝对路径:是指目标下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

3.链接的分类

A.外部链接:例如<a href="http://www.baidu.com">百度</a>

B.内部链接:网站内部之间的相互链接,例如<a href="index.html">首页</a>

C.空链接:当时没有确定链接目标时,例如<a href="#"></a>

D.下载链接:如果href里面是一个文件或压缩包会下载这个文件,例如<a href="img.zip"></a>

E.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频都可以加超链接。

F.锚点链接:点击链接可以快速定位到页面中的某个位置。

在链接文本的href属性中,设置属性值为#名字的形式,例如<a href="#kobe">科比</a>

找到目标位置标签,里面添加一个id属性 = 刚才的名字,例如<h1 id="kobe">黑曼巴</h1>

4.注释和特殊字符

<!--注释语句-->  快捷键ctrl+/

小于号&lt; 大于号&gt; 空格符&nbsp;

5.table表格

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="500">
    <thead>
         <tr>
            <th>表头</th>
            <th rowspan="2"></th>
        </tr>
    </thead>
    <tbody>
         <tr>
            <td>单元格</td>
            <td colspan="2"></td>
        </tr>
    </tbody>
</table>

跨行合并:rowspan  跨列合并:colspan

6.列表

<ol>
    <li>有序列表</li>
</ol>
<ul>
    <li>无序列表</li>
</ul>
<dl>
    <dt>自定义列表</dt>
    <dd></dd>
</dl>

7.表单

<form action="url地址" method="POST或GET" name="表单域名称">
    文本框  <input type="text" value="值" maxlength="规定字符最大长度"/>
    密码框  <input type="password" value="值"/>
    单选框  <input type="radio" name="sex" checked="checked"/>
    多选框  <input type="checkbox" name="sex"/>
    普通按钮<input type="button" value="普通">
    提交按钮<input type="submit" value="提交"/>
    重置按钮<input type="reset" value="重置"/>
    上传文件<input type="file" value="上传"/>
    <label for="kobe">科比</label>
    <input type="radio" name="kobe" id="kobe">
    下拉表单
    <select>
        <option>科比</option>
        <option selected="selected">默认选项</option>
        <option>库里</option>
    </select>
    文本域
    <textarea>欧文</textarea>
</form>

A.name是表单元素的名字,单选按钮和复选框必须有相同的名字name才可以实现多选一。

B.单选按钮和复选框可以设置checked属性,当页面打开的时候就可以默认选中这个按钮。

C.label标签为input元素的标注标签,当点击label标签内的文本时,浏览器会自动将光标转移到对应的表单元素上,用来增加用户体验。label标签的for属性应当与相关元素的id属性相同。

8.HTML5新增特性

A.头部标签 <header>

B.导航标签 <nav>

C.内容标签 <article>

D.定义文档某个区域 <section>

E.侧边栏标签 <aside>

F.尾部标签 <footer>

G.音频 <audio>

1.自动播放 autoplay="autoplay"

2.向用户显示播放插件 controls="controls"

3.循环播放 loop="loop"

4.音频播放地址 src="url"

H.视频 <video>

1.自动播放 autoplay="autoplay"

2.向用户显示播放插件 controls="controls"

3.设置播放器宽度 width="width"

4.设置播放器高度 height="height"

5.循环播放 loop="loop"

6.视频播放地址 src="url"

7.加载等待的画面图片 poster="url"

8.静音播放 muted="muted"

I.新增input表单

我们在验证时必须添加form表单。
当我们点击提交按钮就可以验证表单。
但有些类型主流浏览器不支持无法验证。
<form action="">
    邮箱: <input type="email" />
    网址: <input type="url" />
    日期: <input type="date" />
    时间: <input type="time" />
    数量: <input type="number" />
    手机号码: <input type="tel" />
    搜索: <input type="search" />
    颜色: <input type="color" />
    <input type="submit" value="提交" />
<form>

J.新增表单属性

1.内容不能为空 required="required"

2.提示文本 placehlder="第二名意味着你是头号输家"

可以通过 input::placeholder{color:pink}来改变里面字体颜色。

3.自动聚焦属性 autofocus="autofocus"

4.输入历史记录 autocomplete="on/off"

需要放在表单内,同时加上name属性,同时提交成功。

5.提交多个文件 multiple="multiple"