HTML基础|青训营笔记

UR
84 阅读4分钟

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

1、HTML是什么？

HTML(超文本标记语言):

  • HypeText(图片，标题，链接，表格)
  • Markup Language（文章标题）

HTML页面结构：html 、head、title、body

代码：

<!doctype html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>页面标签</title>
            <body>
                <p>
                    段落内容
                </p>
            </body>
        </head>
</html>
</!doctype>

代码效果：

一级标题

段落内容

2、HTML语句

  • 标签和属性不区分大小写，多用小写；
  • 空标签可不闭合，eg：input，meta
  • 属性值单、双引号，推荐用双引号包裹
  • 某些属性值可以省略，eg：required、readonly

3、标签h1~h6使用

代码：

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

代码效果：

标题一

标题二

标题三

标题四

标题五
标题六

4、列表标签：

注：

  • ol和ul标签中只允许放li标签
  • li标签一般放一项，独占一行
  • 标签（dl：整体；dt：主题；dd：主题中每项的内容）
  • dl标签只允许dt和dd

有序代码：

<h5>主菜单</h5>
<ol>
<li>🍔</li>
<li>🍕</li>
<li>🍱</li>
<li>🍜</li>
<li>🍙</li>
</ol>

代码效果：

主菜单
  1. 🍔
  2. 🍕
  3. 🍱
  4. 🍜
  5. 🍙

​

无序代码：

<h5>饮料</h5>
<ul>
<li>☕</li>
<li>🍦</li>
<li>🥛</li>
<li>🍵</li>
<li>🍹</li>
</ul>

代码效果：

饮料
  • ☕
  • 🍦
  • 🥛
  • 🍵
  • 🍹

​

自定义标签代码:

<h4 center>新品配料表</h4>
<dl>
<dt>杨枝甘露🍹</dt>
<dd>芒果</dd>
<dd>柚肉</dd>
<dd>椰汁</dd>
<dd>奶昔</dd>
<dd>西米</dd>
<dd>牛奶</dd>
<hr/>
<dt>紫薯于你🍸</dt>
<dd>紫薯</dd>
<dd>绿茶</dd>
<dd>薄荷</dd>
<dd>牛奶</dd>
<hr/>
<dt>上架时间</dt>
<dd>2022-08-15</dd>
</dl>
​

代码效果;

image.png

​

5、链接：

注:

  • a标签是超链接
  • href属性设置连接地址
  • target属性设置哪个目标进行跳转
  • _self表示当前页面（默认值）， _blank表示打开新页面跳转

代码：

<a href = "https://www.bytedance.com/">字节跳动官网</a>
​
<a href = "https://www.bytedance.com/" target="_black">字节跳动官网</a>

代码效果：

字节跳动官网 字节跳动官网

6、img标签

注：

  • img 标签是图片标签,用来显示图片

  • src 属性可以设置图片的路径（本地图片路径或网络图片路径）

  • width 属性设置图片的宽度， height 属性设置图片的高度 （若只设一个，另一个等比例缩放）

  • border 属性设置图片边框大小

  • alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容

  • title鼠标悬停提示文字

  • 属性名和标签名用空格隔开

  • 绝对路径: <http://ip:port/>工程名/资源路径

    相对路径:

    . 表示当前文件所在的目录

    .. 表示当前文件所在的上一级目录

    文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略

<body>
<img src="https://XXXX.jpg" alt ="not found " width="400"/>
<img src="1.jpg" width="200" height="260"/>
<img src="../2.jpg" width="200" height="260" />
<img src="../imgs/3.jpg" width="200" height="260" />
</body>

7、audio/音频标签

注：

  • controls显示播放的空间
  • autoplay自动播放
  • loop循环播放

代码：

<audio src="XX.ogg"  controls autoplay loop></audio>

代码效果：

image.png

8、video/视频标签

注：

  • controls显示播放的空间
  • autoplay自动播放
  • loop循环播放

代码：

 <video src="xx.mp4"  controls autoplay loop></video>

代码效果：

image.png

9、表单

常用input标签代码: 注：

  • textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
  • rows 属性设置可以显示几行的高度
  • cols 属性设置每行可以显示几个字符宽度
<input placeholder="请输入用户名">
<input type = "text" value="请输入用户名">

<input type="range">
​
<input type="number" min="1" max="10">
​
<input type="date" min="2018-02-10">
​
<textarea>Hey boy!!!</textarea>

image.png ​​

image.png

注：

  • 单选(radio)：name 属性可以对其进行分组 checked="checked"表示默认选中
  • 多选(checkbox) : checked="checked"表示默认选中
  • 下拉列表框（select）：option 标签是下拉列表框中的选项 selected="selected"设置默认选中
<p>
<label><input type="checkbox" />😊</label>
  <label><input type="checkbox" checked />😀</label>
</p>
​
<p>
  <label><input type="radio" name="sport" checked/>⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>
​
<p>
  <select>
    <option>🎁</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>
​
<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>
​

代码效果：

  image.png

image.png

10、内容强调

注：

image.png

代码：

<blockquote cite="http://t.cn/RfjKO0F">
  <p>p标签常用于引用具体内容</p>
</blockquote>
​
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
​
<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>
​
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>
​
<p>Cats <em>are</em> cute animals.</p>

代码效果：

p标签常用于引用具体内容。

我最喜欢的一本书是小王子。

在第一章，我们讲过"字符串是不可变量"。

const声明创建一个只读的常量。

const add = (a, b) => a + b;

const multiply = (a, b) => a * b;

在投资之前，一定要做风险评估。

Cats are cute animals.

11、页面内容划分

  • header（含nav导航标签）、main（article内容）、footer（脚注、常放置版权和联系方式等）aside（放放置其他不相关内容）

12、什么是语义化

  • 每个html元素有具体含义（eg：img是图片标签）

  • 传递内容非样式（元素默认样式受浏览器默认的css样式影响，元素展示效果由css决定）

    补：了解标签和属性含义后使用合适标签来描述内容

13、语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

总结：

html内容比较细杂，对于html标签知识需要认真掌握，打好基础后才有利于后期内容的学习。学习的路上永无止境，我需要有耐心，细心。没啥技术基础和知识储备的我会保持激情和热情去探究、学习、扩宽自己的知识界面。