web01

编程入门行业动态更新时间:2024-10-24 04:36:20

web01

一、标签

排版 <h1> - <h6> <hr />行线 <p> <div> span>
换行 <br />
文本格式化 <b> <strong> 粗体 <i><em>斜体 <s><del>删除 <u><ins>下划线
标签属性 <hr color="red" width="666" />
图像 <img src="wo1.jpg" alt="这是我的大头贴"/> 没有图片是显示文字。<img src="wo.jpg" title="刘德华的图像" width="300" border="10" />
链接 <a href="" target="_blank">百度</a> <a href="#">我的作品地址</a>
锚点 <a href="#movie">演艺经历</a> <h3 id="movie">演艺经历</h3>
base <base target="_blank" />
<head>

        <meta charset="utf-8">

        <base target="_self" />

    </head>
特殊标签   < > ©
注释
绝对路径 <img src="C:\Users\apple\Desktop\HTML入门及基础01\案例\wo.jpg" height="220" width="171" /> <img src=".png" />
无序列表 <ul><li>苹果</li> </ul>
有序列表 <ol><li>中国</li></ol>
自定义列表
<dl>

            <dt>北京</dt>

            <dd>昌平</dd>

            <dd>通州</dd>

            <dd>顺义</dd>

            <dd>海淀</dd>

        </dl>

表格

<table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="right"><caption>火影忍者演员表</caption><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>鸣人</td><td>男</td><td>18</td></tr><tr><td>佐助</td><td>男</td><td>19</td></tr></tbody></table>合并<table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center"><caption>火影忍者演员表</caption><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>鸣人</td><td>男</td><td rowspan="2">18</td></tr><tr><td>佐助</td><td>男</td></tr></tbody></table><table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center"><caption>火影忍者演员表</caption><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>鸣人</td><td>男</td><td>18</td></tr><tr><td>佐助</td><td colspan="2">男</td></tr></tbody></table>

input 表单控件集合

<!-- <input />   我们的input是一个单标签  br hr  img  base  input     -->用户名:  <input  type="text" value="派克钢笔" />   <!-- 这是一个文本框 --> <br />密　码:  <input  type="password" maxlength="6" /> <br />  <!-- 这是一个密码框  ctrl+ /  注释的快捷键 -->性　别:　<input  type="radio" name="sex"  /> 女 <input  type="radio" name="sex" /> 男<input  type="radio" name="sex" checked="checked"/> 人妖 <input  type="radio" name="sex1"/> 未知<br /><!-- 单选框  如果是一组，我们通过相同的name值 来实现-->爱　好:　<input type="checkbox" name="hobby" checked="checked" /> 足球 <input type="checkbox" name="hobby"/> 篮球  <input type="checkbox" name="hobby"/> 乒乓球<!-- 复选框 可以同时选择多个 --><br />搜索：  <input type="button" value="搜索啥"/>  <!-- 普通按钮 --><br /><input type="submit" value="提交表单" /><!-- 提交按钮 --><input type="reset" value="重置表单" /><!-- 重置按钮 --><br /><input type="image" src="im.jpg" /><!-- 图像按钮 --><br />上传头像: <input type="file" />  <!-- 文件按钮 -->

label

<label>  输入账号: <input type="text" /> </label> <br /><label for="two">  输入账号: <input type="text" />   <input type="text"  id="two"/></label><hr />1. 用lalbe 直接进行包裹input 就可以了2. 如果label里面有多个表单，想定位到某个  可以通过for  id 的格式来进行

文本域 <textarea>
下拉菜单

<select>

            <option>点击选择您的籍贯</option>

            <option>北京</option>

            <option>上海</option>

            <option>广州</option>

            <option selected="selected">星星</option>

       </select>

表单域

