html基础-认识html

news2024/12/19 9:28:02

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.coloradmin.cn/o/2262072.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！