(超详细)HTML重难点标签突破

tylyf
972 阅读4分钟

一、a标签

属性：

1. href(hyper reference 超链接的缩写)

网址

<a href="https://google.com">Google</a> <!-- 普通的链接 https协议 -->
<a href="http://google.com">Google</a> <!-- 普通的链接 http协议 -->
<a href="google.com">Google</a> <!-- 无协议协议 -->`（推荐该写法，放进浏览器自动补全）

路径

<a href="/a/b/c/.html" target="_blank">链接到此项目根目录下的a目录下的b目录下的c目录下的.HTML</a><!-- 启用http协议的链接第一个/表示的是当前启用服务的整个项目文件的根目录，而不是代表服务器根目录 -->
<a href="index.html" target="_blank">链接到此页面同一目录下index.HTML</a>

伪协议

<a href="javascript:alert("hello world!");">JavaScript伪协议</a>  <!-- 点击就会执行js代码。这里的 :; 不能省 -->
<a href="javascript:;">查看</a>  <!-- 什么都不做-->

id

<a href="#bottom">点我滚动到id为bottom的元素的位置</a>

邮件

<a href="mailto:xxxxxxxx@qq.com">点我发邮件</a> <!-- 点击会打开发邮件的程序并填入所写的邮箱 -->

电话

<a href="tel:18888888888">点我打电话给18888888888</a>  <!-- 手机端点开直接开启打电话界面并自动填入手机号 -->

2.target

<a href="//google.com" target="_blank">Google</a>  <!-- 在新建空白页面打开->

<a href="//google.com" target="_self">Google</a>  <!-- 在本页面打开 _self为默认值  --> 

<a href="//google.com" target="_top">Google</a>  <!-- 在顶层页面打开此链接页面  需要配合iframe使用才能看出效果  -->  

<a href="//google.com" target="_parent">Google</a>  <!-- 在父级页面打开此链接页面   需要配合iframe使用才能看出效果->

<a href="//google.com" target="iframe的name值">Google</a>  <!--在指定的iframe窗口打开此链接->

<a href="//google.com" target="xxx">Google</a>  <!-- 在一个新的页面打开百度，此页面下的 window.name 属性为xxx 如果有xxx就在xxx页面打开 这是允许程序员自定义名字的方式->

二、table表格标签

  • table 表格标签 常用属性如下 :

    • border 边框 默认双条线 单位 px 只对 一般为1px
    • width 整个表格的宽度 单位 px
    • height 整个表格的高度 单位 px
    • align 此表格在浏览器中的对齐方式
    • cellspacing 单元格和单元格之间的距离 单位 px

  • thead 表头

  • tbody 表格体

  • tr 表格行 常用属性如下

    • height 高度
    • align 设置当前行里面每个单元格的文字的水平对齐方式
    • valign 设置当前行里面每个单元格的文字的垂直对齐方式

  • th 列或行的表头

  • td 列数据 常用属性如下

    • width
    • height
    • align 设置单元格内文字的水平对齐方式 left 左 center 中 right 右
    • valign 设置单元格内文字的垂直对齐方式 top 上 center 中 bottom 下
    • 注意 ：设置了当前单元格的宽度 整个列都会受到影响，设置了当前单元格的高度 整个行都会受到影响

  • tfoot 表尾

table的结构中间只能有thead、tbody(必须有tbody否则浏览器也会给你补上)和tfoot，不允许放其他东西，而td单元格里可任意放

例子：

    <table width="500" height="400" align="center" border="1">
      <tbody>
        <tr height="100">
          <td><b>班级</b></td>
          <td><b>姓名</b></td>
          <td>成绩</td>
          <td>排名</td>
        </tr>
        <tr>
          <td>181</td>
          <td width="200" height="100">小华</td>
          <td>255</td>
          <td>1</td>
        </tr>
        <tr>
          <td>181</td>
          <td>小郭</td>
          <td>250</td>
          <td>2</td>
        </tr>
        <tr>
          <td>182</td>
          <td>小方</td>
          <td>249</td>
          <td>3</td>
        </tr>
        <tr>
          <td>182</td>
          <td>小张</td>
          <td>230</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
  • 常用的CSS属性
  1. table-layout
table-layout: auto; /* 大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。 */

table-layout: fixed; /*表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。 */
  1. border-collapse
border-collapse:collapse; /* 表格边框合并 不设置的话默认不合并*/
  1. border-spacing
border-spacing:0;  /* 表格单元格之间的间距  一般都设置为0才好看 */

三、img图片标签

作用：发出get请求，展示一张图片

属性：

  1. alt 图片加载失败的描述文字
  2. height 图片的高 宽高只设置一个另一个值会等比缩放 都设置很可能会失真
  3. width 图片的宽
  4. src 图片的路径 也可以是图片的链接

两个重要的事件：

  1. onload 在图片加载成功时触发
  2. onerror 在图片加载失败时触发

响应式的CSS样式：

max-width:100%;   /* 各种屏幕都适用 */

四、form标签

作用:

  • 发get或post请求，然后刷新页面

属性：

  • action 发送请求的地址
  • method 发送请求的方法 get post
  • autocomplete 属性值 on off 开启状态下会根据form里面的input输入框的name值提示相应的输入内容
  • target 与a标签相同 表示要跳转的页面位置

重要事件：

  • onsubmit ： 表单按钮提交时触发

button按钮与input按钮的区别

<button type="submit"><span>发送</span></button>  <!-- button标签的按钮 在表单里面不写type的值 则默认为submit 一个表单里面必须有一个type为submit的按钮 -->

<input type="submit">  <!-- input按钮 -->
  • 区别：是button标签按钮里面可以嵌套别的标签，input不可以

五、input标签

作用：

  • 让用户输入内容

属性:

1. type 类型类属性值
  • button 按钮
  • checkbox 多选框 一组的多选框需要相同的name值
  • radio 单选框 一组的单选框需要相同的name值
  • submit 触发提交事件功能的按钮
  • file 上传文件 multiple 可以传多个文件
  • number 输入数字
  • password 输入密码 内容不可见
  • text 输入文本
  • tel 输入电话
  • emali 输入邮箱
  • hidden 不可见的输入框 一般于js提交不需要用户输入的数据
  • search 用于搜索字符串的单行文字区域
  • color 选择颜色
2. 其他属性
  • name 一般form表单里面的所有input必须要有这个属性，方便数据的传递
  • autofocus 自动聚焦
  • checked 默认选中 多用于下拉框 或者 单选和多选
  • disabled 不可点击
  • placeholder占位符
  • value 值
  • pattern 规定用于验证输入字段的模式。 正则表达式等
  • maxlength 规定输入字段的最大长度，以字符个数计。
  • required HTML5 自带验证器 不输入内容会提示输入内容后才可提交
3. 重要事件
  • onchange 输入能容改变时触发
  • onfocus 聚焦时触发
  • onblur 失去焦点时触发

六、textarea 文字域标签

  • 用来输入多个文字简介等内容，默认情况下用户可以缩放大小，可通过CSS中resize属性设置为不可缩放属性cols 列数 rows 行数
 <textarea style="resize: none;" name="" id="" cols="30" rows="10"></textarea>

七、select 下拉选项标签

        <select name="sport" id="sport">
            <optgroup label="第一项">    <!-- 选项组 -->
                <option value="篮球">篮球</option>  <!-- 选项 -->
            </optgroup>
            <optgroup label="第二项">
                <option value="足球">足球</option>
            </optgroup>
            <optgroup label="第三项">
                <option value="排球">排球</option>
            </optgroup>
        </select>
avatar
文章
阅读
粉丝