网页基础之HTML

最新推荐文章于 2024-07-24 16:27:32 发布

LyiRo_

最新推荐文章于 2024-07-24 16:27:32 发布

阅读量127

点赞数 1

文章标签： vscode 开发语言 html

本文链接：https://blog.csdn.net/m0_52083530/article/details/119981483

版权

一、软件的使用

1：软件名 VSCode

2：软件必备插件

Auto Rename Tag 自动重命名标签

Beautify 代码高亮工具

Chinese vscode中文语言包

二、基础知识

1：HTML是什么

用来描述网页的一种语言
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2：HTML的模板

快捷键： ！+回车

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>html模版</title> 
</head>
<body> 

</body>
</html>

3：常用标签

标题标签：

段落标签：

<p></p>

文本修饰标签：

<strong></strong> 表示强调，加粗文本

<em></em> 表示强调，文本斜体

<sup></sup> 上标标签

<sub></sub> 下标标签

<del></del> 删除标签，在文本中间加一条横线表示文本删除

<ins></ins> 下划线，给文本内容添加下划线

<br>换行

图片标签：

src：图片的地址

alt：图片加载失败后会显示的文本内容

title：所有标签都有的一个属性

如： <img src="./练习.jpg" alt="图片加载失败" title="练习">

相对路径与绝对路径

相对路径：对应的是当前文件的路径
./当前的文件路径
../当前的文件的上一级路径
绝对路径：对应的是盘符开始的路径

跳转链接

href：指的是跳转的目标地址
target：页面的跳转方式

_self当前页面直接跳转

_blank打开新窗口
如果要所有窗口统一新开页面，可以使用<base target="_blank">

列表标签：

无序列表

有序列表

定义列表

表格标签

<table></table> 定义表格的最外层容器
<tr></tr> 定义表格的行
<th></th> 定义表头
<td></td> 定义单元格
<caption></caption> 定义表格标题
属性：
border 表格边框
cellpadding 单元格内文字距离单元格边框的距离
cellspacing 单元格之间的距离
align 左右对齐方式 left、right、center
valign 上下对齐方式 top、middle、bottom

表单标签

1：<form action=""></form> 表单的最外层容器
action 用户点击提交后数据传的地址
method 数据提交的方式

2：<input > 用于获取用户的输入，根据type展示不同的控件
placeholder 输入框提示
type：
text 文本输入框
password 密码输入框
number 数字输入框
date 日期选择
file 上传文件
range 范围选择
hidden 隐藏控件
submit 提交
reset 重置
radio 单选框通过同样的name可以控制实现单选
checkbox 多选框

3： <label for=""></label> 为input元素定义标注，label内元素点击可以触发控件,for与被触发的id相同

div和span

<div></div> 盒子容器，可以容纳其他标签，也可以多层嵌套，用来将网页分为多块
<span></span> 用来修饰文字
没有默认样式需要通过CSS控制
div 块级元素：每个块级元素算一行，第二个块级元素会另起一行，可以设置元素的宽、高等，
内部可以容纳块级元素和内联元素
span 内联元素：内联元素会在同一行显示，不可以设置宽、高等，内部不可以容纳块级元素

三：思维导图

由于我思维导图html和css是一起的，所以这张图下节css还能继续用

LyiRo_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页基础之HTML

一、软件的使用1：软件名 VSCode2：软件必备插件Auto Rename Tag 自动重命名标签Beautify 代码高亮工具Chinese vscode中文语言包二、基础知识1：HTML是什么用来描述网页的一种语言 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag)
复制链接

扫一扫