HTML基础操作

BitZ2

于 2020-10-04 10:44:52 发布

阅读量1k

点赞数 1

文章标签： intellij idea html5

本文链接：https://blog.csdn.net/BitZ2/article/details/108917061

版权

HTML基础操作

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

HTML5优势

世界知名浏览器厂商对HTML5的支持（微软、Google、苹果、Opera、Mozilla）
市场需求
跨平台

W3C标准

w3c
World Wide Web Consortium(万维网联盟)
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机
构
http://www.w3.org/l
http://www.chinaw3c.orgl
w3C标准包括
结构化标准语言(HTML、XML)
表现标准语言(css)
行为标准(DOM、ECMAScript )

网页基本标签

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

<p>
    +文本内容
</p>

换行标签

<br/>

水平线标签

<hr/>

字体样式标签

<!--粗体 斜体-->
粗体：<strong>内容</strong>
斜体：<em>内容</em>

注释和特殊符号

空格：&nbsp;
大于：&gt;
小于：&lt;
版权：&copy;

对特殊符号的记忆：输入&后在输入一个字母会出现相关信息

图像标签

常见图像格式：JPG GIF PNG BMP……

<!-- 
img标签 
src:图片地址
   相对地址（推荐），绝对地址
   ../  返回上一级目录
-->
<img src="图片地址" alt="图片名字" title="鼠标悬停文字">

超链接标签

<a href="链接地址">链接信息</a>
/*功能性链接*/
<a href="mailto:邮箱">文本</a>
/*锚链接
1.需要一个锚标记
2.跳转到标记
*/
<a href="#top">回到顶部</a>
<a href="down">底部</a>

行内元素和块元素

块元素

无论内容多少，该元素独占一行
（p、h1-h6…）

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行
（a，strong，em…）

列表

什么是列表
◆列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并
以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
列表的分类
◆无序列表
◆有序列表
◆定义列表

<!--有序列表-->
<ol>
    <li>例一</li>
    <li>例二</li>
    <li>例三</li>
    <li>例四</li>
</ol>

<!--无序列表-->
<ul>
    <li>例一</li>
    <li>例二</li>
    <li>例三</li>
    <li>例四</li>
</ul>

<!--自定义列表-->
<dl>
    <dt>列表标题</dt>
    
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
</dl>

表格

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

视频和音频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频音频练习</title>
</head>
<body>
<!--
video视频标签 audio音频标签
src: 资源路径
controls:控制进度
autoplay:自动播放
-->
<video src="资源路径" controls >视频</video>
<audio src="资源路径" controls>音频1</audio>
<audio src="资源路径" controls>音频2</audio>
</body>
</html>

iframe内联框架

<iframe src="path" name="mainFrame"></iframe>

表单

基本语法

<form method="post" action="result.html">
<p>名字: <input name="name" type="text" > </p>
<p>密码:<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>

表单元素格式

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit.reset、file、hidden、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

表单初级验证

placeholder 提示信息
required  不能为空
pattern 正则表达式

登录注册页面练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h2>注册</h2>
<!--
get: 简单但是不安全，会看到上传的信息，不能传大文件
post：比较安全，可以传大文件
placeholder 提示信息
required 非空判断
pattern 正则表达式
readonly 只读标签（只读不能更改）
hidden 隐藏标签
-->
<form action="XXXX.html" method="get">
    <p>名字: <input type="text" name="username" placeholder="请输入用户名" required></p>
    <p>密码: <input type="password" name="psw" required></p>
    <p>性别：
        <input type="radio" value="boy" name="sex"> 男
        <input type="radio" value="girl" name="sex"> 女
    </p>
<!--下拉列表-->
    <p>国家
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="Ameriac">美国</option>
            <option value="England">英国</option>
        </select>
    </p>
<!--   文本域 -->
    <p>反馈：
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>
<!--文件域-->
<p>
    <input type="file" name="files" >
    <input type="button" value="上传" name="upload">
</p>
<!--    邮件-->
<p>邮件
    <input type="email" name="email" required>
</p>
<!--    URL-->
<p>URL
    <input type="url" name="url">
</p>

<!--数字-->
    <p>数量
        <input type="number" name="num" min="0" max="100" step="10">
    </p>
<!--    滑块-->
<p>音量
    <input type="range" name="voice" min="0" max="100">
</p>
<!--    搜索框-->
<p>搜索：
    <input type="search" name="search">
</p>

<!--
 input type=button  普通按钮
 input type=submit  提交按钮
 input type=images  图片按钮
 input type=reset   重置
-->
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

快捷键操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--Ctrl+/ 或 Ctrl+Shift+/ ---->注释（// 或者/*…*/ ）

Shift+F6 ---->重构-重命名

Ctrl+X ----->删除行

Ctrl+D --->复制行

Ctrl+G ---->查找行

Ctrl+Shift+Up/Down ---->代码向上/下移动。

F2 或Shift+F2 ---->高亮错误或警告快速定位

写代码，按Tab ---->生成代码

选中文本，按Ctrl+Shift+F7 ------>高亮显示所有该文本，按Esc高亮消失。

Ctrl+B ------>快速打开光标处的类或方法

Ctrl+E------>最近打开的文件

Alt+F1------>查找代码所在位置

Ctrl+Alt+L------>格式化代码

Ctrl+R------>替换文本

Ctrl+F------>查找文本

Ctrl+P------>方法参数提示

Ctrl+shift+c------>拷贝文件路径

Ctrl+alt+shift+c------>拷贝相关数据 包括路径和所在行

Ctrl+shift+v------>从历史记录中粘贴

ctrl+Y ------>删除整行

ctrl+shift+enter------>新建行

ctrl+alt+enter------>在当前行前面新建行

</body>
</html>