前端菜鸟教程——HTML速查列表

最新推荐文章于 2024-05-17 05:50:13 发布

回旋加速喷气式阿姆斯特朗炮

最新推荐文章于 2024-05-17 05:50:13 发布

阅读量458

点赞数 2

分类专栏：前端

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

HTML速查列表

前段时间我更新了前端编译器和编译环境的安装。不过工欲善其事必先利其器，昨天花了一下午，把html重新浏览了一遍。
.
HTML基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

.
基本标签(Basic Tags)

<h1>最大标签</h1>
<h2>.  .  .</h2>
<h3>.  .  .</h3>
<h4>.  .  .</h4>
<h5>.  .  .</h5>
<h6>最小标题</h6>

<p>这是一个段落-</p>
</br>(换行)
</hr>(水平线)
<!--这是注释-->

.
文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>

<abbr>（缩写）
<address>（联系方式）
<bdo>（文字方向）
<blockquote>（从另一个源引用部分）
<cite>（工作名称）
<del>（删除的文本）
<ins>（插入的文本）
<sub>（下标文本）
<sup>（上标文本）

.
链接(Links)

普通链接：<a href="http://www.example.com/">连接文本</a>
图像链接：<a href="http://www.example.com/"><img src="URL" alt="替换文本"/></a>
邮件链接：<a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

.
图片（images）

<image src="URL" alt="替换文本" height="42" width="42">

.
样式/区块（Styles/Sections）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

.
无序列表

<ul>
	<li>项目</li>
	<li>项目</li>
<ul>

.
有序列表

<ol>
	<li>第一项</li>
	<li>第二项</li>
<ol>

.
定义列表

<dl>
	<dt>项目 1</dt>
	<dd>描述项目 1</dd>
	<dt>项目 2</dt>
	<dd>描述项目 2</dd>
</dl>

.
表格（Tables）

<tablde border="1">
	<tr>
		<th>表格标题</th>
		<th>表格标题</th>
	</tr>
	<tr>
		<td>表格数据</td>
		<td>表格数据</td>
	</tr>
</table>

.
框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

.
表单（Forms）

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>

</form>

.
实体（Entities）

&lt；等同于 <
&gt;等同于 >
&#169; 等同于 ©

这是我照着菜鸟教程纯手打了一遍，希望能牢牢记住

————————————————更新——————————————————————

HTML5新增属性

<header>定义页面的头部 页眉</header>
<nav> 语义： 定义导航栏 </nav>
<footer> 语义： 定义页面底部 页脚 </footer>
<article> 语义： 定义文章 </article>
<section> 语义：定义区域 节 </section>
<aside> 语义： 定义其所处内容之外的内容 侧边 </aside>

<input type="text" value="塔罗牌" list="taluo"/> //下联栏
    <datalist id="taluo">
        <option value="愚者"></option>
        <option value="倒吊人"></option>
        <option value="太阳"></option>
        <option value="月亮"></option>
        <option value="星币"></option>
    </datalist>

在这里插入图片描述

 <!-- fieldset可以将表单内的相关元素分组打包 与legend搭配使用 -->
    <fieldset>
        <legend>用户登录</legend>
        用户名
    </fieldset>

在这里插入图片描述

<fieldset>
            <legend>HTML5新增的INPUT type 类型  那些表单</legend>
            <form action="">
                邮箱:  <input type="email" />  <!-- aa@aa.com -->  <br />
                手机:  <input type="tel" />  <!-- 手机格式 数字 -->  <br />
                数字:  <input type="number" />  <!-- 只能 是 数字 -->  <br />
                url:  <input type="url" />  <!-- 网址格式的 -->  <br />
                搜索:  <input type="search" />  <!-- 搜索思密达 -->  <br />
                区域:  <input type="range" />  <!-- 区域 奥哈药 滑块  -->  <br />
                时间:  <input type="time" />  <!--小时 分钟  -->  <br />
                年月日:  <input type="date" />  <!--获得年月日 -->  <br />
                月份:  <input type="month" />  <!--获得年月 -->  <br />
                星期:  <input type="week" />  <!--获得周 -->  <br />
                颜色:  <input type="color" />  <!-- 颜色 -->  <br />
                <input type="submit" />
            </form>
        </fieldset>

在这里插入图片描述

     <!-- placeholder占位符，搜索框灰色背景图片效果 -->
用 户 名: <input type="text"  placeholder="请输入用户名" autofocus/><br><br>

        <!-- multiple支持多文件上传 -->
上传头像: <input type="file" multiple/>
 <h4> 自动记录完成 </h4>
 1.autocomplete 首先需要提交按钮 <br/>
 2.这个表单您必须给他名字
 <form action="">

        <!-- autocomplete=on/off打开页面输入框自动获得焦点 -->
   姓名:  <input type="text" autocomplete="on" name="userName"/>
   <input type="submit"/>

 </form>
        <!-- required规定为必填项，不能为空 -->
    <!-- 规定激活(使元素获得焦点)元素的快捷键 采用 alt+字母的形式 -->
 昵称:  <input type="text" required accesskey="s" /><br><br>

在这里插入图片描述

//embed导入外部视屏
 <embed src='http://player.youku.com/player.php/sid/XMjg3MzI1MTUzNg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

<!--    插入音频  -->
<!--     <audio src="bgsound.mp3"  autoplay="autoplay"  controls loop="-1"/></audio>   -->
    为了浏览器兼容， 我们需要做三种声音文件 ogg mp3  wav
    <audio controls autoplay>
    	<source  src="bgsound.mp3" />
    	<source  src="music.ogg" />
    	您的浏览器不支持播放声音
    </audio>

<!--    插入视屏  -->
<!-- <video src="mp4.mp4" autoplay controls></video> -->
    我们的视频支持  ogg  mp4  webM 三种视频格式
    <video controls autoplay>
    	<source src="mp4.mp4"/>
    	<source src="movie04.ogg"/>
    	您的浏览器不支持视频播放
    </video>

.
.
.
——————————————————块级元素—————————————————

块级元素

  1.总是从新的一行开始
  2.高度、宽度都是可控的
  3.宽度没有设置时，默认为100%
  4.块级元素中可以包含块级元素和行内元素

<address>...</adderss>   
  <center>...</center>  地址文字
  <h>...</h>  标题
  <hr>  水平分割线
  <p>...</p>  段落
  <pre>...</pre>  预格式化
  <blockquote>...</blockquote>  段落缩进   前后5个字符
  <marquee>...</marquee>  滚动文本
  <ul>...</ul>  无序列表
  <ol>...</ol>  有序列表
  <dl>...</dl>  定义列表
  <table>...</table>  表格
  <form>...</form>  表单
  <div>...</div>

.
.

行内元素：行内大多为描述性标记

  1.和其他元素都在一行
  2.高度、宽度以及内边距都是不可控的
  3.宽高就是内容的高度，不可以改变
  4.行内元素只能行内元素，不能包含块级元素

  <span>...</span>
  <a>...</a>  链接
  <br>  换行
  <b>...</b>  加粗
  <strong>...</strong>  加粗
  <img >  图片
  <sup>...</sup>  上标
  <sub>...</sub>  下标
  <i>...</i>  斜体
  <em>...</em>  斜体
  <del>...</del>  删除线
  <u>...</u>  下划线
  <input>...</input>  文本框
  <textarea>...</textarea>  多行文本
  <select>...</select>  下拉列表

.
.
.
——————替换元素、非替换元素、行内替换元素、行内非替换元素————————