博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

前端之 HTML

Posted on 2024-01-07 22:26  乱了啦  阅读(2)  评论(0编辑  收藏  举报

HTML常用标签

<!--下脚标-->
<sub>sub</sub>
<!--上脚标-->
<sup>sup</sup>
<!--段落-->
<p>pp</p>
<!--强调建议用第一种-->
<strong>3333</strong>

<b>bb</b>
<!--斜体建议用第一种-->
<em>111</em>

<i></i>
<!--target="_blank" 新建窗口-->
<a href="http://www.baidu,com" target="_blank">111</a>
<!--跳锚点-->
<ul>
  <li><a href="#a1">1111111</a></li>
  <li><a href="#a2">22222222</a></li>
</ul>

<!--
标签的种类:
  1.行内元素的标签,不能独占一行,不能设置宽高
  2.块状元素标签,独占一行,可以设置宽高
  行内块装标签:不能独占一行,能设置宽高
  列:button input
  div属如无语义标签,用来布局桌面,划分页面结构
-->
<!--行内元素-->
<span style="background: antiquewhite">dsaffads
  <span style="background: palevioletred">fdsafdas</span>
</span>
<!--块状元素-->
<div id="a1" style="background: palevioletred;width: 70%;height: 900px">我是网页头部</div>
<div id="a2" style="background: royalblue;width: 70%;height: 900px">我是网页身体</div>
<div style="background: olivedrab;width: 70%;height: 200px">我是网页脚部</div>
<!--块状元素 按钮-->
<button >qq</button>
<!--无序列表-->
<ul type="square">
  <li>aa</li>
  <li>bb</li>
</ul>
<!--title 给图片加提示-->
<img src="../作业/1.jpg" title="美女">
<!--table 表格 tr行 th表示标题加粗 td表示一个单元格-->
横向合并 colspen=数值 纵向合并rowspan
align=居左右中
垂直方向:valign=方向
单元格之间的间距cellpadding cellspacing
cellpadding="0" cellspacing="0" 去掉表格边框线
<table cellspacing>
  <thead>头</thead>
  <tbody>体</tbody>
  <tfoot>脚</tfoot>
</table>
<iframe src="" name="aa" width="1000" height="1000"></iframe>
<a href="../作业/1.jpg" target="aa"></a>
<!--用来放视频的标签-->
<video src="../作业/1.jpg"></video>
<!--用来放音频的标签-->
<audio src=""></audio>
<!--表单-->
<!--action 表示提交数据地址-->
<!--mathod 表述数据以什么样的形式提交-->
<!--get 显示获取数据(参数在地址栏上)-->
<!--post 隐式提交数据(参数不在地址栏,参数大小没有限制)-->

<!--input 是块状元素  type指定input的类型 name指定input的名字  value指定input的默认值-->
<form >
<!--    radio 单选框-->
    <input type="radio" name="sex" value="m" id="1"><label for="1">男</label>
    <input type="radio" name="sex" value="w" id="2"><label for="2">女</label>
<!--    复选框--><br> checked默认
    <input type="checkbox" name="food" value="banana" checked>香蕉<br>
    <input type="checkbox" name="food" value="huanggua">黄瓜<br>
    <input type="checkbox" name="food" value="qiezi">茄子<br>
    <section name="city">
<!--        selected 默认 disabled 无法选中--><!--    下拉框-->
        <option value="beijing" selected>北京</option>
        <option value="guangxi" disabled>广西</option>
        <option value="guangdong">广东</option>
    </section>
</form>
<!--文件上传-->
<form action="" method="post" enctype="multipart/form-data">
头像<input type="file" name="myfile">
    <textarea name="info"></textarea>
    <input type="submit" value="提交">

</form>

<!--
placeholder 灰色输入提示
required 必填
readonly 只能读不能改 可以提交
disabled 只能读不能改 不会被提交
size 设置输入框的大小
maxlength 输入框最多可以输多少字符
minlength 输入框最少可以输多少字符
autofocus 自动获取焦点,整个页面只能有一个
tabindex 设置tab切换顺序
-->

HTML head的常用标签

  <!--  设置字符编码-->
    <meta charset="UTF-8">
    <!--  设置网站标题-->
    <title>Title</title>
    <!--设置网站图标-->
    <link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico" type="image/x-icon">
<!--  抓取关键字-->
    <meta name="keywords" content="fdhuasu">
  设置几秒后跳转页面
  <meta http-equiv="refresh" content="3;url=网站地址">