写点什么

HTML 基本知识学习笔记

作者:虾仁疙瘩汤
  • 2022-10-24
    山东
  • 本文字数:1939 字

    阅读完需:约 6 分钟

目录


  • HTML 基本知识

  • 标题和段落

  • 链接标签

  • 图片标签

  • 插入视频、音频

  • 列表、表格

  • 表单

HTML 基本知识

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <title>Document</title></head><body></body></html>
复制代码


说明:lang:HTML 标签的属性,这个属性表示这个页面的主体语言。zh-CN:lang 这个属性的值,表明这个页面的主体语言是简体中文,这个属性就是给访问用户的浏览器传输一个值:语言类型。


charset="utf-8":保证兼容性:可以保证不同的浏览器显示相同的内容。<body></body>之间填写真正的页面内容。
复制代码

HTML 标签包括:文本标签、链接标签、多媒体标签

标签代表含义


p  段落标签,1、2、3…一次代表不同大小字体。br (单个)  换行hr(单个)  横线&nbps(单个)  空格pre  预定义文本del(单个)  删除文本ins(单个)  插入文本b  粗体u  下划线i  斜体big  放大字体small  缩小字体sup  上标sub  下标
复制代码


链接标签


1、a标签(举例)(target="_blank":表示在点击这个链接之后会跳转到一个新的页面而不是存在于当前的页面)
// An highlighted block<a href="http://www.baidu.com" target="_blank">进入百度</a>
复制代码


图片标签


<img src="images/dzq2.jpg">
复制代码


插入视频、音频


这里只展示HTML5推荐使用的标签
(音频标签)
<audio controls="controls"> <source src="***.mp3" type="audio/mp3" /> </audio>
(视频标签)
<video height="***" width="***" controls="controls"> <source src="***.mp4" type="video/mp4" /> </video>
复制代码


列表、表格有序列表:ol


举例:



<!--下面表示的是一列四行--><ol> <li>***</li> <li>***</li> <li>***</li> <li>***</li> </ol>
复制代码


无序列表:ul


举例:



<!--下面表示的是一列四行--><ul> <li>***</li> <li>***</li> <li>***</li> <li>***</li> </ul>
复制代码


表格:


举例:



<!--border:设置边框--><table border="***"> <!-- 表名 --> <caption>学生信息表</caption> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>出生日期</th> <th>电话</th> </tr> </thead> <tbody> <tr> <td>****</td> <th>****</th> <th>****</th> <th>****</th> <th>****</th> </tr> <tr> <td>****</td> <th>****</th> <th>****</th> <th>****</th> <th>****</th> </tr> <tr> <td>****</td> <th>****</th> <th>****</th> <th>****</th> <th>****</th> </tr> </tbody> </table>
复制代码


说明: 定义表格结构:<table>...</table> 定义表格标题:<caption>...</caption> 定义表头:<th>...</th> 定义表格行:<tr>...</tr> 定义表格单元格:<td>...</td>


表单 type:文本框(text)单选框(radio)密码框(password)复选框(checkbox)多行文本框(textarea)name:文本框的名字(username)size:文本框的长度 method:方法 action:提交到什么地方


<form method="POST" action="">  <label>用户名:</label>    <input type="text" name="username" size="20">    <br>        <label>密码:</label>    <input type="password" name="password" size="20">    <br>
<label>性别:</label> <input type="radio" name="gender" value="男" <input type="radio" name="gender" value="女" <br>
<label>爱好:</label> <input type="checkbox" name="hobby" value="">旅游 <input type="checkbox" name="hobby" value="">看书 <input type="checkbox" name="hobby" value="">游泳 <input type="checkbox" name="hobby" value="">唱歌 <br>
<label>个人介绍:</label> <textarea name="saymyself" rows="10" cols="30"></textarea> <br>
<label>所在地区:</label> <select> <option>***</option> <option>***</option> <option selected>***</option> <!--默认选项:option selected--> <option>***</option> </select> <br> <input type="submit" value="提交"></form>
复制代码


发布于: 刚刚阅读数: 3
用户头像

还未添加个人签名 2022-10-23 加入

还未添加个人简介

评论

发布
暂无评论
HTML基本知识学习笔记_10月月更_虾仁疙瘩汤_InfoQ写作社区