java前端学习之HTML5

1.初识HTML

HTML

Hyper Text Markup Language(超文本标记语言) 	

优势：跨平台
W3C：World Wide Web Consortium(万维网联盟)
W3C标准：

• 结构化标记语言（HTML、XML）
• 表现行为标准语言（CSS）
• 行为标准（DOM、ECMAScript）

2.网页基本标签

## 标题标签
	<h1>一级标题</h1>
	<h2>二级标签</h2>
	最多六级标签   
## 段落标签
 	<p> 放在这里面会保留格式</p>
## 换行标签
	<br/>标签是单标签
## 水平线标签
	<hr/>单标签
## 字体样式标签
	<strong>粗体</strong>
	<em>斜体</em>
## 注释和特殊符号
	空格： &nbsp;
	大于：&gt;
	小于：&lt;

3.图像、超链接、网页布局

图像：

<!--src:路径
    alt:图像的替代文字
    title:悬停提示文字-->
<img src="../resources/image/123.jpg" alt="我的图片" title="我的图片" width="500" height="500">

超链接

<!--href:必填，表示要跳转到那个页面
    target:表示窗口在哪里打开
           _blank:在新标签中打开
           _self:在自己的网页中打开
   锚链接：#
   <a href="#top">回到顶部</a>
   邮件链接：mailto
   <a href="mailto">myQQ</a>
-->
<a href="https://www.baidu.com" target="_blank" >百度</a>

块元素：无论内容多少，该元素独占一行，(P、h1-h6)
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em)

4.列表、表格、媒体元素

列表

<!--有序是ol列表,无序是ul列表-->
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<!--自定义列表-->
<dl>
    <dt>标题</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

表格

<!--表格：table
行： tr
列： td-->
<table border="1px">
    <tr>
    <!-- colspan 跨列
         rowspan 跨行-->
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

媒体元素

<!--controls:控制条
    autoplay：自动播放-->
<video src="" controls autoplay></video>
<audio src="" controls autoplay></audio>

页面结构

5.表单及表单应用

表单语法

<h1>注册</h1>
<!--get方式不安全但是高效
post方式比较安全，传输大文件-->
<form method="post" action="1.我的第一个网页.html">
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

<!--下拉框-->
<p>国家
    <select name="列表名称" >
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="日本">日本</option>
    </select>
</p>
<!--文本域-->
<p>反馈
    <textarea name="text" cols="30" rows="10">内容</textarea>
</p>

6.表单初级验证

<!--表单验证
placeholder 隐藏提示信息
required 非空判断
pattern 正则表达式-->