web前端html

it2022-05-09  208

h:用户logo

p标签用于断行

hr水平线标签

br换行标签

strong字体加粗

i,em字体倾斜

 

del删除字体,中间有横杠

u字体下加下划线

img:图像标签

1、src图片路径 2、alt替换文本 3、title鼠标悬停时显示文字

a标签:

<a href="http://www.sina.com">新浪</a> target="_blank" 打开一个新的页面

锚点定位:

目录书写: <a href="#live">2 演艺生涯</a> <h3 id="live"> 演艺生涯</h3>

base 可以让所以连接用新的网页打开。

<head> <meta charset="UTF-8"> <title>传智播客</title> <base target="_blank"> </head> <body> <a href="http://www.baidu.com" >百度</a> <img height="200" src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super" alt="传智播客"> </body>

ul无序列表

<ul> <li>苹果</li> <li>香蕉</li> <li>橘子</li> <li>芒果</li> </ul>

ol有序列表

<ol> <li>苹果</li> <li>香蕉</li> <li>橘子</li> <li>芒果</li> </ol>

 

特殊字符:

 

  table:单元格 tr :一行 td:行里面的内容 cellpadding :内容距离边框的距离 th:标签表头 colspan:合并列 rowspan:合并行 <body> <table width="200" border="1" cellpadding="0" align="center"> <thead> <tr> <th colspan="3">班级名单</th> </tr> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> </thead> <tbody> <tr> <td>小孟</td> <td>22</td> <td rowspan="2">三年级二班</td> </tr> <tr> <td>小李</td> <td>21</td> </tr> </tbody> </table> </body>

 

 

表单标签:

<fieldset> <legend>html5新增input type 类型 那些表单</legend> <form action="xxx.php" > 邮箱:<input type="email"><br> 提交:<input type="submit"> </form> </fieldset> <body> <fieldset> <legend>新增表单属性</legend> 用户名:<input type="text" autofocus="autofocus" placeholder="请输入用户名" ><br> 文件: <input type="file" multiple="multiple"> <h4>自动记录</h4> <form action=""> 姓名:<input type="text" autocomplete name="user" ><br> 提交: <input type="submit"> </form> </fieldset> </body>

 

<body> 用户名:<input type="text"><br> 密 码:<input type="password"><br> 性别:<input type="radio" name="sex" checked="checked"><input type="radio" name="sex"><br> 爱好:<input type="checkbox" name="box"> 足球 <input type="checkbox" name="box"> 篮球 <input type="checkbox" name="box"> 兵乓球 <br> 搜索:<input type="submit" value="搜索" > 图片按钮: <input type="image" src="">     <label > 输入账户:<input type="text"></label> </body>

 

textarea:文本域

<textarea name="" id="" cols="30" rows="10">请输入留言板</textarea>

 

下拉菜单:

selected="selected":默认选项 <body> 籍贯: <select > <option >北京</option> <option >上海</option> <option selected="selected">山东</option> </select> <select > <option >通州</option> <option >大兴</option> <option >海淀</option> </select> </body>

表单域:

<head> <meta charset="UTF-8"> <title>Title</title> <base target="_blank"> </head> <body> <!--action将数据提交到某个地方--> <form action="xxx.php" name="userMessage"> 用户名:<input type="text" value="用户名"><br> 密 码:<input type="password"><br> 性别:<input type="radio" name="sex" checked="checked"><input type="radio" name="sex"><br> 爱好:<input type="checkbox" name="box"> 足球 <input type="checkbox" name="box"> 篮球 <input type="checkbox" name="box"> 兵乓球 <br> 提交:<input type="submit" value="提交" > 图片按钮: <input type="image" src=""> </form> </body>

 

<header>定义文字的头部</header> <nav>定义导航栏</nav> <fotter>定义页面底部</fotter> <article>定义文章</article> <section>定义区域</section> <aside>定义侧边</aside>

datalist:

<input type="text" value="搜索" list="star"> <!--input里面用list--> <!--datalist里面用id来实现和input连接--> <datalist id="star"> <option value="">刘德华</option> <option value="">刘校庆</option> <option value="">刘一味</option> <option value="">刘刘</option> <option value="">郭富城</option> </datalist>

fieldst

<fieldset> <legend>用户登录</legend> 用户名: <input type="text"><br> 密码: <input type="password" maxlength="6"> </fieldset>

 

综合练习:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合案例</title> </head> <body> <form action="xxx.php"> <fieldset> <legend>学生档案</legend> <label>姓名:<input type="text" placeholder="请输入学生名字" required></label><br> <label> 手机号:<input type="tel" placeholder="选择性填写"></label><br> <label> 邮箱: <input type="email"></label><br> <label> 所属学院:<input type="text" placeholder="请选择学院" list="star"> <datalist id="star"> <option >前端学院</option> <option >PHP学院</option> <option >JAVA学院</option> <option >设计学院</option> </datalist> <label> 出生日期:<input type="date"></label><br> <label> 成绩:<input type="number"></label><br> <label> 毕业时间:<input type="date"></label><br> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"> </fieldset> </form> </body> </html>

 多媒体标签:

autoplay:默认有声音

controls:添加播放进度条

<body> <!--<embed src='http://player.youku.com/player.php/sid/XNDEwNTMzMzM2OA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>--> <!--<audio src="刘德华 - 爱你一万年(国).mp3" autoplay controls loop="loop"></audio>--> <video src="熊出没之探险日记2 第07话 标清(270P).mp4" autoplay controls></video> <video controls autoplay> <source src="熊出没之探险日记2 第07话 标清(270P).mp4"> <source src="熊出没.ogg"> </video> </body>

 

转载于:https://www.cnblogs.com/daisl/p/10693268.html


最新回复(0)