<form action="xxx.php" method="get" name="userMessage"> <!-- <input />   我们的input是一个单标签  br hr  img  base  input     -->用户名:  <input  type="text" value="派克钢笔" />   <!-- 这是一个文本框 --> <br />密　码:  <input  type="password" maxlength="6" /> <br />  <!-- 这是一个密码框  ctrl+ /  注释的快捷键 -->性　别:　<input  type="radio" name="sex"  /> 女 <input  type="radio" name="sex" /> 男<input  type="radio" name="sex" checked="checked"/> 人妖 <input  type="radio" name="sex1"/> 未知<br /><!-- 单选框  如果是一组，我们通过相同的name值 来实现-->爱　好:　<input type="checkbox" name="hobby" checked="checked" /> 足球 <input type="checkbox" name="hobby"/> 篮球  <input type="checkbox" name="hobby"/> 乒乓球<!-- 复选框 可以同时选择多个 --><br />搜索：  <input type="button" value="搜索啥"/>  <!-- 普通按钮 --><br /><input type="submit" value="提交表单" /><!-- 提交按钮 --><input type="reset" value="重置表单" /><!-- 重置按钮 --><br /><input type="image" src="im.jpg" /><!-- 图像按钮 --><br />上传头像: <input type="file" />  <!-- 文件按钮 --></form>

html 文档类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title>
</head>
<body>html 5版本
</body>
</html>

html5 新语义标签

<header> 语义 :定义页面的头部  页眉</header><nav>  语义 :定义导航栏 </nav> <footer> 语义: 定义 页面底部 页脚</footer><article> 语义:  定义文章</article><section> 语义： 定义区域</section><aside> 语义： 定义其所处内容之外的内容 侧边</aside><input type="text" value="输入明星" list="star"/> <!--  input里面用 list --><datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  <option>刘德华</option><option>刘若英</option><option>刘晓庆</option><option>郭富城</option><option>张学友</option><option>郭郭</option></datalist><br /><br /><br /><br /><fieldset><legend>用户登录</legend>用户名: <input type="text"><br /><br />密　码: <input type="password"></fieldset>

HTML5新增的INPUT type 类型

<fieldset><legend>HTML5新增的INPUT type 类型  那些表单</legend><form action="">邮箱:  <input type="email" />  <!-- aa@aa.com -->  <br />手机:  <input type="tel" />  <!-- 手机格式 数字 -->  <br />数字:  <input type="number" />  <!-- 只能 是 数字 -->  <br />url:  <input type="url" />  <!-- 网址格式的 -->  <br />搜索:  <input type="search" />  <!-- 搜索思密达 -->  <br />区域:  <input type="range" />  <!-- 区域 奥哈药 滑块  -->  <br />时间:  <input type="time" />  <!--小时 分钟  -->  <br />年月日:  <input type="date" />  <!--获得年月日 -->  <br />月份:  <input type="month" />  <!--获得年月 -->  <br />星期:  <input type="week" />  <!--获得周 -->  <br />颜色:  <input type="color" />  <!-- 颜色 -->  <br /><input type="submit" /></form></fieldset>

HTML5新增表单属性

用户名: <input type="text"  placeholder="请输入用户名" autofocus/>上传头像: <input type="file" multiple/><h4> 自动记录完成 </h4>1.autocomplete 首先需要提交按钮 <br/>2.这个表单您必须给他名字<form action="">姓名:  <input type="text" autocomplete="on" name="userName"/><input type="submit"/></form>昵称:  <input type="text" required accesskey="s" />

h5 表单案例

 <form action=""><fieldset><legend>学生档案思密达</legend><label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br /><label>手机号: <input type="tel" /></label> <br /><br /><label>邮箱: <input type="email" /></label> <br /><br /><label>所属学院:  <input type="text" placeholder="请选择学院" list="xueyuan"/><datalist id="xueyuan"><option>java学院</option><option>前端学院</option><option>php学院</option><option>设计学院</option></datalist><br /><br /><label>出生日期:   <input type="date" /></label> <br /><br /><label>成绩:  <input type="number" /></label> <br /><br /><label>毕业时间:  <input type="date" /></label> <br /><br /><input type="submit" />  <input type="reset" /></fieldset></form>

视频 <embed src='.php/sid/XMjg3MzI1MTUzNg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>



    我们的视频支持  ogg  mp4  webM 三种视频格式

    <video controls autoplay>

        <source src="mp4.mp4"/>

        <source src="movie04.ogg"/>

        您的浏览器不支持视频播放

    </video>
声音


    为了浏览器兼容，我们需要做三种声音文件 ogg mp3  wav

    <audio controls autoplay>

        <source  src="bgsound.mp3" />

        <source  src="music.ogg" />

        您的浏览器不支持播放声音

    </audio>