当前位置: 首页 > article >正文

html基础-认识html

1.什么是html

html是浏览器可以识别的的标记语言,我们在浏览器浏览的网页就是一个个的html文档

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>认识html</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

将这串代码用记事本保存起来,更改.txt后缀名为.html,拖到浏览器中就可以看到效果了。

html的组成部分

html是有html标签(元素)组成的,有时候叫html标签,有时候叫html元素,都一个意思。
例如上面的<h1></h1>标签 代表标题 <p></p>标签代表段落

html 常用标签

双标记标签:
有开始有结尾 例如<h1> 是开始标签 </h1>是结尾标签
单标记标签: 只有一个标记。如<img /> 图片标签, <input />输入框标签

1.标题标签 :html标题是通过<h1> -<h6>标签来定义的

<h1></h1> 显示的标题字体最大。
<h6></6> 显示的标题字体最小。

2.段落标签:p标签

<p>这是一个段落</p>

3.超链接标签:a标签

<a href = "https://www.baidu.com">点击网址进入某个页面</a>

4.容器标签 div标签

网页布局容器标签
网页由一个个div容器组成的,是网页布局排版中最常用的标签。

5.列表标签

有序列表标签

<ol>
        <li>这是有序标签</li>
        <li>这是有序标签</li>
        <li>这是有序标签</li>
</ol>

网页效果是这样子的
在这里插入图片描述

有序标签

 <ul>
       <li>这是无序标签</li>
       <li>这是无序标签</li>
       <li>这是无序标签</li>
 </ul>

浏览器显示的效果是这样子的
在这里插入图片描述

6.表格标签

<table>
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
</table>

table 代表这是一个表格容器,tr是表格中的行,td是表格中的单元格,相当于列的意思。

标签相对于标签 有加粗和居中的效果
<table>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>13</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>14</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>15</td>
            <td></td>
        </tr>
    </table>

浏览器显示效果是这样子的
在这里插入图片描述

7.表单标签

<form>
	注册用户<br/>
	<input  type="text" placeholder="请输入昵称"/><br/>
	<input  type="password" placeholder="请输入密码"/><br/>
	<input type="radio" name="sex" /><input type="radio" name="sex" ><br/>
	兴趣爱好有哪些?<br/>
	<input type="checkbox">足球 <input type="checkbox"> 篮球 <input type="checkbox"><br/>
	请选择图像上传<br/>
	<input type="file"><br/>
	您来自那个省份?<br/>
	<select>
        <option>湖北</option>
        <option>湖南</option>
        <option>河南</option>
        <option>广东</option>
    </select>
</form>

在这里插入图片描述

<form></form>标签代表这是一个表单容器 <input />是输入框标签,它有不同的类型 type="text | password |radio |checkbox |file"
type="text" 代表这是一个文字输入框
type="password" 这是一个密码输入框
type="radio" 这是一个单选框
type="checbox" 这是一个复选框
type="file" 这是一个文件选择器
type="reset" 这是一个重置按钮
type="submit"这是一个确认提交按钮
type="button" 这是一个普通按钮

8.文本域标签

文本域标签也是表单组件里面的一种

<textarea cols="30" rows="10"></textarea>

在这里插入图片描述

9.块级标签

<div>标签也是块级标签 但是div是一个标签独占一整行,<span>标签只占一小块
<span>hello</span>

10.音视频标签

音频

<audio src="" controls></audio>

视频

<video src="" controls width="500px" height="100px"></video>

http://www.kler.cn/a/443603.html

相关文章:

  • Vue3 Suspense:处理异步渲染过程
  • 前端:改变鼠标点击物体的颜色
  • PyQt实战——随机涂格子的特色进度条(十一)
  • MyBatis如何处理延迟加载?
  • 定时任务——定时任务技术选型
  • 使用helm安装canal-server和canal-admin
  • SpringBoot开发——详解Tomcat线程池默认最大支持200并发
  • 51c视觉~合集36
  • 【Spark】Spark SQL执行计划-精简版
  • 聊聊航空航天软件中常用的SIFT(Software-Implemented Fault Tolerance)三版本方案
  • 前端打印(html)
  • 设计模式之创建型
  • sql server 备份恢复
  • 《Vue3实战教程》5:响应式基础
  • 【异常】GL-SFT1200路由器中继模式,TL-CPE1300D无法搜寻5G网问题分析
  • 如何在STM32中使用RTC定时器
  • [一招过] Python的正则表达式篇
  • 基于51单片机的交通灯设计—夜间、紧急、复位、可调时间、四个数码管显示
  • kubeadm一键部署K8S 集群架构
  • Gitee与idea的项目提交步骤
  • MySQL专题:SQL优化实践
  • JavaCV 之中值滤波:提升图像质量的有效方法
  • 【C语言】库函数常见的陷阱与缺陷(一):字符串处理函数[2]--gets函数
  • PHP:构建动态网站的后端基石
  • 微服务-02
  • 拍立淘按图搜索API接口需要遵循一定的步骤和注意事项