java-html

HTML

  • 超文本标记语言（超文本包括文字，图片，视频，动画）
  • W3C标准：结构化标准语言（HTML,XML）；表现标准语言（CSS）；行为标准（DOM，ECMAScript)

1 元素说明

  1. DICTYPE:告诉浏览器使用什么规范
  2. <html lang="en"></html>总标签
  3. <head></head>网页头部标签    注释快捷键ctrl+/
  4. <body></body>网页主题
  5. <title></title>网页标题
  6. <meta>自闭和，描述性标签，用于描述网站的描述信息

2 网页标签

  1. 标题标签
  2. 段落标签
  3. 换行标签
  4. 水平线标签
  5. 字体样式标签
  6. 注释和特殊符号

3 图像标签

<img src="../resources/image/qing.jpg"alt="头像" title="悬停文字" width="900" height="100">

4 链接标签

<a href="mailto:zw719228639@163.com">点击联系我</a>Y邮件链接


<a name="top">顶部</a>
<a href="MyHtml.html#top">回到顶部</a> 锚链接

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3224220067
&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:3224220067:51" alt
="点击叫我" title="点击叫我"/></a>QQ链接

 

5 列表元素

信息资源的一种展现形式，可以使信息结构化和条理化，并以列表的形式展现出来，以便浏览者能够更快捷地获得相应信息。

分类：

  1. 无序列表
  2. 有序列表
  3. 定义列表

 

6 表格标签

简单通用，直观清晰，结构稳定

基本结构：

  • 单元格
  • 行列
  • 跨行跨列

7 音视频标签

<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/audio/1.mp3" controls autoplay></audio>

8 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="" name="hello" frameborder="0" width="900" height="900"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>




9 表单




<!--表单提交
action 表单提交的位置 可以是网站也可以是请求处理地址
method：post get 提交方式
value="张伟" maxlength="8" size="30"默认值，长度，框的尺寸
-->
<form action="列表.html" method="post">
     <!--文本输入框-->
    <p>名字: <input type="text" name="username" value="张伟" maxlength="8" size="30"></p>
     <!--radio标签 单选框
     value 单选框的值
     name: 设置组，可以保证单选规则
     -->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男孩
        <input type="radio" value="girl" name="sex"/>女孩
    </p>
    <!--密码框-->
    <p>密码: <input type="password" name="pwd"></p>
    <p>
        <input type="submit" name="提交">
        <input type="reset" name="重置">
    </p>

    多选按钮


    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="coding" name="hobby"/>敲代码
    <input type="checkbox" value="chat" name="hobby"/>游戏




 <!--按钮--> 
 <p>按钮：
    <input type="button" name="button1" value="点击变长">
    <input type="image" src="../resources/image/qing.jpg" value="submmit" name="mi"></input>
</p>


<!--下拉框-->
    <p>下拉框：
        <select name="列表名称">
            <option value="china">中国</option>、
            <option value="america">美国</option>
            <option value="ruishi" selected>瑞士</option>
            <option value="hanguo">韩国</option>
        </select>
    </p>



<!--文本域-->
<p>反馈：
    <textarea name="textarea" cols="10" rows="1"> 文本内容</textarea>
</p>
<!--上传文件-->
<input type="file" name="files"/>
<input type="button" value="上传" name="upload">
 <!--邮箱验证-->
<p>邮箱：
    <input type="email" name="email">
</p>

<!--url验证-->
<p>url：
    <input type="url" name="url">
</p>
<!--数字验证-->
<p>age：
    <input type="number" name="age" max="100" min="10" step="1">
</p>

<!--滑块验证-->
<p>滑块：
    <input type="range" name="voice" min="0" max="100">
</p>
<!--搜索框-->
<p>search：
    <input type="search" name="search">
</p>


</form>




 


 


10 只读，隐藏，禁用


disabled  readonly hidden


增强鼠标可用性




<!--增强鼠标可用性-->
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>




11 表单简单验证


常用方式


Placeholder




 <p>名字: <input type="text" name="username" placeholder="请输入用户名"></p>




required




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




pattern正则表达式


　　




      <!--自定义邮箱-->
    <p>自定义邮箱：
        <input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.
\w+([-.]\w+)*$"/>
    </p>




 






		

		
posted @ 
2021-02-06 15:51 
David-zhang 
阅读(66) 
评论(0) 
 
收藏 
举报