最基础的HTML笔记(不定期更新) 分享推荐

铭镕小姐姐 27天前 38

红色字体为导航

绿色字体为基本结构

蓝色字体为源码示例





第一课时:HTML常用标签

<html></html>标识HTML文档的起始和终止

<head></head>标识HTML文档的头部区域

<body></body>标识HTML文档的主体区域

代码示例:

<html>

<head>

<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>示例代码</title>

</head>

<body>

<h1>文本格式标签</h1>

<p>标签标识段落文本</p>

</body>

<html>

一.1文本格式标签

<title></title>标识网站标题

<h1></h1>标识预订义文本

<p></p>标识定义文本

<pre></pre>标识预定义文本

<blockquote></blockquote>引用标签文本

代码示例:

<html>

<head>

<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>示例代码</title>

</head>

<body>

<h1>文本格式标签</h1>

<p>标签段落文本</p>

</body>

</html>

一.2字符格式标签

<b></b>标识强调文本,以加出效果显示。

<i></i>标识引用文本,以斜体效果显示。

<blink></blink>标识文本闪烁,以闪烁效果显示。IE浏览器不支持此标签。

<big></big>标识文本放大,以发大效果显示。

<small></small>标识缩小文本,以缩小效果显示。

<sup></sup>标识上标文本,以上标文本效果显示。

<sub></sub>标识下标文本,以下标文本效果显示。

<cite></cite>标识引用文本,以引用效果显示。

代码示例:

<html>

<head>

<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>示例代码</title>

</head>

<body>

<p>列如,针对下面这个一元二次方程:</p>

<p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>

<P>我们使用<big><b>因式分解法</b></big>来演示解题思路如下:</p>

<p><small>由:</small>(<i>x</i>-1)(<i>x</i>-40=0</p>

<p><small>得:</small><br/><i>x</i><sub>1</sub>=1<br/>

<i>x</i><sub>2</sub>=4</p>

</body>

</html>

一.4列表标签

<ul></ul>标识无序列表

<ol></ol>标识有序列表

<li></li>标识列表项目

代码示例:

<html>

<head>

<meta http-equiv="Content-Type"content="text/html;charset=utf-8/>

<head>

<title>代码示例</title>

</head>

<body>

<h1>解一元一次方程</h1>

<p>一元一次方程有四种解法</P>

<ul>

<li>直接开平方</li>

<li>配方法</li>

<li>公式法</li>

<li>因式分解法</li>

</ul>

</body>

</html>

一.5链接标签

<a></a>标识超链接

代码示例:

<html>

<head>

<meta http-equiv="Content-Type"content="text/heml;charset=utf-8"/>

<title>代码示例</title>

</head>

<body>

<a href="http//baidu.com/>百度一下</a>

</body>

</html>

<a>标签还可以定义锚点。锚点是一类特殊的超链接,他可以定位到网页中的某个位置。下面这个代码就可以跳转到网页底部。

代码示例:

<html>

<head>

<meta http-equiv="Content-Type"cintent="text/html;charset=utf-8"/>

<title>代码示例</title>

</head>

<body>

<a href="#btm">跳转到网页底部</a>

<div id="box"style="height:2000px;border:solid 1px red;">撑开浏览器滚动条</div>

<span id="#btm">底部错点位置</span>

</body>

</html>

一.6多媒体标签

<img/>:镶入多媒体

<embed></embed>:嵌入多媒体

<object></object>:嵌入多媒体

一.7表格标签

<table></table>:定义表格结构

<caption></caption>:定义表格标题

<th></th>:定义表头

<tr></tr>:定义表格行

<td></td>:定义表格单元格

代码示例:

<html>

<head>

<mead http-equiv="Content-Type"content="text/html;chanrset=utf-8"/>

<title>代码示例</title>

<body>

<table suammary="ASCLL是英文American standard code for information interchange 的缩写 。ascll编码是目前计算机最通用的编码标准。因为计算机只能接受数字信息,ascll编码将字符装换为数字来表示,以便计算机能够接受和处理。">

<caption>ascll字符集(节选)</capton>

<tr>

<th>十进制</th>

<th>十六进制</th>

<th>字符</th>

</tr>

<tr>

<td>9</th>

<td>9</th>

<td>TAB</th>

</tr>

<tr>

<td>10</td>

<td>A</td>

<td>换行</td>

</tr>

<tr>

<td>13</td>

<td>D</d>

<td>回车</td>

</tr>

<tr>

<td>32</td>

<td>20</td>

<td>空格</td>

</tr>

</table>

</body>

</html>

一.8表单标签

<form></form>定义表单结构

<input/>定义文本区域

<textarea></textarea>定义多行文本框

<selet></selet>定义下拉列表

<option></option>定义下拉列表中的选择项目

代码示例:

<from id="from1"name="from1"method="post"action="">

        <p>单行文本域:<input type="TEXT"name="textfileid"id="textfileid"/></P>

        <p>密码域<input type="password"name="passwordfield"id="passwordfield"/></P>

        <P>多行文本区域:<textarea name="textareafield"id="textareafield"></textarea>

        <p>复选框:<p>复选框1<input name="checkbox1"type="checkbox"value=""/>

                    复选框2:<input name="checkbox2'type="checkbox"value=""/>

        </p>

        <p>单选按钮

            <input name="radio1"type="radio"value=""/>按钮1

            <input name="radio2"type="radio"value=""/>按钮2

        </p>

        <p>下拉菜单

            <selet name="seletlist">

                <option value="1">选项1</option>

                <option value="2">选项2</option>

                <option value="3">选项3</option>

            </selet>

        </p>

        <p><input type="submit"name="button"id="button"value="提交"/>

</from>



少客联盟- 版权声明 1、本主题所有言论和图片纯属会员个人意见,与少客联盟立场无关。
2、本站所有主题由该帖子作者发表,该帖子作者铭镕小姐姐少客联盟享有帖子相关版权。
3、少客联盟管理员和版主有权不事先通知发贴者而删除本文。
4、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者铭镕小姐姐少客联盟的同意。
5、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。
6、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
7、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意。
8、官方反馈邮箱:chinasuc@chinasuc.cn


上一篇:Sublime Text 经典讲解概括
下一篇:看的太慢飘了啊!
最新回复 (2)
全部楼主
  • 铭镕小姐姐 27天前
    0 2
    原创不喜勿喷
  • admin 26天前
    0 3
    • 少客联盟
      4
        登录 注册 QQ登录(停用)
返回
负责声明:本站部分资源来源于网络,如有侵权请发邮件(chinasuc@chinasuc.cn)告知我们,我们将会在24小时内处理。