HTML（为什么这么简单的也贴出来，看前言）

前言：有些东西一直在用但是时间久了也会忘记叫什么名字，面试都是口头描述，不记得专业术语就很尴尬了。

第二章用HTML设置文本

第一节：HTML基本结构
<html> 标记放在 HTML 文件的开头，是一个形式上的标记；
<body> 标记称为主体标记，网页所要显示的内容都放在这个标记内，它是 HTML 文件的重要所在；
<head> 标记称为头标记，起的作用是放置关于此 HTML 文件的信息，如提供索引、定义 CSS 样式等；
<title> 标记称为标题标记，起的作用是设定网页标题；

第二节：文本排版
2.1 段落标签<p>
2.2 换行标签<br/>
2.3 标题标签<h1>~<h6>
2.4 文字居中标签<center> （H5废弃了）
2.5 文字段落缩进标签<blockquote>

第三节：设置文字列表
3.1 无序列表ul
3.2 有序列表ol
文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来；

<body>
无序列表
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>
</body>

View Code

第四节：HTML标记与HTML属性

4.1 用 align属性控制段落的水平位置

<p align="center"></p>
4.2 用 bgcolor属性设置背景颜色

4.3 设置文字的特殊样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字的特殊样式</title>
</head>
<body>
默认文字样式<br/>
<b>文字以粗体方式显示</b><br/>
<i>文字以斜体方式显示</i><br/>
<u>文字以加下划线方式显示</u><br/>
<s>文字以加下删除方式显示</s><br/>
<big>文字以放大方式显示</big><br/>
<small>文字以缩小方式显示</small><br/>
<strong>文字以加强强调方式显示</strong><br/>
<em>文字以强调方式显示</em><br/>
<address>caofeng2012@126.com</address><br/>
<code>abc</code><br/>
</body>
</html>

View Code

4.4 设置文字的大小和颜色font标签

<font color="red" size="10" face="宋体">Font标签</font>

第五节：特殊文字符号

符号　　 HTML代码
< 　　 <
>　　　　 >
©　　　　 ©
上标　　<sup></sup>
下标　　<sub></sub>

<title>特殊文字符号</title>
</head>
<body>
&lt;br/&gt;<br/>
版权所有 &copy;www.java1234.com<br/>
2<sup>3</sup> <br/>
3<sub>2</sub>
</body>

View Code

第三章在网页中使用图像img

第二节：相对路径VS绝对路径

第三节：设置图片的尺寸
第四节：用 alt属性为图像设置替换文本(如果图片不存在就出现文本)
第五节：用 title属性为图像设置标题（鼠标移动上去就显示）

第四章用HTML建立超链接

第一节：基本文字超链接
第二节：设置图片的超链接
第三节：设置以新窗口显示链接页面

<a href="http://www.java1234.com" target="_blank">Java知识分享网</a><br/>
<a href="http://www.java1234.com" target="_blank"><img src="java1234.gif"/></a>

嵌入式框架iframe

第五章用HTML创建表格

第一节：表格的基本结构
第二节：合并单元格

2.1 用 colspan属性左右合并单元格
2.2 用 rowspan属性上下合并单元格
第三节：用 align属性设置对齐方式
第四节：用 bgcolor属性设置表格背景色和边框颜色
第五节：用 cellpadding属性和cellspacing属性设定边距
5.1 cellspadding属性设定表格单元格中的内容距离格线的距离
5.2 cellspacing 属性设定表格相邻单元格边线之间的距离。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用cellpadding属性和cellspacing属性设定边距</title>
</head>
<body>
<table border="1" width="400" bgcolor="red" cellpadding="20px;" cellspacing="20px;">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr align="center">
        <td colspan="2">1-1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td rowspan="2" align="center" bgcolor="green">3-2-2</td>
        <td>2-3</td>
        <td>1-4</td>
    </tr>
    <tr bgcolor="yellow">
        <td>3-1</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
</body>
</html>

View Code

第六章 HTML表单

第一节：Form表单
第二节：文本表单
1，文本框
2，密码框
3，文本域
表单是一个包含表单元素的区域。主要作用就是向服务器提交数据。

