HTML--简洁入门

develop_young

已于 2022-09-02 16:25:58 修改

阅读量239

点赞数

分类专栏：前端开发文章标签： html 学习 css

于 2022-06-11 19:38:37 首次发布

本文链接：https://blog.csdn.net/m0_69792317/article/details/125223064

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章摘要

一、HTML 主体结构
二、HTML常用的标签

一、HTML 主体结构

例：👾👾👾

<!DOCTYPE html>
<html lang="en"> 	
<head>	
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My </title> 	
</head>		
<body>	
    hello 
</body>
</html>

标签名	定义	说明
< !DOCTYPE html>	文档类型	告诉浏览器使用html5解析当前文件
html	跟标签	除了DOCTYPE外其他所有内容都要写在html标签内
html lang=“en”	设置网页当前语言	en=英文 // zh-CN=中文
head	页面头部	页面头部：不会显示出来的代码写在这里。例：css、js
< meta charset=“UTF-8”>	字符集设置	设置页面使用哪个字符集
title	页面标题	浏览器标题栏
body	页面主体	需要显示在浏览器中的内容都写在此处。

二、HTML常用的标签

1、排版标签

1.1、标题标签

<h1> ~ <h6> 此标签会独占一行，拥有的属性：align（决定文字显示的位置）三种设置值：left、center、right

1.2、水平线和换行

<hr/> 水平线标签。 <br/> 换行标签。

1.3、段落标签

p 标签。用来将文章分段落展示。p标签也独占一行,也有align属性。

1.4、html 实体

 空格
&emsp;全角空格
<代表 <
&gt代表 >

1.5 div 和 span 标签

div+css => 可以把网页分成一块一块的（目前）单独占一行
span 可以选中文本中的一些内容进行该选中区域的单独设置一行可以有单个

1.6、字符格式化

<b>加粗
<i>斜体
<u>下划线
<del>删除线

2、图片标签

img标签：用来在页面引入图片

src属性：设置图片的路径
alt属性：设置图标加载不成功，显示的字符串。
width/height属性：设置图片的宽和高

3、链接标签

a标签：连接标签

href属性：指定跳转的地址
target属性：指定打开连接的方式。两种设置的值：_blank新窗口打开 _self此窗口打开
超链接：从一个页面跳转到另一个页面
锚链接：从页面的一个位置跳到另一个位置。

4、表格标签

table标签：用来制作表格外边框
tr标签：用来制作表格的行
td标签：用来制作表格的列

表格的属性：
在这里插入图片描述
<tr>和<td>两个标签中还有：rowspan属性：用于行合并 colspan属性：用于列合并。

完整的表结构：

在这里插入图片描述

5、列表标签

在这里插入图片描述

6、表单标签

下面图片就是一个表单：
在这里插入图片描述

代码实例：

<form action="#" method="get" action=“#”> 表单的最外层 form 标签  mothod属性：提交方式 action属性：指定表单提交的位置
        账号：<input type="text" placeholder="admin"> 文本框
        <br/>
        密码：<input type="password" placeholder="123123">密码框
		input标签里的属性：
		name：为表单域起名，方便服务器收到表单填写的数据
		value：表单域的值
		placeholder：用来设置框中的默认显示值
		maxlength：文本框、密码框最多输入的字符数
		readonly：只读（不能修改）
		disabled：禁用（数据不会提交到 action 指定的地址）
        <br/>
        性别：<input type="radio" name="a" value="1">男         **单选框**
        <input type="radio" name="a">女
        <br/>
        爱好：<input type="checkbox" >			  复选框
        <input type="checkbox" name="b">
        <input type="checkbox" name="b">
        <input type="checkbox" name="b">
        <br>
        头像：<input type="file">
        <br>
        地址：<select name="asda" id="">
            <option value="">asd</option>
            <option value="">asd</option>
            <option value="">asd</option>
        </select>
        <br>
        <input type="submit">
        <br>
        <input type="reset" >
        <br>
        <textarea name="asd" id="" cols="30" rows="10"></textarea>

</form>

单选框、复选框
在这里插入图片描述

develop_young

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML--简洁入门

例：👾👾👾标签名定义说明< !DOCTYPE html>文档类型告诉浏览器使用html5解析当前文件html跟标签除了DOCTYPE外其他所有内容都要写在html标签内html lang=“en”设置网页当前语言en=英文 // zh-CN=中文head页面头部页面头部：不会显示出来的代码写在这里。例：css、js< meta charset=“UTF-8”>字符集设置设置页面使用哪个字符集title页面标题浏览器标题栏...
复制链接

扫一扫

专栏目录