HTML

最新推荐文章于 2022-11-30 01:03:00 发布

小淘神

最新推荐文章于 2022-11-30 01:03:00 发布

阅读量233

点赞数

分类专栏： java学习文章标签： html

本文链接：https://blog.csdn.net/sun_tf_sir/article/details/116789889

版权

java学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML

页面结构分析

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

网页的基本结构

<!DOCTYPE html> ：告诉浏览器我们使用什么规范
<html lang="en"> 总的标签
<head>  头部标签
        <mata charset="UTF-8"> mata 描述性的标签   描述网站的一些信息 设置格式为UTF-8 一般用来做SEO
        <meta name="keywords" content="关键词">
        <meta name="description" content="关键词的描述">
        <title>网页标题</title>网页标题   
 <body> 代表网页主体
     hellow word; 网页界面信息       
            
 </body>
</head>
</html>

网页的基本标签

标题标签

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

段落标签

<p>段落标签</p>

换行标签

<br>

水平线标签

<hr/>

字体样式标签

<string>粗体</string>
<em>斜体</em>

注释和特殊符号

<!--注释-->
&nbsp;   空格
&gt;     大于号
&lt;     小于号
&copy;   © 版权号

图像标签

常见的图像格式

JPG GIF PNG BMP ...
<img src="path" alt="text1" title="text2" width="x" height="y"/>
<!-- 
     src 图像地址
     alt 图像加载不出来的文字替代
     title 鼠标悬停提示文字
     width 图片宽度
     height 图片高度
 -->
 <img src="img/beijingnew.jpg" alt="代替文字" title="悬停文字" height="700px" width="1520px">

链接标签

<!--点击文字在当前页面跳转-->
<a href="https://www.baidu.com">点击我跳转</a>
<!--点击文字在一个新的页面打开跳转地址-->
<a href="https://www.baidu.com">点击我跳转</a>
<!--点击图片在当前页面跳转-->
<a href="https://www.baidu.com"><img src="img/gexing.jpg" alt=""></a> 
<!--点击图片跳转到一个新的页面-->
<a href="https://www.baidu.com" target="_blank"><img src="img/gexing.jpg" alt=""></a>

锚链接

<a id="top">顶部</a>
......
<!--
  1.需要一个锚标记
  2.跳转到标记
 -->
<a href="#top">跳转到顶部</a>

<a href="#top">跳转到底部</a>
......
<!--
  1.需要一个锚标记
  2.跳转到标记
 -->
<a id="down">底部</a>

功能性链接

邮件链接

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

QQ链接

<!--百度搜索 QQ推广 -->

<!--QQ好友-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="加我领取小电影" title="加我领取小电影"/></a>

<!--QQ群-->
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=AtSMtBpltMYwUxUWdYVXnxEMqeLaEoJc&jump_from=webapi"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="JAVA" title="JAVA"></a>

行内元素和块元素

块元素

无论内容多少，该元素独占一行

(p ，h1， h2， …)

行内元素

内容撑开宽度

列表

列表就是信息资源的一种展示形式

它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

列表的分类

1.无序列表

2.有序列表

3.定义列表

有序列表

<!--有序列表-->
<ol>
    <li>java</li>
    <li>前端</li>
    <li>后端</li>
    <li>python</li>
</ol>

无序列表

<!--无序列表-->
<ul>
    <li>java</li>
    <li>前端</li>
    <li>后端</li>
    <li>python</li>
</ul>

定义列表

<!--自定义列表-->
<dl>
    <dt>科目</dt>
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dd>体育</dd>

    <dt>学生</dt>
    <dd>张五</dd>
    <dd>李八</dd>
    <dd>孙七</dd>
    <dd>胡三</dd>
</dl>

表格标签

为什么使用表格：简单通用结构稳定

基本结构：单元格，行，列，跨行，跨列

