这是我参与[第五届青训营]伴学笔记创作活动的第1天

HTML的基础内容

HTML简介

全称HyperText Markup Language，超文本标记语言

X)DK%ZFZS6FI~R`T10}2XC.png

HTML的整体框架

QQ图片20230115170512.png

语法

内容划分

QQ图片20230115171031.png

语义化

常用标签

标题h类

总共h1-h6六种，字体逐渐减小，独占一行且默认加粗 <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6>

QQ图片20230115174730.png

段落p

双标签，段与段之间存在间隙，独占一行 <p>第一段</p> <p>第二段</p>

QQ图片20230115175013.png

列表

ol有序列表，每一项用li框起
ul无序列表，每一项用li框起
dl定义列表，属性用dt框起，值用dd `
1. 1
2. 2
- 0
- 0
定义列表

HTML

简介

整体框架

`

超链接a

href属性放置链接 target属性定义是否替换原有页面还是打开一个新的窗口 <a href="https://zhuanlan.zhihu.com/p/136440613">md文档的写法</a> <a href="https://zhuanlan.zhihu.com/p/136440613" target="_blank">md文档的写法</a>

QQ图片20230115180135.png

多媒体

图片img

src：链接地址（此处有一个绝对路径和相对路径的问题，最好使用相对路径。相对路径里同级可以直接用图片名，下级用“文件名/文件名”，上级用 “../文件名”）
alt：替换文本（当加载不出来时显示的文本）
width：展示宽度
height：展示高度（最好不要与width同时设置，只出现一个时是等比例缩放，同时出现时则会按照给出的宽高显示）
title：鼠标悬停时提示的文本

<img src="D:\program\青训营\课前训练\img\展示图片.png" alt="展示文本" width="100px">  <img src=".\展示图片.png" alt="展示文本" width="100px">   <img src="img/展示图片.png" alt="展示文本" width="100px">  <img src="img/展示图片.png" alt="展示文本" width="100px" title="这是悬停展示的文本">  原图 <img src="img/展示图片.png" alt="原图" width="100px"> 宽度200px不设高度 <img src="img/展示图片.png" alt="展示文本" width="200px"> 宽度200px设置高度300px <img src="img/展示图片.png" alt="展示文本" width="200px" height="300px">

QQ图片20230115184354.png

音频audio与视频video

src：链接地址
controls：播放控件（进度按钮之类的控件）

表单类控件

输入input

placeholder：占位符，当用户没有输入的时候显示什么
textarea：输入多行文字
select：下拉选择（每一项用potion框起）
list：提供输入提示（没有项用potion框起）注意：并不禁止输入其他值，只不过给一个可以快速输入的选项
type
- range属性：输入一个范围（会出现一个滑动块）
- number：输入数字，用min和max控制最大最小值
- date：输入日期，min设置最小日期
- 选项：
  - checkbox：多选
  - radio：单选（通过name属性来达到，多个radio如果name相同会从多个里选择其中一个） `
    表单控件

textarea hey

type

黑、白

黑白

赤橙黄绿青蓝紫

红黑白

QQ图片20230115191719.png QQ图片20230115191748.png QQ图片20230115191812.png

文本

blockquote：快捷引用，也叫长引用
cite：短引用
q：也叫短引用，引用之前有过的内容
code：引用短代码
pre包裹code：引用长代码
strong：加粗
em：斜体

<p>
    <!-- 短引用 -->
    <cite> Markdown </cite>是一种轻量级标记语言，用来编写文本文档，一般后缀名为.md。该语言在 2004 由<cite>约翰·格鲁伯（John Gruber）</cite>创建。
    
</p>
<p>
    <!-- 代码段 -->
    <code>int c</code>
    <pre><code>
         #include <stdio.h>
         #include <stdlib.h>
    </code></pre>
</p>
<p>
    这段文字有些<strong>加粗</strong>，有些<em>斜体</em>
</p>

第一节HTML课程笔记 | 青训营笔记