HTML5

1. 项目创建及连接浏览器（IDEA）

项目创建
- 创建Java项目
- 联系html时可以删除src目录，因为没啥用
- 项目下创目录叫：html
- html目录下new一个html file
IDEA连接浏览器
- 点击菜单项“File”
- setting
- 搜web
- Tool 下的 Web Browsers
- Path改为浏览器的exe文件地址

2. 基本网页信息

注释
```

```

规范

<!DOCTYPE html>   
# 这里告诉浏览器使用html标准，一般情况下不写也行，因为浏览器默认使用此规范
# Ctrl + / 注释的快捷键

网站标题
```
<title>内容</title>
```

描述性标签

<meta charset="UTF-8">
<meta name="keywords" content="何军强的笔记">
<meta name="description" content="学习Java">

3. 网页基本标签

标题标签

<h1>xx</h1>  #一级标签
...
<h6>xx</h6>  #六级标签

段落标签
```
<p>内容</p>
# 快捷键 p+Tab
```
换行标签
```
<br> 或者 <br/>
```
水平线标签
```
<hr> 或者 <hr/>
```

字体样式标签

<strong>内容</strong> #粗体
<em>内容</em> #斜体

特殊符号

&nbsp;	#空格
&gt;	#大于号
&lt;	#小于号
&copy;	#版权符号

图像标签
```
<img src="path" alt="text" title="text" width="x" height="y" />
#src 图像地址
#alt 图像替代文字（图片失效时显示）
#title 鼠标悬停提示文字
```
注：资源应该放到项目下自己建立的目录“resources”，图片放在该目录下的目录“image”，视频应放到“video”等。

其中，绝对地址比较少用，要从根目录写完；相对地址比较常用，../表示上一级目录。

超链接

页面间链接

<a href="path" target="目标窗口位置">链接文本或图像</a>
#target 参数常用_self,_blank

ps: Ctrl + d : 复制改行到下一行

锚链接标签

<a name="top">top</a>			#标定的锚
<a href="xx.html#top">跳转</a>   #跳转按钮

功能性链接标签

<a href="mailto:1748709098@qq.com">点击联系我</a>

4. 行内元素和块元素

块元素
- 无论内容多少，该元素独占一行、自成一块;
- p、h1-h6...
行内元素
- 内容撑开宽度，左右都是行内元素可以排在一行，不会换行；
- a、strong、em...

5. 列表

有序列表(Order List)

<ol>
    <li>java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>

无序列表(Unorder List)

<ul>
    <li>java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

自定义列表(Diy List)

一般用在公司网站底部；

<dl>	#标签
    <dt>姓名</dt>		#列表名称

    <dd>张三</dd>		#列表内容
    <dd>李四</dd>
    <dd>王五</dd>

    <dt>性别</dt>

    <dd>男</dd>
    <dd>男</dd>
    <dd>男</dd>
</dl>

6. 表格

thead ：表头

th ：表头里面的内容，颜色会加深

tbody ：表主体

tfoot ：表尾

tr : table row

td : table data

col : 行

row : 列

特点：

每一个tr标签代表一行，如果这个tr标签有了跨行，那么下一行的被占的一格将会被上一行占用，下一行将会直接跨过这一格。
有时候写这个表格不需要太多标签，就tr和td组成就行，不太需要区分表头表尾（后面可能会改变看法）

<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">hjq</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">qqq</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>

7. 媒体元素

视频元素--video

<video src+"path" controls autoplay></video>

音频元素--audio

<audio src="path" controls autoplay></audio>

8. 页面结构分析

元素名	描述
header	标记头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于页面或页面中的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航内辅助内容

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

9. iframe内联框架

<iframe src="//player.bilibili.com/player.html?aid=417011253&bvid=BV1yV411v7yP&cid=306955782&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

<hr/>

<iframe src="https://www.360.com" name="myIframe" width="600" height="400"></iframe>

<a href="https://www.baidu.com" target="myIframe">点击跳转到百度</a>

iframe就是一个小窗口，嵌套在html窗口中，我们可以用name属性为这个小窗口赋予名字，超链接可以用这个名字跳转到这个小窗口中访问链接。

10. 表单post和get提交

<!--
post : 加密，可以传送大文件
get ： 不加密，不可以传大文件，但是高效

action ： 表单提交的位置
-->

<form action="firstHtml.html" method="post">

    <p>名字： <input type="text" name="username"></p>

    <p>密码： <input type="password" name="password"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
    
</form>

11. 文本框和单选框

type	元素类型
name	表单元素的名称
value	元素的初始值。type为radio的必须指定一个值
size	指定表单元素的初始宽度。
maxlength	type为text或password的，输入的最大字符数
checked	type为radio或checkbox的，指定按钮是否被选中

<p>性别：
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

12. 按钮和多选框

<!-- 多选框 -->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
</p>

<!-- 按钮 -->
<p>按钮：
    <input type="button" value="btn1" value="变强">
    <input type="image" src="path">
</p>

13. 列表框、文本域和文件域

<form action="firstHtml.html" method="get">
    <p> 国家：
        <select name="list" >
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="eth">瑞士</option>
        </select>
    </p>

    <p> 反馈：
        <textarea name="textarea"  cols="30" rows="10"></textarea>
    </p>

    <p>
        <input type="file" name="files">
    </p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

14. 搜索框滑块和简单验证

<form action="firstHtml.html" method="get">
    <!-- email验证 -->
    <p>
        <input type="email" name="email"> 
    </p>

    <!-- url验证 -->
    <p>
        <input type="url" name="url">
    </p>

    <!-- number验证 -->
    <p>
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

    <!-- 滑块 
        step ： 最小调节单位
    -->
    <p>
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

    <!-- 搜索框 -->
    <p>
        <input type="search" name="search">
    </p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

15. 表单的应用

一些关键字
- 隐藏域：hidden
- 只读：readonly
- 禁用：disabled

增强鼠标可用性（点文字可以锁定到输入框）

<label for="mark">点我试试</label>
<input type="text" id="mark">

16. 表单的初级验证

为什么要进行验证：

减轻服务器的负担
安全

关键字：

提示信息：placeholder
非空判断：required
正则表达式：patten（自定义输入格式，如年月日等）

posted @ 2021-03-12 15:35 何-某人阅读(74) 评论(0) 收藏举报

刷新页面返回顶部

何-某人