<table border="3px" height="500px" width="1000px" >
    <tr>
        <!--跨列-->
        <td colspan="3">略</td>
    </tr>
    <tr>
        <!--跨行-->
        <td rowspan="2">略</td>
        <td>略</td>
        <td>略</td>
    </tr>
    <tr>
        <td>略</td>
        <td>略</td>
    </tr>
</table>

视频和音频

视频 video 音频 audio

视频

<video src="../video/1.回忆.mp4" controls  autoplay></video>
autoplay 自动播方  controls 控制条

音频

<audio src="../audio/2.音乐.mp3" controls autoplay></audio>
autoplay 自动播方  controls 控制条

Iframe 内联框架

<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>


<iframe src="https:baidu.com" frameborder="0"></iframe>

form表单

登录例子

<!--form表单-->
<!--表单请求的位置：可以是网站，也可以是一个请求处理地址-->
<!--
请求方式  get 不安全 效率高 不能传输大文件
        post  安全   传输大文件
-->

<form action="login.html" method="get">

    <p>账号：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <!--提交-->
    <input type="submit">
    <!--重置-->
    <input type="reset">

</form>

表单元素格式

属性	说明
type	指定元素的类型，text password file … 默认为text
name	指定表单元素的名称
value	元素的初始值，type为redio使必须指定一个值
size	指定表单元素的初始宽度，当type为text或password时，表单元素的大小以字符为单位，其他类型以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为redio时或checkbox时，指定按钮是否是被选中

    <p>账号：<input type="text" name="username" value="xiaotaoshen" maxlength="8"  size="30"></p>

单选框

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

多选框

    <input type="checkbox" value="sleep" name="hoppy">睡觉
    <input type="checkbox" value="eat" name="hoppy">吃饭
    <input type="checkbox" value="sing" name="hoppy">唱歌
    <input type="checkbox" value="play" name="hoppy">玩
    <input type="checkbox" value="dansing" name="hoppy">跳舞

下拉框

   <select name="列表名称" id="">
       <option value="china">中国</option>
       <option value="america">美国</option>
       <option value="swit">瑞士</option>
       <option value="england">英国</option>
   </select>

文本域

<!--文本域-->
    <p>反馈：
        <textarea name="textarea" cols="30" rows="15">文本内容</textarea>
    </p>

文件域

    <input type="file" name="files">

其他

    <!--数字-->
    <p>
        <input type="number" name="nums" max="100" min="0" step="3">
    </p>
    <!--邮箱-->
    <p>
        <input type="email" name="emil">
    </p>
    <!--url-->
    <p>
        <input type="url" name="url">
    </p>
    <!--滑块-->
    <p>
        <input type="range" name="ra" max="100" step="2" min="0">
    </p>
    <!--搜索-->
    <p>
        <input type="search" name="serch">
    </p>

表单的应用

隐藏域 hidden
只读 readonly
禁用 disable
增强鼠标可用性 label

 <!--只读-->
 名字: <input type="text" name="name" value="admin" readonly>
 <!--禁用-->
 名字: <input type="text" name="name" value="admin" disable>
 <!--隐藏-->
 名字: <input type="text" name="name" value="admin" hideen>
 <!--增强鼠标可用性-->
 <label for="mark">你点我试试</label>
 <input type="text" id="mark">

表单初级验证

为什么需要初级验证？

减轻服务器压力
保证数据的安全性

常见方式

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

	<!--提示信息-->
    <input type="text" name="zh" re="请输入用户名">
    <!--非空字段-->
    <input type="text" name="zh" required>
    <!--正则表达式验证，此处为验证是否为手机号-->
    <input type="text" name="zh" pattern="^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$">

小淘神

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTML页面结构分析元素名描述header标题头部区域的内容（用于页面或页面中的一块儿区域）footer标记脚部区域的内容（用于整个页面或页面的一块区域）sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用（常用于侧边栏）nav导航类辅助内容网页的基本结构<!DOCTYPE html> ：告诉浏览器我们使用什么规范<html lang="en"> 总的标签&lt
复制链接

扫一扫