您的位置：首页 > Web前端 > HTML

Html知识总结

2015-12-10 12:57 639 查看

（一）概述

HTML是将内容和内容显示形式结合在一起的语言，它对于内容显示形式的控制，主要是通过标签（元素）的属性，由于它对“内容显示形式”存在着很多的弊端，所以之后就出现了CSS，CSS就相当于HTML标签的属性。

（二）文本与段落标记

<font>标签

属性face：设置字体，且字体必须在浏览器中安装相应的字体后才可以正确浏览。<font face="华文彩云"></font>

属性size：设置字号。从1—7的整数代表字体大小的绝对字号；从-4—+4的整数，相对于3号字号放大和缩小。<font size="5">Hello</font>；<font size="+4">Hello</font>

属性color：设置颜色。<font color="#ff0000">Hello</font>

<b>,<strong>标签

加粗。<b>加粗的文字</b> <string>加粗的文字</string>

<i>,<em>,<cite>标签

斜体。<i>斜体文字</i>；<em>斜体文字</em>；<cite>斜体文字</cite>

<sup>,<sub>标签

上标，superscript,<sup>上标的内容</sup>;下标，subscript,<sub>下标的内容</sub>

<big>,<small>标签

增大文本字号：<big>大字号内容，在定义的字号大小的基础上增加一级，可以使用多个该标签</big>；缩小文本字号：<small>小字号内容,比普通文字小一级，再加一个标签就会又小一级，依次类推</small>

<u>标签

在文字下方添加下划线。<u>下划线的内容</u>

<p>,<br>,<nobr>标签

划分段落：<p>段内内容</p>,该段和下段会有空行隔开；强制换行：行内容<br>，连续多个标签可实现多次换行；强制不换行：<nobr>不换行的内容</nobr>,网页如果某一行的文本过长，浏览器会自动对这段文字进行换行处理，但是，可以使用<nobr>标签实现禁止自动换行，此行内容过多时，会出现水平滚动条

<hr>标签

插入一条水平分割线

属性width：水平线的宽度：<hr width="宽度">,宽度可以为百分比（相对浏览器，会随着浏览器的大小而改变）

属性size：水平线的高度：<hr size="高度">,高度只能为像素

属性color：水平线的颜色：<hr color="颜色">

属性align：水平线的对齐方式，默认为居中对齐：<hr align="对齐方式">,center,left,right

<h1>……<h6>标签

标题字，headline，<h1>一级标题</h1>，<h6>六级标题</h6>，可使用align属性

<pre>标签

原样显示输入内容，包括输入的某些特殊的字符，<pre>原样输出内容</pre>

插入特殊字符

在html文档中，连续的多个空白字符（空格、制表符、回车、换行等），浏览器显示时将只解析为一个空格字符。想在html文档中插入特殊字符，我们可以用字符引用和实体引用。标题字，headline，<h1>一级标题</h1>，<h6>六级标题</h6>，可使用align属性

<pre>标签

原样显示输入内容，包括输入的某些特殊的字符，<pre>原样输出内容</pre>

（三）input标签

文字字段text

<input name="控件名称，区别页面中其他控件" type="text" value="文本框的默认取值" size="确定文本框在页面中显示的长度" maxlength="文本框中最多可以输入的字符数" />

注意：加入size属性后，其大小最小为1，最大值将取决于浏览器的宽度

密码域password

<input name="控件名称，区别页面中其他的控件" type="password" value="默认值，以*显示" size="控件在页面中显示的长度，义字符为单位" maxlength="控件最多可以输入的字符数" />

注意：密码域仅仅将控件中的内容以*显示，他不能保证数据传送中的安全

单选按钮radio

<input name="控件名称，相同名称的控件为同一组" type="radio" value="单选按钮的取值，传送的数据值" checked="checked" />

注意：一组单选中只能出现一个checked；传送数据的时候，只传送被选中的数据

复选框checkbox

<input name="复选框名称，区别页面中其他的控件" type="checkbox" value="复选框的取值，要传送的数据值" checked="checked" />

注意：复选框可以拥有自己的名称，并不需要属于哪一个组

普通按钮button

普通按钮一般情况下要配置脚本来进行表单处理，“处理程序”就是脚本编写的函数

<input type="submit" name="按钮名称" value="按钮的取值:显示在按钮上" onclick="处理程序" />

提交按钮submit

提交按钮是一种特殊的按钮，单击该类按钮可以实现表单内容的提交

<input type="submit" name="按钮名称" value="按钮的取值:在按钮上显示" />

重置按钮reset

重置按钮用来清除用户在页面中输入的信息，相当于重新打开该网页时显示的内容

<input type="reset" name="按钮名称" value="按钮的取值：在按钮上显示">

图像域image

可以使用一副图像作为按钮，这样做可以创建任何外观的按钮

<input type="image" name="图像域名称" src="图像路径" />

隐藏域hidden

传送一些对用户不可见的数据，隐藏域包含的那些要提交处理的数据，并不显示在浏览器中

<input type="隐藏域名城" type="hidden" value="隐藏域的取值" />

文件域file

文件域在上传文件时常常用到，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传，在上传图像时也常常用到

<input type="file" name="文件域名称" size="控件的长度" maxlength="最长字符数" />

下拉菜单

列表项

文本域标记textarea

