HTML5

正在上传…重新上传取消

知识总结

ctrl + / 表示注释行快捷键,table 快速生成整体标签

body 网页主体

head 网页搜索标题

meta 描述详标签

h1,h2,h3.....标题标签

p 段落标签

strong 粗体

em 斜体

br/ 换行符 自闭合标签

ar/ 分割线 自闭和标签

img 图像标签 src 路径 ../ 表示去上级目录

锚链接 name = " 名字" #名字 点击#名字处的超链接可以直接跳转到 声名处

target = “blank ” 跳转到另一个页面 。"self" 在本页面刷新

title 悬停到页面时显示的提示

<!DOCTYPE html>
<html lang="en">
<head>
​
<!--meta 描述性标签,在网页源代码中显示进行描述-->
    <meta charset="UTF-8">
<!--网页链接标题-->
    <title>Title</title>
</head>
<!--网页主体body-->
<body>
<!--创建锚节点name = down-->
<a name="down">down</a>
<!--标题标签-->
<h1>你好</h1>
<h2>你好</h2>....
<!--分隔线-->
<hr/>
<!--段落标签-->
<p>段落标签</p>
<p>段落标签1</p>
​
<hr/>
    
<!--特殊符号-->
空&nbsp;格
& +字母+;显示特殊符号
​
<hr/>
​
粗体:<strong>你好</strong>
斜体:<em>你好</em>
自闭和标签,换行标签 <br/>
    
<hr/>
​
<!--img 图片标签 ,src 图片表示路径
    ../ 表示上级目录  alt = 表示显示错误时返回的东西,两者必填,还有一些其他属性-->
​
<img src="../resource/pan.png.jpg" alt="潘胜志图像" width="390" height="567" title="悬停文字" >
    
<hr/>
    
<!--创建锚节点name = down-->
<a name="top">top</a>
    
<!--a,连接标签,href 链接路径,必填,填html文件名或者网址链接-->
    
<a href="HTMLtest.html">点击我跳转到HTML页面</a>
<a href="https://www.baidu.com">点击我跳转到百度页面</a>
    
<br/>
    
<!--图像也可以作为超链接-->
    
<a href="第一个网页.html" target="_blank">
    <img src="../resource/pan.png.jpg" alt="潘胜志图像" width="390" height="567" title="悬停文字" ></a>
​
<p>
    <a href="第一个网页.html">
        <img src="../resource/pan.png.jpg" alt="潘胜志图像" width="390" height="567" title="悬停文字" ></a>
</p>
​
<p>
    <a href="HTMLtest.html"><img src="../resource/pan.png.jpg" alt="潘胜志图像" width="390" height="567" title="悬停文字" ></a>
</p>
​
<p>
    <a href="HTMLtest.html"><img src="../resource/pan.png.jpg" alt="潘胜志图像" width="390" height="567" title="悬停文字" ></a>
</p>
​
<p>
    <a href="HTMLtest.html"><img src="../resource/pan.png.jpg" alt="潘胜志图像" width="390" height="567" title="悬停文字" ></a>
</p>
​
<p>
    <a href="HTMLtest.html"><img src="../resource/pan.png.jpg" alt="潘胜志图像" width="390" height="567" title="悬停文字" ></a>
</p>
​
<p>
    <a href="HTMLtest.html"><img src="../resource/pan.png.jpg" alt="潘胜志图像" width="390" height="567" title="悬停文字" ></a>
</p>
​
<hr/>
    
<!--返回锚点,在什么位置就返回什么位置-->
<a href="#down">down</a>
<a href="#top">点击回到顶部</a>
    
<br/>
​
</body>
</html>

邮箱链接

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

行内标签: 使用多个标签,依然显示在一行的标签,如<strong>,<em>符号标签等

快元素:以段落显示的,使用标签都会换行的<hr>,<h1>,<p>,<a>,<img>等标签

<ol>
    <li>a有序1</li>
    <li>b有序2</li>
    <li>c有序3</li>
    <li>d有序4</li>
</ol>
​
<hr/>
​
<ul>
    <li>a序1</li>
    <li>b序2</li>
    <li>c序3</li>
    <li>d序4</li>
</ul>
​
<dl>
    <dt>科目</dt>
    <dd>Java</dd>
    <dd>python</dd>
    <dd>c/c++</dd>
</dl>

有序列表:<ol>

无序列表:<ul>

自定义列表:<dl>------<dt>字段</dt> <dd>属性

<video src="../resource/video/你的名字.mp4" controls autoplay></video>
​
<audio src="../resource/audio/Jam%20-%20七月上.mp3" controls autoplay></audio>

音频标签,影频标签 controls 控制播放器

页面结构分析:

<iframe src="" name="kuang" frameborder="0" width="2000px" height="1000px"></iframe>
<a href="https://blog.csdn.net/weixin_62414347" target="kuang">点击</a>

iframe 标签,框架标识名target=“name ” 表示跳转到名叫name 的框架里去

<form action="内联框架iframe.html" method="post">
    <p>用户名:<input type="text" name="username"></p>
    <p>密码:  <input type="password" name="pwd"></p>
​
    <p>性别
        <input type="radio" value="boy" name="sex">
        <input type="radio" value="gril" name="sex">
    </p>
​
    <p>
        提交:  <input type="submit">
    </p>
​
</form>

表单标签 form 登录显示的框最常用 action 为提交后到达到达的页面资源 ,method 提交方式,post安全性大于get 并且post可提交文件更大

常用的属性 type 表示按钮类型

  • radio 单选框,value 是给表单按钮赋值,name 标记是否为一组,若为一组则可单选

  • maxline 文本框中输入字符长度最长度

  • size 表单元素的初始长度

所有表单元素都需要name 元素,一边提交表单内容

<!--下拉框-->
    <p>国家:
        <select name="列表名称" id="">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
        </select>
    </p>
<!-- 文本域-->
    <p>反馈
        <textarea name="textarea" cols="30" rows="20">文本内容</textarea>
    </p>
<!-- 文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <p>滑块:
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

下拉框标签 select 下拉内容option

textarea 文本域标签

基本都是依据type来

正在上传…重新上传取消`

hidden 隐藏
readonly 锁定
disabled 锁定
​

表单初级验证,轻服务器的压力,简单提供信息 。placeholder 提示信息,输入框中的。required 不能为空提示

pattern 要求为正则表达式......提高安全性

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值