HTML语法 | 青训营笔记

Juns_G
97 阅读4分钟

HTML语法 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天

Tips

  • 标签和属性不区分大小写，最好小写
  • 空标签可以不闭合，如input、meta
  • 属性值最好用双引号包裹
  • 有些属性值可以省略，如required、readonly

标题

  • 总共只有h1~h6六级，从大到小

列表

有序列表

 <ol>
     <li>阿凡达</li>
     <li>泰坦尼克号</li>
     <li>复仇者联盟</li>
 </ol>

imagea8047c6697b114a3.png

无序列表

 <ul>
     <li>🍇</li>
     <li>🍉</li>
     <li>🍎</li>
 </ul>

image789d99e6d6355b19.png

自定义列表

标签名说明
dl表示自定义列表的整体，用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容
  • dd前默认会有缩进效果
 <dl>
     <dt>导演：</dt>
     <dd>陈凯歌</dd>
     <dt>主演：</dt>
     <dd>张国荣</dd>
     <dd>张丰毅</dd>
     <dd>巩俐</dd>
     <dt>上映日期：</dt>
     <dd>1993-01-01</dd>
 </dl>

image4a4a0aefadf48090.png

链接

来源：地址

定义与用法

  • 一些常用属性
属性值描述
downloadfileName规定被下载的超链接目标名
hrefURL规定链接指向的页面的 URL
targetblank【跳转新页面】 / parent【在父窗体中打开链接】 / self【默认，当前页面跳转】 / top【在当前窗体打开链接，并替换当前的整个窗体(框架页)】 / framename【在指定的框架中打开被链接文档，把frame看做内置浏览器】规定在何处打开链接文档
title说明规定鼠标置于标签上的显示说明

具体用法：

     <a href="">空链接，当前页面跳转，刷新页面</a>
     <a href="//www.baidu.com" target="_blank">打开新窗口，跳转到百度</a>
     <a href="javascript:void(0)" >不跳转，网页上常用于button作用的a标签设置点击事件，阻止跳转</a>
     <a href="mailto:123@qq.com">发送邮件【mailto：会自动检测本机系统是否安装邮箱，如果有就会自动打开邮箱，没有则会提示用户选择邮箱或者没提示】</a>
     <a href="tel:123456789">一键拨打电话</a>
     <a href="sms:123456789">一键发送短信</a>
 ​
     <a href="#">空锚点，回到最顶端，不刷新页面</a>
 ​
     <a href="#app">跳转</a>
     <p id="app">锚点</p>
 ​
     <a href="#app">跳转</a>
     <a href="" name="app">跳转【这种方式只能用a标签的name属性定义才生效】</a>
     
       // 下载，href指示目标地址，download重命名下载文件
     <a href="//www.w3school.com.cn/i/w3school_logo_white.gif" download="w3logo">
         <img border="0" src="//www.w3school.com.cn/i/w3school_logo_white.gif" alt="W3School">
     </a>

网址：(推荐第三种)

  • https://baidu.com
  • http://baidu/com
  • //baidu.com

伪类用法

a标签href=""的时候，默认状态时:visited状态；a标签没有href属性的时候，默认状态时:active状态，这两种情况都不影响:active和:hover的触发，但是永远不会触发:link

  1. link：设置a对象在未被访问前的样式表属性

  2. visited：设置a对象在其链接地址已被访问过时的样式表属性

  3. hover：设置对象在其鼠标悬停时的样式表属性

  4. active：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性

    CSS定义中的顺序是LVHA(link—visited—hover—active) LoVe,HAte

多媒体标签

来源：地址1 地址2

img

属性

  • src：图片的路径，这是必须有的

  • alt：在图片加载不出来的情况下，用文字描述图片内容

  • height：图片高度

  • width：图片宽度

    规定图片的高（宽）的情况下，它的宽（高）会自动设置；若同时规定图片的宽和高，图片可能变形

audio

来源： 地址1

  • 设置多个音频资源

  不同浏览器支持的音频播放格式有所不同，一般为了兼容效果，会放置多种音频格式，浏览器会自上而下选择符合的音频格式。

 <audio controls>
   <source src="music.ogg" type="audio/ogg" />
   <source src="music.mp3" type="audio/mpeg" />
   <source src="music.wav" type="audio/Wav" />
 </audio>

表单

基础标签

<input placeholder="请输入用户名">

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>

image543090acef2e89bf.png

复选框

<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

单选框

name标签内容相同的就只可以选一个

<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>

下拉框

<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>

文字

引用

<blockquote cite="http://t.cn/RfjKO0F">
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

短引用

  • cite有斜体
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
  • q有引号“”
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

代码

<p><code>const</code>声明创建一个只读的常量。</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

强调

  • strong加粗
  • em斜体
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>
avatar
文章
阅读
粉丝