Java 之 HTML-CSDN博客

1.HTML

　　a.定义：HTML指的是超文本标记语言

　　b.特点：HTML不是一种编程语言，而是一种标记语言

　　　　　　标记语言是一套标记标签

　　　　　　HTML使用标记标签来描述网页

　　c.HTML标签：①通常标签是成对出现的，有开始就有结束

<标签名>  </标签名>

　　　　　　　　 ②有些标签有属性

<标签名 属性名="属性值">  </..>

　　d.网页的基本格式

<html>
    <head>
        <title>
        </title>
    </head>
    <body>
    </body>
</html>

2.重要标签：

　　a.h1~h6标签（块级标签）：

<h1>样式一</h1>
<h3>样式三</h3>
<h6>样式六</h6>

　　b.段落标签（不保留段落格式）：

<p>段落</p>

　　c.预格式化标签（保留段落格式）：

<pre>预格式化段落</pre>

　　e.图片标签（行级标签）：

<img src="../image/fish.jpg" alt="图片无法显示" title="这是一条鱼" width="50%" height="500px" />

　　f.meta标签：

　　　　写在head中解决乱码问题：

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

　　　　设置关键词：

<meta name="keywords" content="女装">

　　　　设置描述：

<meta name="discription" content="公司名字">

　　　　设置自动跳转：

<meta http-equiv="refresh" content="5;url=http://www.baidu.com">

　　g.link标签：设置标签图案

<link rel="shortcut icon" href="../image/logo.ico">

　　h.超链接标签：

<a href="http://www.baidu.com" target="_blank">跳转</a>

　　　　注：target表示目标地址在哪里被打开。_self在自己窗口中打开：_blank在空白窗口中打开

　　i.锚点：

　　　　①锚点的申明：

<a name="first">  </a>

　　　　②锚点的使用：

<a href="#first">  </a>

3.其他标签与符号：

a.注释：

　　b.空格： 

　　c.换行：<br>

　　d.加粗：<b></b>

　　e.小于：<

　　f.大于：>

　　g.斜体：<i></i>

　　h.©：©

4.列表标签（块级）：

　　a.有序列表：（默认type为数字）

<ol type="A" start="27">
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ol>

　　b.无序列表：（默认type为实心圆点）

<ul type="circle">
    <li>吃</li>
    <li>吃</li>
    <li>吃</li>
</ul>

　　c.定义列表：

<dl>
    <dt><img src="img/long.jpg"></dt>
    <dd>龙套装定价：<font size="32" color="red">888</font>元</dd>
</dl>

5.表格标签：

　　a.格式：

<table align="center" border="1" width="50%" rules="row">
    <tr>
        <th>姓名</th>
        <td align="center">张三</td>
        <th>性别</th>
        <td align="center">男</td>
    </tr>

    <tr>
        <th>姓名</th>
        <td align="center">李四</td>
        <th>性别</th>
        <td align="center">男</td>
    </tr>
</table>

　　b.跨列合并：<td colspan="2">

　　c.跨行合并：<td rows="2">

　　d.隐藏标签：

　　　　①表头：<thead> </thead>

　　　　②表体：<tbody> </tbody>

　　　　③表尾：<tfoot> </tfoot>

6.框架标签：

　　a.<frameset>：（独立于<html>）

<frameset rows="20%,60%,*">
    <frame src="top.html"/>
    <frame src="center.html"/>
    <frame src="footer.html"/>
</frameset>

　　b.<iframe>：（嵌套于<body>）

<iframe src="http://www.baidu.com" width="80%" height="300">
<iframe>

7.表单：

　　a.<form>

<form action="success.html" method="post">
输入元素
</form>

　　　　注：action表示表单提交的位置，method表示提交方式，有"post"与"get"两种，"get"为默认提交方式，不安全

　　b.文本框：

<input type="text" value="请输入用户名" readonly="readonly" maxlength="5"/>

　　　　注：readonly表示只读

　　c.密码框：

<input type="password"/>

　　d.单选框：

<input type="radio" name="gender" checked="checked"/>男
<input type="radio" name="gender"/>女

　　　　注：名字相同，默认为一组

　　e.复选框：

<input type="checkbox"/>

　　f.下拉列表：

<select>
    <option>四川</option>
    <option>云南</option>
</select>

　　g.文件上传：

<input type="file"/>

　　h.文本域：

<textarea rows="20" cols=40>
</textarea>

　　i.普通按钮：

<input type="button" value="注册"/>

　　j.重置按钮：

<input type="reset" value="重置"/>

　　k.提交按钮：

<input type="submit" value="提交"/>
<input type="image" src="image/8.jpg"/>

　　l.隐藏表单：

<input type="hidden" name="hello" value="hello"/>

　　m.标题框：

<fieldset>
    <legend>必填信息</legend>
    <input type="text"/>
</fieldset>

　　n.控制标签：

<label for="username">用户名</label>
<input id="username" type="text"/>

8.补充标签：

　　a.文字标签：<font> </font>

　　b.滚动条标签：<marquee> </marquee>

<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()"> <font size="5px" color="red">恭喜“你有一条虫”获得顶级装备</font> </marquee>

转载于:https://www.cnblogs.com/vettel0329/p/6270787.html