前端学习日记-html

最新推荐文章于 2022-07-07 16:18:17 发布

Dax1_

最新推荐文章于 2022-07-07 16:18:17 发布

阅读量120

点赞数

分类专栏：前端学习日记

本文链接：https://blog.csdn.net/Dax1_/article/details/119093173

版权

前端学习日记专栏收录该内容

162 篇文章 15 订阅

订阅专栏

属性

class
contenteditable =>style在body中可以显示/编辑
hidden
id
style优先级高于css js优先级高于style => js>style>css
tabindex 控制tab跳转顺序
tabindex=n 可不连续 / tabindex=0为最后一个访问 -1不可被访问

title 鼠标放上去有显示

默认样式 CSS reset

内容标签

ol+li 有序列表
li+ol 无序列表
dl+dt+dd 描述列表
pre 保留多个空格
code 包代码
hr 水平分割线
br 回车换行
a 访问网站 href 链接 target 新标签页
em 语气强调（斜体）
strong 本质强调（加粗）
quote 引用
blockquote 块级引用

重难点

1.<a>

href
target
download
rel=noopener

a的href

网址
路径
伪协议（javascript:;）（mailto:{{邮箱}}）(tel:{{手机号}})
#跳转id （href=#xxx）

a的target

内置名字

_blank 空白标签页打开
_top 若有多个窗口（iframe），在最顶层的窗口打开链接
_parent 在当前窗口的上一层窗口打开链接
_self 当前窗口打开

2.<table>

  <table>
    <thead>
      <tr>
        <th>英语</th>
        <th>翻译</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>hyper</td>
        <td>超级</td>
      </tr>
      <tr>
        <td>target</td>
        <td>目标</td>
      </tr>
      <tr>
        <td>reference</td>
        <td>引用</td>
      </tr>
      <tr>
        <td>空</td>
        <td>空</td>
      </tr>
    </tbody>
    <tfoot></tfoot>
  </table>

table
thead tbody tfoot
tr th
tr td td
在这里插入图片描述
双表头:

  <table>
    <thead>
      <th></th>
      <th>小红</th>
      <th>小明</th>
      <th>小白</th>
    </thead>
    <tbody>
      <tr>
        <th>语文</th>
        <td>100</td>
        <td>100</td>
        <td>100</td>
      </tr>
      <tr>
        <th>数学</th>
        <td>100</td>
        <td>100</td>
        <td>100</td>
      </tr>
      <tr>
        <th>英语</th>
        <td>100</td>
        <td>100</td>
        <td>100</td>
      </tr>
    </tbody>
  </table>

在这里插入图片描述

3.<img>

发出get请求，访问图片

属性

alt 图片显示失败时，出现提示字
width 只写宽度，高度会自适应
height 只写高度，宽度会自适应，（若宽高一起写，图片变形）
src

事件

onload
onerror

<body>
  <img src="1.png" id="a">
</body>

<script>
  a.onload = function () {
    console.log(图片加载成功);
  }
  a.error = function () {
    console.log(图片加载失败);
    a.src = "2.png"
  }
</script>

响应式
max-width=100%

4.<form>

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

属性

action 要请求的页面的地址
autocomplete
method (get/post)
target

事件

submit

  <input type="submit" value="确认">
  <button type="submit">确认</button>

input和button区别：input中不可以再加其他标签

  <input type="submit" value="<strong>确认</strong>">
  <button type="submit"><strong>确认</strong></button>

在这里插入图片描述
form里面的input要有name
表单中必须有type=submit的button或input！！！

Dax1_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录