前端(一)-Html

2022-10-28 11:43:55 浏览数 (1)

1、网页基本信息

<!DOCTYPE html>

浏览器使用的规范

<head>

网页头

<body>

主体部分

<meta>

元数据

meta的name属性（了解）

Keyword（关键字）

为搜索引擎提供的关键字列表

Description（简介）

description用来告诉搜索引擎你的网站主要内容

author（作者）

标注网页的作者

copyright（版权）

标注版权

generator

说明网站采用什么编辑器制作。

2、网页基本标签

<h1></h1> ...<h6></h6>

标题标签，序号越小字体越大

<P></p>

段落标签

<br/>

换行标签

<hr/>

水平线

<strong></strong>

字体加粗

<em></em>

斜体

3、特殊符号

&nbsp;

空格

&gt;

大于号 >

&lt;

小于号 <

&apos;

单引号'

&quot;

双引号“

&copy;

@版权符号

&amp;

和&

4、块元素与行内元素

  • 块元素：独占一行，比如:段落标签(p),标题标签(h1~h6),自带换行;
  • 行内元素，可以在一行写多个的标签，靠内容撑开宽度;(a,strong,em...)

注意：块元素可以嵌套多个行内元素标签，但行内元素不能嵌套块元素，会改变行内元素的布局，且标签之间不可以交叉；

5、图像标签

代码语言：javascript复制
<img src="img/girl01.png" alt="动漫女孩" title="小女孩" width="200px" height="300">

scr

图片的资源路径

alt

图片显示不时显示此文字

title

标悬停图片显示文字

width

宽度

hight

高度

6、链接标签

超链接标签，a，是对标签，也是行内元素 ，可以链接到任意可以访问的资源，标签可以使用文本或者图片;

代码语言：javascript复制
<a href="https://www.baidu.com" target="_blank">百度</a> <br/>

href

资源路径

target

在页面打开资源还是新页面

target

target="_self"

本页面打开资源

target="_blank"

新页面打开资源

6.1 页面链接

代码语言：javascript复制
<a href="https://www.baidu.com"">

6.2 锚链接 (例如回到顶部功能)

本页面的锚链接跳转 (回到顶部)

代码语言：javascript复制
<!--
目标位置：<a href="#" name="目标位置的名字">
<a href="#目标位置的名字">
-->
<a href="#" name="head_a">顶部</a>
...
<a href="#head_a">回到顶部</a>

不同页面的锚链接跳转（跳转到指定页面的指定位置）

代码语言：javascript复制
<!--
目标位置：<a href="#" name="目标位置的名字">
demo10.html
-->
<a href="#" name="footer"></a>
<!--
<a href="目标页面#目标位置"></a>
demo09.html
-->
<a href="demo10.html#footer">跳转到demo10的底部</a>

6.3 功能链接

代码语言：javascript复制
<a href="mailto:2663092414@qq.com">功能链接 联系我们</a>

6.4 内联框架

iframe 单页面内联

代码语言：javascript复制
<!--
src：引用页面地址
name：框架标识名
-->
<iframe src="path" name="mainFrame" ></iframe>

iframe属性（实现页面间的相互跳转）

代码语言：javascript复制
<!-- 
在被打开的框架上加name属性
-->
<iframe name="mainFrame"></iframe>
在超链接上设置target目标窗口属性为希望显示的框架窗口名
<a href="https://www.baidu.com/" target="mainFrame">加载</a>

7、列表

7.1 无序列表

代码语言：javascript复制
<h2>无序列表</h2>
<ul>
    <li>行宫</li>
    <li>登黄鹤楼</li>
    <li>相思</li>
    <li>静夜诗</li>
</ul>
  • 行宫
  • 登黄鹤楼
  • 相思
  • 静夜诗

7.2 有序列表

代码语言：javascript复制
<h2>有序列表</h2>
<ol>
    <li>行宫</li>
    <li>登黄鹤楼</li>
    <li>相思</li>
    <li>静夜诗</li>
</ol>
  1. 行宫
  2. 登黄鹤楼
  3. 相思
  4. 静夜诗

7.3 自定义列表

代码语言：javascript复制
<h2>自定义列表</h2>
<dl>
    <dt>王维</dt>
        <dd>相思</dd>
        <dd>杂诗</dd>
    <dt>李白</dt>
   	 	<dd>静夜诗</dd>
