HTML 5

网页的基本信息

新建一个HTML：

​ HTML中的注释符号：

	<!-- DOCTYPE:告诉浏览器，我们需要使用什么规范 -->
    <!DOCTYPE html>
    <html lang="en">
        
	<!-- head标签代表网页头部 -->        
    <head>
        <!-- meta描述性标签，他用来描述我们网页的一些信息 -->
        <meta charset="UTF-8">
        <!-- txtle网页标签 -->
        <title>Title</title>
    </head>
        
    <!-- body标签代表网页主题 -->   
    <body>

    </body>
    </html>

网页基本标签

标题标签

使用<h1>标签定义的标题字体最大，而使用<h6>标签定义的标题字体最小：

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>

段落标签

<p>一尺深红胜曲尘，天生旧物不如新。</p>

<p>合欢桃核终堪恨，里许元来别有人。</p>

<p>井底点灯深烛伊，共郎长行莫围棋。</p>

<p>玲珑骰子安红豆，入骨相思知不知。</p>

换行标签

换行标签会比较紧凑

一尺深红胜曲尘，天生旧物不如新。<br/>

合欢桃核终堪恨，里许元来别有人。<br/>

井底点灯深烛伊，共郎长行莫围棋。<br/>

玲珑骰子安红豆，入骨相思知不知。<br/>

水平线标签

<hr/>

字体样式标签

<!-- 粗体，斜体 -->
<strong>粗体</strong>
<me>斜体</me>

特殊符号

HTML中只有一个空格符号，需要多个空格在需要的地方添加&nbsp
符号有很多输入 & 再随意输入一个字母可以找自己需要的符号，或者查百度

图像标签

<!-- 
	使用img标签
	src:图片的路径
	alt:图片名字，如果图片没有加载出来，就会显示alt的值
	可以在里面添加参数，悬停文字:title=""
				   	 图片的宽:width=""
					 图片的高:height=""
-->
<img src="输入图片路径" alt="图片" >

链接标签

页面间链接

<!-- 
	 使用a标签
	 href:必填，输入需要跳转的页面网址
-->
<a href="hppts://www.baidu.com" >点击跳转到百度</a>

<!-- 可以内嵌一个图像标签 -->
<a href="hppts://www.baidu.com" >
    <img src="输入图片路径" alt="图片" >
</a>

锚链接

<!-- 使用a标签 name属性标记 -->
<a name="sign"></a>

<!-- 在a标签 href属性中使用 # 号加标记的名字-->
<a href="#sign">点击跳转到标记点</a>

功能性链接

<!-- 邮件链接：mailto: -->
<a href="mailto:123456@qq.com">邮件</a>

列表

<!-- 有序列表 -->
<ol>
    <li>Java</li>
    <li>c++</li>
    <li>Python</li>
</ol>

<!-- 无序列表 -->
<ul>
    <li>Java</li>
    <li>c++</li>
    <li>Python</li>
</ul>

<!-- 自定义列表:
	dl:标签
	dt:列表名称
	dd:列表内容
-->
<dl>
	<dt>学科</dt>
    <dd>Java</dd>
    <dd>c++</dd>
    <dd>Python</dd>
</dl>

表格标签

<!-- 
表格标签：table
行：tr
列：td
表格添加边框：border="宽度"
-->
<table border="1px">
    <tr>
    	<td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
    	<td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>

</table>

<!-- 
单元格跨列：colspan="列数"
-->
<table border="1px">
    <tr>
    	<td colspan="4">1-1</td>
    </tr>
    <tr>
    	<td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
</table>

<!-- 
单元格跨行：rowspan="行数"
-->
<table border="1px">
    <tr>
    	<td rowspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
</table>

媒体元素

视频

<!-- 
使用video标签
src:视频路径
controls:控制条
可以在里面添加参数，自动播放:autoplay
-->
<video src="输入视频路径" controls></video>

音频

<!-- 
使用audio标签
src:视频路径
controls:控制条
可以在里面添加参数，自动播放:autoplay
-->
<audio sec="输入音频路径" controls></audio>

页面结构分析

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

ifrme内联框架

<!-- 
使用ifrme标签
src:网页地址
width:宽度
height:高度
-->
<ifrme sec="输入网页地址" width="" height=""></ifrme>

表单

在 HTML 中创建表单需要用到<form>标签，具体语法如下所示：

<!-- 
使用form标签
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:输入post或者get提交方式
	   post:比较安全，可以传输大文件。
	   get:可以在URL中看到我们提交的信息，不安全，但是高效。
-->
<form action="输入网页地址" method="post">

</form>

表单元素：

元素/标签 描述
input 定义输入框
textarea 定义文本域（一个可以输入多行文本的控件）
label 为表单中的各个控件定义标题
fieldset 定义一组相关的表单元素，并使用边框包裹起来
legend 定义 fieldset 元素的标题
select 定义下拉列表
optgroup 定义选项组
option 定义下拉列表中的选项
button 定义一个可以点击的按钮
datalist 指定一个预先定义的输入控件选项列表
keygen 定义表单的密钥对生成器字段
output 定义一个计算结果

代码：

<form action="输入网页地址" method="post">
    <!-- 文本框 text -->
    <p>名字:<input type="text" name="username"> </p>
    
    <!-- 密码框 password -->
    <p>密码:<input type="password" name="pwd"> </p>
    
	<!-- 单选框 radio -->
    <p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="gitl" name="sex"/>女
    </p>
    
    <!-- 多选框 -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hpbby">敲代码
        <input type="checkbox" value="chat" name="hpbby" >聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!-- 列表框 -->
    <p>国家:
        <select name="列表名称" >
            <option value="zg">中国</option>
            <option value="mg">美国</option>
            <option value="yg">英国</option>
            <option value="eg">俄国</option>
        </select>
    </p>
	
    <!-- 文本域 cols:列数 rows:行数 --> 
    <p>
        <textarea name="textarea"  cols="50" rows="20"></textarea>
    </p>
    
    <!-- 文件域 -->
    <p>
        <input type="file" name="files">
    </p>
    
    <!-- 邮箱 会自动验证Email地址格式是否正确 -->
    <p>邮箱:
        <input type="email" name="email">
    </p>
    
    <!-- 网址 -->
    <p>URL:
        <input type="url" name="url">
    </p>
    
    <!-- 数字 max:设置最大值 min:设置最小值 -->
    <p>数字:
        <input type="number" name="number" max="10" min="0">
    </p>
    
    <!-- 滑块 max:设置最大值 min:设置最小值-->
    <p>滑块:
        <input type="range" name="veieo" min="0" max="100">
    </p>

	<!-- 按钮 submit:提交按钮 reset:重置按钮 button:普通按钮 -->
    <p>
        <input type="submit">
        <input type="reset">
        <input type="button" value="按钮" name="btn1">
    </p>
</form>

表单初级验证

  • placeholder：给输入框一个提示信息

  • required：非空判断，如果为空不允许用户提交表单

  • pattern：正则表达式，用户必须输入符合的正则表达式，否则不能提交表单

    ​ （正则表达式很多，可以去百度查找常用正则表达式）

    <p>名字:<input type="text" name="username" placeholder="请输入用户名" required> </p>
  • readonly：只读
  • disabled：禁用
<p>名字:<input type="text" name="username" readonly </p>
<p>名字:<input type="text" name="username" disabled </p>
posted @ 2022-05-27 21:54  Bamboo~  阅读(84)  评论(0)    收藏  举报