首页 > Web开发 > 详细

HTML祥解(初)

时间:2020-03-06 15:41:04      阅读:56      评论:0      收藏:0      [点我收藏+]

什么是HTML语言

Hyper Text Markup Language(超文本标记语言)

现在都是 Html5+css3

W3C: world wide web consortium(万维网联盟)

成立于1994,w3c标准包括结构化标准语言(HTML,XML),表现标准语言(css),行为标准(DOM,ECMAScript) www.w3.org

注释

<!-- -->

DOCTYPE :告诉浏览器,我们要使用什么规范

meta:描述网页的信息,一般用来做seo

标题标签:h1. 段落标签:p 换行标签br

水平线标签 hr 字体样式:粗体:strong 斜体:em

特殊符号: 空格:&nbsp 大于号:&gt 小于号&lt 版权符号:&copy

图像标签

<img src="" alt="" title="" width="" height="">
alt:在文件加载失败时显示的文字
title:鼠标悬停显示的文字

链接标签

<a href=""></a>       //在当前页面打开
<a href="" target="_blank"><img src="" ></a>  //嵌套图片
<a href="" target="_blank"></a>   //打开一个新的页面

锚链接也可以实现跨页面锚链接

<a name="top"></a>          用途:回到顶层,底层
<a href="#top"></a>       用法:定义一个标记,用a标签链接过去

邮件链接

<a href="mailto:"></a>

QQ推广

列表

有序列表      <ol><li></li><li></li><li></li></ol>
无序列表        <ul><li><li><li></li></li></li></ul>
自定义列表     <dl><dt><dd></dd><dd></dd></dt>
<dt><dd></dd><dd></dd></dt></dl>

表格

<table><tr><td><td><td></td></td></td></tr>
  <tr><td><td><td></td></td></td></tr>
  <tr><td><td><td></td></td></td></tr></table>   三行三列
<table border="1px"><tr><td><td><td></td></td></td></tr>
  <tr><td><td><td></td></td></td></tr>
  <tr><td><td><td></td></td></td></tr></table>     //border 加边框
<td colspan="">   跨列
<td rowspan="">   跨列

插入音频

<video src="../html/resouse/869529087.mp4" controls autoplay></video>
必须要加controls  
<audio src="" controls autoplay></audio>  //和视频一样

页面结构分析

header标题头部区域
footer 标记脚部区域
section web页面中独立区域
article 独立文章内容
aside 相关内容
nav 导航或者辅助类

iframe内联框架

<iframe src=""  frameborder="0" width="" height="" ></iframe>  直接显示
<iframe src="" name="top" frameborder="0" width="1000" height="800" ></iframe>
<a href="https://www.baidu.com/" target="top">跳转</a>   通过加name和target实现跳转

表单提交

<h1>注册</h1>
<form action="表单提交的位置" method="get">
  <p>名字:<input type="text" name="username"></p>
  <p>密码:<input type="password" name="userpsw"></p>
  <p>
  <input type="submit">
  <input type="reset"></p>
</form>

type是属性

get方式提交可以在url中看到提交的信息,高效

post方式安全,传输大文件

value:默认字符

maxlength:最大字符长度

size:设置文本框长度

文本框和单选框

<p>性别:<input type="radio" value="boy" name="sex"/>男<input type="radio" value="girl" name="sex"/>女</p>           单选框标签     要有相同的name  要赋予value

复选框

<p>爱好: <input type="checkbox" value="" name="hobby">1
      <input type="checkbox" value="" name="hobby">2
      <input type="checkbox" value="" name="hobby">3
      <input type="checkbox" value="" name="hobby">4
  </p>

按钮

<p><input type="button" value="你敢点我?"></p>    普通按钮
<p><input type="image" src=""></p>       图片按钮
?

下拉框

<p>国家:
      <select name="列表名称" id="">
          <option value="选项的值">中</option>
          <option value="选项的值">美</option>
          <option value="选项的值">英</option>
?
?
      </select>
?
  </p>

文本域

 <p><textarea name="textarea"  cols="30" rows="10"></textarea></p>

传文件

    <p><input type="file" name="file"></p>

简单验证

    <p><input type="email" name=""></p>
  <p><input type="url" name=""></p>
  <p><input type="number" name="" max="" min="" step=""></p>   step用来一次增加多少

滑块

 <p><input type="range" min="" max="" step="2"></p>

还有其他一些比如只读,隐藏,不可点的(readonly,hidden,diable)

增强鼠标可用性

<p>哈哈
      <label for="text"></label>
      <input type="text" id="text">
?
  </p>

在文本框提示验证

<p>名字:<input type="text" name="username" placeholder="请输入用户名" required></p>  //placeholder提示 required 表示不能为空
<p> 提交:<input type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></p>
//正则表达式来限定框里填什么

 

HTML祥解(初)

原文:https://www.cnblogs.com/ltdh/p/12426656.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!