</dl>

王维相思杂诗李白静夜诗

8、表格

8.1 基本标签

<table> </table>

表标签

<tr> </tr>

行标签

<th></th>

表头标签

<td></td>

列标签

8.2 表格一些属性

align="center"

居中

border="1px"

边框粗细

cellspacing="0"

表格间隙

width="90%"

长度

8.3 跨行跨列

rowspan="x"

跨行

clospan="x"

跨列

案例

代码语言：javascript复制
<!--
CSS中等价于cellspacing="0" 的属性
border-collapse: collapse;
border-spacing:0;
-->
<table border="1px" align="center" width="90%" cellspacing="0">
    <tr align="center">
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>
        <th>操作</th>
    </tr>
    <tr align="center">
        <td>001</td>
        <td>张三</td>
        <td>18</td>
        <td rowspan="2">KH96</td>
        <td><a href="#">修改</a>&nbsp;<a href="#">删除</a></td>
    </tr>
    <tr align="center">
        <td>002</td>
        <td>李四</td>
        <td>20</td>
        <!-- <td>KH96</td> -->
        <td><a href="#">修改</a>&nbsp;<a href="#">删除</a></td>
    </tr>
    <tr align="center">
        <td colspan="5">
            <a href="#">首页</a>
            <a href="#">上一页</a>
            <a href="#">下一个</a>
            <a href="#">尾页</a>
        </td>
    </tr>
</table>

学号

姓名

年龄

班级

操作

001

张三

18

KH96

修改 |  删除

002

李四

20

修改 | 删除

首页 上一页 下一个 尾页

9、媒体元素

9.1 音频

代码语言：javascript复制
<!-- 
src：指定要播放的视频文件的路径
controls：提供播放、暂停和音量的控件
autoplay：自动播放属性
loop：视频的循环播放
-->
<video src="视频路径" controls autoplay></video>

9.2 视频

代码语言：javascript复制
<!--
src：指定要播放的音频文件的路径
trols：提供播放、暂停和音量的控件
-->
<audio src="音频路径" controls autoplay></video>

10、表单

10.1 method

规定如何发送表单数据常用值：get post 在实际网页开发中通常采用post方式提交表单数据;

get

不安全，在搜索栏提交，有大小限制

post

安全，在请求体中提交，没有大小限制

10.2 action

表示向何处发送表单数据;

10.3 表单元素

10.3.1 text 文本框
代码语言：javascript复制
<!--type="text"
name：文本框名称(必填)
value：文本框初始值
size：文本框长度
maxlength：文本框可输入最多字符
-->
<input type="text" name="userName" value="用户名" size="30" maxlength="20"/>
10.3.2 password 密码框

向密码框中输入字符时，显示的效果，密码字符以黑色实心的圆点来显示。

代码语言：javascript复制
<!--type="password"
name：密码框名称(必填)
size：密码框长度
-->
<input type="password" name="pass" size="20"/>
10.3.3 单选按钮

同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥；

代码语言：javascript复制
<!--
type="radio"
name：单选框名称(必填)，一组的名称需要相同
checked：单选按钮选中状态
value：单选框的值
-->
<input name="gen" type="radio" value="男" id="nan"/><label for="nan">男</label>
<input name="gen" type="radio" value="女" id="nv"/><label for="nv">女</label>
<!-- label点击文字的时候也可以选中 -->
10.3.4 checkbox复选框

同一组复选框，根据需要可设置name属性值相同；

代码语言：javascript复制
<!--
type="checkbox"
name：复选框名称(必填)，一组的名称需要相同
checked：复选按钮选中状态
value：复选框的值
-->
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
10.3.5 select下拉列表

希望在页面加载时有默认选中的选中项，则必须使用selected属性，如果没有默认选中项则第一个选项 默认被选中；

代码语言：javascript复制
<!--select:下拉列表框-->
<!--option：选项-->
<select name="列表名称" size="行数">
	<option value="选项的值" selected="selected">…</option >
	<option value="选项的值">…</option >