<html>
<head>
<meta charset="UTF-8">
<title>文本域</title>
</head>
<body>
<form action="a.jsp" method="get">
<table>
    <tr>
        <td>
        用户名：
        </td>
        <td>
        <input type="text" id="userName" name="userName"/>
        </td>
    </tr>
    <tr>
        <td>
        密码：
        </td>
        <td>
        <input type="password" id="pwd" name="pwd"/>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <textarea id="desc" name="desc" rows="10" cols="30"></textarea>
        </td>
    </tr>
</table>
<br/>

</form>
</body>
</html>

View Code

第三节：单选框
第四节：复选框
第五节：下拉框

<html>
<head>
<meta charset="UTF-8">
<title>下拉框</title>
</head>
<body>
性别：<input type="radio" name="sex" />男
<input type="radio" name="sex" checked="checked"/>女<br/>
兴趣：
<input type="checkbox" name="hobby" />唱歌
<input type="checkbox" name="hobby" />跳舞
<input type="checkbox" name="hobby" checked="checked"/>游泳
<br/>
年级：
<select id="grade" name="grade">
    <option value="1">一年级</option>
    <option value="2">二年级</option>
    <option value="3">三年级</option>
</select>
</body>
</html>

View Code

第六节：按钮
1，提交按钮
2，普通按钮

3.重置按钮

<input type="reset" /> 定义重置按钮。会清除表单中的所有数据。

<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
</head>
<body>
<form action="a.jsp" method="get">
<table>
    <tr>
        <td>
        用户名：
        </td>
        <td>
        <input type="text" id="userName" name="userName"/>
        </td>
    </tr>
    <tr>
        <td>
        密码：
        </td>
        <td>
        <input type="password" id="pwd" name="pwd"/>
        </td>
        
    </tr>
    <tr>
        <td>
            <input type="submit" value="登录"/>
        </td>
        <td>
            <input type="button" value="重置"/>
        </td>
    </tr>
</table>
<br/>

</form>
</body>
</html>

View Code

第七节：文件上传

第七章 HTML块

第一节：DIV

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。会换行。
第二节：SPAN
HTML <span> 元素是内联元素，可用作文本的容器。不换行。

<html>
<head>
<meta charset="UTF-8">
<title>DIV块元素</title>
</head>
<body>
<div id="d1" style="border: 1px red solid;">
<h1>呵呵</h1>
<h2>嘿嘿</h2>
<p>嘻嘻</p>
</div>
<hr/>
<div id="d2" style="border: 1px blue solid;">
<h1>呵呵2</h1>
<h2>嘿嘿2</h2>
<p>嘻嘻2</p>
</div>
</body>
</html>

-------------------------------------------------------------------------

<html>
<head>
<meta charset="UTF-8">
<title>SPAN内联元素</title>
</head>
<body>
<p>这是<span style="color: yellow">一个</span><span style="color: red">屁</span>！</p>
</body>
</html>

View Code

补充：

<label> 元素只要将该属性的值设置为表单中任何一个控件的id属性的值，则当用户点击该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上.常用语单选、复选框。

    <body>
        <form action="SaveData.aspx" method="post">
            <br />
            <input type="checkbox" name="chkHid" id="chkHid" />
            <label for="chkHid">不要公开我的信息</label>
        </form>
    </body>

View Code

为控件分组

    <body>
        <form action="SaveData.aspx" method="post">
            <fieldset>
                <legend>用户信息</legend>
                用户名：<input type="text" /><br />
                密码：<input type="password" />
            </fieldset>
            <br />
            <fieldset>
                <legend>地址信息</legend>
                地址：<input type="text" /><br />
                邮编：<input type="text" />
            </fieldset>
        </form>
    </body>

View Code

锚点

锚点的作用就是可以在页面的不同特定位置添加源标记，以便使用链接可以链接到这些特定的位置。

    <body>
       <a name="top"></a>
       <h1>The page title</h1>
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
       <a href="#top">Return to top</a>
    </body>

View Code

posted @ 2017-03-05 16:09 SKYisLimit 阅读(128) 评论(0) 收藏举报

刷新页面返回顶部

SKYisLimit

HTML（为什么这么简单的也贴出来，看前言）

为控件分组

公告