黑猴子的家：JavaWeb 之 HTML

2019-12-12  本文已影响0人  黑猴子的家

1、HTML 概述

（1）超文本标记语言：Hyper Text Markup Language
（2）HTML文件由一组标签构成，经过浏览器解析之后可以显示网页内容。
（3）HTML文档的构成


2、基本语法规范等

基本语法规范及具体的使用见工程：模板 -> Web01_UI

3、HTML 语法

grammar.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <!-- ①标签不能交叉嵌套 -->
    正确：<p><i>早安，Alex</i></p>
    错误：<p><i>早安，Alex</p></i>
    
    <!-- ②标签必须正确关闭 -->
    <!-- i.有文本内容的标签： -->
    正确：<p>早安，Alex</p>
    错误：<p>早安，Alex
    
    <!-- ii.没有文本内容的标签： -->
    正确：aaaaaa<br />bbbbbbbb
    错误：aaaaaa<br>bbbbbbbb
    
    <!-- ③属性必须有值，属性值必须加引号 -->
    正确：<font color="blue">早安，Alex</font>
    错误：<font color>早安，Alex</font>
    错误：<font color=red>早安，Alex</font>
        
    <!-- ④注释不能嵌套 -->
    正确：<!-- 注释内容 -->
    错误：<!-- 注释内容<!-- 嵌套的注释 --> 溢出的注释 -->
    
</body>
</html>

4、表格

table.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <table border="1" align="center" width="80%">
        <tr><th>姓名</th><th>位置</th><th>公司</th><th>财富</th></tr>
        <tr>
            <td>王健林</td>
            <td>北京</td>
            <td>万达</td>
            <td>2211</td>
        </tr>
        <tr>
            <td>马云</td>
            <td>杭州</td>
            <td>阿里巴巴</td>
            <td>1889</td>
        </tr>
        <tr>
            <td>马化腾</td>
            <td>深圳</td>
            <td>腾讯</td>
            <td>1642</td>
        </tr>
        <tr>
            <td>王卫</td>
            <td>深圳</td>
            <td>顺丰速运</td>
            <td>1240</td>
        </tr>
    </table>
</body>
</html>

5、超链接

（1）a.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <a href="pages/target.html">跳转到目标页面，目标页面有美女！</a>
</body>
</html>

（2）target.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    美女！
</body>
</html>

6、表单

（1）form 标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 创建表单 -->
    <!-- 使用form标签定义表单
        使用action属性指定提交数据的位置
        使用method属性指定提交数据的方式
            GET：会将提交的数据附着在URL地址后面，在浏览器地址栏可以看到
            POST：不会提交的数据附着在URL地址后面，在浏览器地址栏看不到
     -->
    <form action="target.html" method="post">
        用户名：<input type="text" name="userName" /><br /><br />
        密码：<input type="password" name="password" /><br /><br />
        <!-- 提交按钮：type="submit"，使用value属性指定它是页面上显示的文字 -->
        <input type="submit" value="登录" />
    </form>
</body>
</html>

（2）文本框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- file:///D:/workspace/test/Web02_UI/WebContent/04.表单/target.html?username=Tom&email=tom@126.com&password=abc123&other=%E6%97%A0-->
    <form action="target.html" method="get">
        用户名：<input type="text" name="username" /><br /><br />
        邮箱：<input type="text" name="email" /><br /><br />
        密码：<input type="text" name="password" /><br /><br />
        其他：<input type="text" name="other" /><br /><br />
        <input type="submit" value="登录" />
        <br /><br />
    </form>
</body>
</html>

（3）密码框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="target.html" method="get">
        密码：<input type="password" name="password" /><br /><br />
        <input type="submit" value="登录" />
        <br /><br />
    </form>
</body>
</html>

（4）单选框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="target.html" method="get">
        性别：
        <input type="radio" name="gender" value="male" />男生
        <input type="radio" name="gender" checked="checked" value="female" />女生
        <input type="radio" name="gender" value="eastSuccess" />东方不败
        <br /><br />
        <input type="submit" value="提交" />
        <br /><br />
    </form>
</body>
</html>

（5）多选框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="target.html" method="get">
        你喜欢的足球队<br /><br />
        巴西<input type="checkbox" name="soccerTeam" value="Brazil" />
        德国<input type="checkbox" name="soccerTeam" value="German" />
        荷兰<input type="checkbox" name="soccerTeam" value="Holland" />
        <br /><br />
        <input type="submit" value="提交" />
        <br /><br />
    </form>
</body>
</html>

target.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    Target Page...
</body>
</html>

7、插入图片

image.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <img alt="加载图片失败" src="img/a.jpg">
</body>
</html>

8、列表

List.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 在这里创建无序列表 -->
    <ul>
        <li>火影忍者</li>
        <li>死神</li>
        <li>海贼王</li>
        <li>名侦探柯南</li>
        <li>网球王子</li>
    </ul>
    <br /><br />
    <!-- 在这里创建有序列表 -->
    <ol>
        <li>漩涡鸣人</li>
        <li>黑崎一护</li>
        <li>路飞</li>
        <li>柯南</li>
        <li>越前龙马</li>
    </ol>
</body>
</html>

9、标题段落

article.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 在这里创建标题 -->
    <h1>江畔独步寻花</h1>
    <h3>唐•杜甫</h3>
    <!-- 在这里创建段落 -->
    <p>黄四娘家花满蹊</p>
    <p>千朵万朵压枝低</p>
    <p>留连戏蝶时时舞</p>
    <p>自在娇莺恰恰啼</p>
</body>
</html>

尖叫提示：还有许多没有讲到，大家可以看W3School，讲到的这些都是最常用的

上一篇下一篇

猜你喜欢

热点阅读