</select>
10.3.6 按钮
代码语言：javascript复制
<!--重置按钮-->
<input type="reset" name="butReset" value="reset按钮">
<!--提交按钮-->
<input type="submit" name="butSubmit" value="submit按钮">
<!--普通按钮-->
<input type="button" name="butButton" value="button按钮"/>
<!--图片按钮-->
<input type="image" src="images/login.gif" />
10.3.7 textarea多行文本框
代码语言：javascript复制
<!--
textarea：多行文本域
cols：显示的列数
rows：显示的行数
-->
<textarea name="showText" cols="x" rows="y">文本内容 </textarea>
10.3.8 file文件域

在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据 分为多部分提交。

代码语言：javascript复制
<!--- enctype：表单编码属性 -->
<form action="" method="post" enctype="multipart/form-data">
<p>
<!--type="file" 文件域-->
<input type="file" name="files" />
<input type="submit" name="upload" value="上传" />
</p>
</form>
10.3.9 email邮箱

会自动验证Email地址格式是否正确;

代码语言：javascript复制
邮箱:<input type="email" name="email"/>
10.3.10 url网址

会自动验证URL地址格式是否正确；

代码语言：javascript复制
请输入你的网址:<input type="url" name="userUrl"/>
10.3.11 number数字
代码语言：javascript复制
min：最小值
max：最大值
step：步长
value:默认值
请输入数字:<input type="number" name="num" value="18" min="0" max="100" step="10"/>
10.3.12 range滑块

type值为range即为滑块。

代码语言：javascript复制
请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/>
10.3.13 search搜索框

type值为search即为搜索框。

代码语言：javascript复制
请输入搜索的关键词:<input type="search" name="sousuo"/>
10.3.14 color颜色
代码语言：javascript复制
喜欢的颜色：<input type="color" name="userColor">
10.3.15 日期时间
10.3.15.1 dd/MM/yyy
代码语言：javascript复制
<input type="date" />
10.3.15.2 yyyy年第xx周
代码语言：javascript复制
<input type="week" />
10.3.15.3 yyyy年MM月
代码语言：javascript复制
<input type="month" />
10.3.15.4 mm:ss
代码语言：javascript复制
<input type="time" />
10.3.15.5 dd/MM/yyyy HH:mm:ss
代码语言：javascript复制
<input type="datetime-local" />

10.4 表单的高级应用

10.4.1 hidden隐藏域

在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器

代码语言：javascript复制
<input type="hidden" value="666" name="userid">
10.4.2 只读、禁用
代码语言：javascript复制
<!--
讲解只读和禁用的语法，强调不能单写readonly或disabled，必须写readonly
＝”readonly”和disabled=“disabled”，介绍只读和禁用的使用场合
-->
<input name="name" type="text" value="张三" readonly>
<input type="submit" disabled value="保存" >
10.4.3 表单元素的标注,增强鼠标的可用性

增强鼠标的可用性，自动将焦点转移到与该标注相关的表单元素上

代码语言：javascript复制
<!--它的for属性对应的id与表单元素id一致-->
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>

10.5 表单初级验证的方法

10.5.1 placeholder

提示语默认显示，当文本框中输入内容时提示语消失;

代码语言：javascript复制
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
10.5.2 required

规定文本框填写内容不能为空，否则不允许用户提交表单;

代码语言：javascript复制
<input type="text" name="username" required/>
10.5.3 pattern

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单;

代码语言：javascript复制
<input type="text" name="tel" required pattern="^1[358]d{9}" />

11、页面结构元素

11.1结构标签

header

页面或页面中某一区块的页眉，通常是一些引导和导航信息

nav

可以作为页面导航的连接组

section

页面中的一个内容区块，通常由内容及其标题组成

article

代表一个独立的，完整的相关内容块，可独立于页面其他内容使用

aside

非正文的内容，与页面的主要内容是分开的，被删除而不会影响到页面的内容

footer

页面或页面中某一个区块的脚注

11.2举例

代码语言：javascript复制
<!DOCTYPE html>
<html>
	<head>
        </head>
	<body>
		<h2 align="center">网页布局-使用h5新标签</h2>
		<!-- div就是一个盒子，主要用于页面布局，是块元素 -->
		<div class="box">
			<header class="header">头部header</header>
			<main class="main">
				<nav class="nav">导航nav</nav>
				<section class="content">
					<aside class="aside">侧边栏aside</aside>
					<article class="article">正文article</article>
				</section>
			</main>
			<footer class="footer">尾部footer</footer>
		</div>
	</body>
</html>

运行结果

post range target width 表单

0 人点赞