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

一、本堂课内容：

html（HyperText Markup Language）与前端相关知识
html的标签

二、详细知识点：

js,css,html均运行在浏览器中，浏览器通过http协议和服务器进行通信
HyperText不是纯文字，包括图片、链接、表格etc
<!doctype html>指定了浏览器使用什么版本的渲染模式
html不区分大小写，属性均用" "
<a href="www.baidu.com" target="_blank"> </a>
<img src="连接" alt="图片不显示事的文字" width="" />
<audio src="" controls> </audio>
<video src="" controls> </video>
<input type="password"> 用于输入form
多行文字的输入<textarea> </textarea>
在input中，若多个选项的name相同，那用户只能选择其中一项。name相当于指定了后端参数，value则是指定发送回的数据<input type="checkbox" name="subject" value="math" />

<select>
    <option> 🍎 </option>  
    <option> 🌰 </option>
</select>

引用：

<blockquote cite="..." > 内容 </blockquote>
<cite>章节名</cite>
<q>具体引用的内容</q>
<code>const</code>

三、实践练习：

<html>
    <head>
        <meta charset="UTF-8">
        <title>html与前端</title>
    </head>
    <body>
        <h1>html标签</h1>
        <!--list-->
        <ol>
            <li>🍎</li>
            <li>🌰</li>
            <li>🍉</li>
        </ol>
        <ul>
            <li>🍇</li>
            <li>🍊</li>
            <li>🐦</li>
        </ul>
        <dl>
            <dt>name:</dt>
            <dd>李华</dd>
            <dt>age:</dt>
            <dd>25</dd>
        </dl>
        <!--连接-->
        <a href="https://www.bytedance.com/" target="_blank">字节跳动官网</a><br/>
        <!--图-->
        <img src="3.jpg" alt="hua"  width="400"/><br/>
        <!--声-->
        <audio src="/assets/music.ogg" controls></audio><br/>
        <!--视频-->
        <video src="/assets/video.mp4" controls></video><br/>
        <!--输入-->
        <input type="checkbox" />🍎<br/>
        <input type="checkbox" checked="checked" />🍇<br/>
        <input type="radio" name="s"/>🍉<br/>
        <input placeholder="请输入用户名"><br/>
        <input type="password"><br/>
        <input type="range"><br/>
        <input type="number" min="1" max="10"><br/>
        <input type="date" min="2018-02-10"><br/>
        <textarea name="comment" row="5" cols="30">Hey</textarea><br/>
        <select>
            <option selected="selected">🥑</option>
            <option>🥩</option>
            <option>🥓</option>
        </select><br/>
        <!--用户输入-->
        <input list="countries" />
        <datalist id="countries">
            <option>Greece</option>
            <option>United Kingdom</option>
            <option>United States</option>
        </datalist>
    </body>
</html>

在checkbox等选择中，可以使用checked默认勾选内容

截屏2023-01-15 15.50.00.png

截屏2023-01-15 15.50.42.png 对于target设置返回窗口有：_blank（将返回信息显示在新开的浏览器窗口）、_self（将返回信息显示在当前浏览器窗口）、_parent（将返回信息显示在父级浏览器窗口）、_top（将返回信息显示在顶级浏览器窗口）

四、个人总结：

a
img
input
select
blockquote
cite
textarea

前端与 HTML | 青训营笔记

一、本堂课内容：

二、详细知识点：

三、实践练习：

四、个人总结：