多行输入文本的时候，需要使用textarea标签

<textarea name="文本域名称" cols="列数" rows="行数"></textarea>

文本域和计算机的内存一样大，文本域的大小不受浏览器窗口的显示。如果文本框超出了浏览器窗口的大小，这时会出现滚动条来帮助用户看到整个文本域

id标记

<id=元素的标示名>

id用来表示页面的惟一元素

例子：

<span style="font-size:18px;"><html>  
    <head><title>Hello World</title></head>  
    <body>      
        <form name="form1" method="post" action="">  
            <table width="500" border="0" align ="center" cellpadding="0" cellspacing="2">  
                <tr>  
                    <td width="143" height="25">姓名：</td>  
                    <!--单行文本-->  
                    <td width="351"><input type="text" name="name" id="name" size="20"></td>  
                </tr>  
                <tr>  
                    <td height="25">年龄：</td>  
                    <td>  
                        <!--下拉菜单-->  
                        <select name="age" id="age">  
                            <option value="5" selected="selected">5</option>  
                            <option value="6">6</option>  
                            <option value="7">7</option>  
                        </select>  
                    </td>  
                </tr>  
                <tr>  
                    <td height="25">性别：</td>  
                    <td>  
                        <!--单选框-->  
                        <input name="radiobutton" type="radio" value ="男" checked="checked">  
                        男  
                        <input name="radiobutton" type="radio" value ="女">  
                        女  
                    </td>       
                </tr>  
                <tr>  
                    <td height="25">家庭住址：</td>  
                    <!--单行文本-->  
                    <td><input name="textfield" id="1" type="text" size="40"></td>  
                </tr>  
                <tr>  
                    <td height="25">联系电话：</td>  
                    <!--单行文本-->  
                    <td><input name="textfield" id="2" type="text" size="15"></td>  
                </tr>  
                <tr>  
                    <td height="25">您对我们的玩具是否满意</td>  
                    <!--复选框-->  
                    <td>  
                        <input type="checkbox" name="checkbox" id="3" value="非常满意" checked="checked">  
                        非常满意  
                        <input type="checkbox" name="checkbox" id="4" value="一般">  
                        一般  
                        <input type="checkbox" name="checkbox" id="5" value="非常差">  
                        非常差  
                    </td>  
                </tr>  
                <tr>  
                    <td height="25">意见：</td>  
                    <!--多行文本输入-->  
                    <td><textarea name="textarea" cols="40" rows="6"></textarea></td>  
                </tr>  
                <tr>  
                    <td height="25" colspan="2" align="center">  
                        <!--提交按钮-->  
                        <input type="submit" name="submit" id="7" value="提交">  
                        <!--重置按钮-->  
                        <input type="reset" name="reset" id="8" value="重置">  
                    </td>                   
                </tr>  
            </table>  
        </form>  
    </body>  
</html>  </span>

<span style="font-size:18px;"><span style="background-color: rgb(255, 255, 255); font-family: System;">
</span></span>

（四）列表

有序列表

依赖顺序来表示重要的程度,列表中的项目有先后顺序，一般采用数字或字母作为序号

<ol>标签

<ol type="序号类型" start="编号的起始值，只能为整数">

<li>有序列表</li>

<li>有序列表</li>

<li>有序列表</li>

</ol>

type的取值：1（数字：1、2、3…）,a（小写英文字母：a、b、c…）,A（大写英文字母：A、B、C…）,i（小写罗马数字：i、ii、iii、v…）,I（大写罗马数字：I、II、III、IV…）；默认（不写）为1

start的取值：只能为整数，表示序号类型从第几个编号开始。

无序列表

无须列表没有序号

<ul>标签

<ul type="序号类型">

<li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

</ul>

type的取值：Disc（黑色实心圆点），circle（空心圆环），square（正方形）；默认（不写）为Disc

<dir>,<menu>标签

没有type属性,其他的和ul标签一样，只需把ul变成dir或menu就行了

<dl>标签

<dl>

<dt>HTML</dt> <dd>HTML的意思就是……</dd>

<dt>CSS</dt> <dd>CSS的意思就是……</dd>

</dl>

定义列表由两部分组成：定义要解释的名称和定义该名词具体的解释；d为definition，t为term，d为description

例子：

<span style="font-size:18px;">ul:中的li标签本身就具备了缩进.  
    <!--ul:可也可以让程序有上列表下级的关系.而且可以在前面加上原点.或者方框之类的;-->  
    <ul type="disc">  
     <li>哈哈哈哈</li>  
        <li><span style="font-family: Arial, Helvetica, sans-serif;">嘻嘻哈哈</span></li>  
        <li>哈哈哈哈</li>  
    </ul>   
示例<dl>:  
 <!--  
    注释文字  
    dl:定义列表的范围  
    dt:定义上层项目条目  
    dd:定义下层项目条目.而且dd具备缩进功能的效果.  
    -->   
    <dl>  
     <dt>游戏名称</dt>  
         <dd>星际争霸</dd>  
            <dd>星际争霸</dd>  
            <dd>星际争霸</dd>  
            <dd>星际争霸</dd>  
        <dt>部门名称</dt>  
         <dd>培训部</dd>  
            <dd>培训部</dd>  
            <dd>培训部</dd>  
            <dd>培训部</dd>  
 </dl>  </span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航