HTML中常用知识点整理

html复习

HTML

  1. 是一个超文本标记语言

  2. w3c标准:结构标准,表现标准,行为标准。

基本结构

<!doctype html>
<html>
    <head>
        <title>网页的标题</title>
        <meta charset="utf-8"/>
    </head>
    <body>
    </body>
</html>

基本标签

1.段落标签:

<p></p>

2.标题标签:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

3.换行标签:

<br />

4.水平线:

<hr/>

5.字体样式标签:

<strong>加粗</strong>
<b>加粗</b>
<em>斜体</em>

6.特殊符号:

大于:&gt;
  小于:&lt;
  空格:&nbsp;
  引号:&quot;
  版权符号:&copy;

7.图像标签:

<img src="图片路径" alt="图片显示不出来时显示的内容" title="鼠标悬浮显示的内容" width="宽度" height="l高度"  />
  • 相对路径:相对于当前页面的路径,eg: ../img.jpg  img/img.jpg

  • 绝对路径:相对于本机的路径,eg:D:\常用资料\21IT技能大赛\img.jpg

  • src:图片的地址(相对路径和绝对路径都可以)

  • alt:图片显示不出来时显示的替换文字内容,eg:alt="这是图书"

  • title:鼠标悬浮时显示的内容,eg:title="这是图书"

  • width:图片显示的宽度,eg:width="100"

  • height:图片显示的高度,eg:height="100"

8.超链接:

<a href="路径" target="是否在当前窗口中打开">百度一下</a>
  • href:跳转页面的地址,相对路径和绝对路径都可以

  • target:有两个值,_self:当前窗口打开超链接 _blank:在新窗口中打开超链接

9.锚链接:

  • 从页面的甲处跳转到乙处

语法:

甲处:<a href="#yi">去乙处</a>
乙处:<p id = "yi"></p>

10.块级元素和行内元素:

  • 块级元素:单独占一行,宽度是浏览器的宽度

  • 行内元素:内容撑开宽度,内容多宽,元素就多宽。左右都是行内元素,自动排列在一行

列表、表格和媒体元素

1.无序列表:

<ul>
   <li>No.1</li>
   <li>No.2</li>
   <li>No.3</li>
   <li>No.4</li>
  </ul>

2.有序列表:

<ol>
   <li>No.1</li>
   <li>No.2</li>
   <li>No.3</li>
   <li>No.4</li>
  </ol>

3.定义列表:

<dl>
   <dt>蔬菜</dt>
   <dd>黄瓜</dd>
   <dd>南瓜</dd>
   <dd>冬瓜</dd>
   <dd>北瓜</dd>
  </dl>

4.表格:

<table border="1" cellspacing="0" style="text-align: center;">
   <tr>
    <td colspan="3">第一列</td>
   </tr>
   <tr>
    <td rowspan="2">第一列</td>
    <td>第二列</td>
    <td>最后一列</td>
   </tr>
   <tr>
    <td>第二列</td>
    <td>最后一列</td>
   </tr>
  </table>

运行结果:

第一列
第一列第二列最后一列
第二列最后一列

5.音频元素:

<audio src="音频文件" autoplay="autoplay" controls="controls"></audio>

6.视频元素:

<video src="视频文件" autoplay="autoplay" controls="controls"></video>
  • **src:**音频或者视频的路径

  • **autoplay:**自动播放

  • **controls:**显示播放控件

7.网页结构元素:

<header>
   <nav>导航</nav>
  </header>
  <section>中间</section>
  <footer>底部</footer>

表单元素

1.文本框 :

<input type="text" name="name" value="mxx" size="20" maxlength="20" placeholder="请输入用户名" required="required" readonly="readonly" />
  • type:表单的类型

  • name:表单元素的名称

  • value:默认值,初始值

  • size:表单的初识宽度

  • maxlength:最大输入的字符数

  • placeholder:提示信息

  • required:是否必填,不写的话不用必填

  • readonly:是否只读

2.密码框:

<input type="password" name="pass"  />

3.单选按钮:

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

注意:name的值必须要一样,否则不能单选

4.复选框:

<input type="checkbox"  checked="checked name="hob" />打篮球
<input type="checkbox" name="hob" />堆雪人
<input type="checkbox" name="hob" />打雪仗

注意:checked是默认选中的意思,可适用于单选按钮和复选框

5.下拉列表:

<select>
 <option>山东</option>
 <option selected="selected">山西</option>
 <option>河南</option>
 <option>河北</option>
</select>

注意:selected是默认选中

6.按钮:

<button disabled="disabled">普通按钮</button>
<input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" />

注意:disabled:是禁用按钮

7.多行文本域:

<textarea cols="5" rows="20">欢迎关注微信公众号:雄雄的小课堂</textarea>
  • cols:列

  • rows:行

8.文件域:

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

9.邮箱:

<input type="email" name="files" />

10.数字框:

<input type="number" min="0" max="100" step="100"/>
  • min:最小值

  • max:最大值

  • step:步幅

11.滑块:

<input type="range" min="0" max="100" step="1"/>

12.日期表单:

<input type="date" name="borndate"/>

13.隐藏域:

<input type="hidden" name="id"/>

14.语义化标签:

<label>用户名</label>

15.正则表达式验证:

<input type="text" name="phone" pattern="^1[3456789]\d{9}" />
  • pattern:值是正则表达式

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值