前端学习——HTML

最新推荐文章于 2024-07-18 18:43:34 发布

ren.janisa

最新推荐文章于 2024-07-18 18:43:34 发布

阅读量259

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/RX1125/article/details/122511539

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端学习——HTML

1.学习内容
- 2.学习方式

1.学习内容

掌握了解HTML基本标签的使用,如文字、音频、视频标签等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input</title>
</head>
<body>
<h1>小京小吃</h1>
<hr>
<h2>holle</h2>
<p><b>无人与我立黄昏,<br>无人问我粥可温.</b></p>
<p>所爱隔山海,<br>山海不可平</p>
<img src="resource/1639188465275.jpg" alt="bug" title="风景" width="300">
<!--src插入图片 alt图片显示失败后出现 title鼠标悬停在图片上时出现-->
<!--只需设置宽或高一个属性另一个会等比例变化-->
<br>
<audio src="resource/渴望光荣-伴奏.mp3" controls></audio>
<!--浏览器不自动播放音频 controls显示播放控件 autoplay自动播放(部分浏览器不支持) loop循环播放-->
<br>
<video src="resource/QQ视频_3b241618af7558cc1911ab6afb0881451637508599.mp4" controls width="500"></video>
<!--通音频功能 但可以自动播放谷歌需加muted静音播放-->
<br>
<a href="https://www.bing.com" target="_blank">bing</a>
<!--插入超链接 herf后加跳转地址 不知道跳到那个链接时#空连接 target属性默认在_self本标签打卡,在新标签打开用_blank-->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>link</title>
</head>
<body>
<!--无序列表 ul嵌套li-->
<ul>
    <li>驴打滚</li>
    <li>榴莲酥</li>
    <li>臭豆腐</li>
</ul>
<!--有序列表 ol嵌套li-->
<ol>
    <li>驴打滚</li>
    <li>榴莲酥</li>
    <li>臭豆腐</li>
</ol>
<!--自定义列表 dl嵌套dt(主题) dt套dd(内容) -->
<dl>
    <dt><strong>帮助中心</strong></dt>
    <dd>购买指南</dd>
    <dd>人工客服</dd>
</dl>
<!--表格 table包裹tr(行) tr包裹td(单元格)-->
<table border="1" width="500">
    <caption><strong>菜单</strong></caption>
    <tr>
        <th>编号</th>
        <th>菜名</th>
        <th>口味</th>
        <th>价格</th>
<!--th表头标签-->
    </tr>
    <tr>
        <td>1</td>
        <td>驴打滚</td>
        <td>糯甜</td>
        <td>4</td>
    </tr>
    <tr>
        <td>2</td>
        <td>榴莲酥</td>
        <td>酥甜</td>
        <td>5</td>
    </tr>
</table>
<!--表单标签-->
<form action="">
文本框:<input type="text" placeholder="账号">
<!--placeholder提示词(占位符)-->
<br>
密码框:<input type="password" placeholder="密码">
<br>
<!--input按钮-->
提交数据<input type="submit">
重置<input type="reset">
普通按钮<input type="button" value="注册">
</form>
<!--form表单域是按钮知道执行对象-->
<br>
<!--button按钮-->
<button>按钮</button>
<button type="reset">重置</button>
<!--具有input一样属性 谷歌默认为提交按钮 跟便于包裹其他内容(文字 图片等)-->
<br>
单选框:
      <input type="radio" name="sex" id="man"><label for="man">男</label>
      <label><input type="radio" name="sex" checked>女</label>
<!--name属性是其编为一组 只能选择一个 checked默认选中-->
<br>
多选框:<input type="checkbox" checked>
<br>
上传文件:<input type="file" multiple>
<!--multiple上传多个文件-->
<br>
<select>
    <option>北京</option>
    <option selected>上海</option>
    <!--selected默认选择-->
    <option>广州</option>
    <option>深圳</option>
    <option>重庆</option>
</select>
<!--select(父)下拉菜单 option(子)-->
<!--文本域标签-->
<br>
<textarea></textarea>
</body>
</html>

2.学习方式

放假在家学习,对自己无疑是一个挑战,面对诸多诱惑,坚持每天抽出时间来学习,看视频、敲代码,慢慢提升自己。

ren.janisa

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习——HTML

前端学习——HTML1.学习内容2.学习方式1.学习内容掌握了解HTML基本标签的使用,如文字、音频、视频标签等等。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>input</title></head><body><h1>小京小吃</h1><hr>&lt
复制链接

扫一扫