html基础知识

最新推荐文章于 2024-07-18 16:22:57 发布

m0_46288900

最新推荐文章于 2024-07-18 16:22:57 发布

阅读量96

点赞数

文章标签： html 前端 vscode

本文链接：https://blog.csdn.net/m0_46288900/article/details/121946000

版权

vscode 的使用

双击打开软件

新建文件 ctrl+N

保存 ctrl+S，注意移动要保存为.html文件

ctrl+加号键，ctrl+减号键可以放大缩小视图

生成页面骨架结构输入！按下 tab

利用插件在浏览器中预览页面：单击鼠标右键，弹出窗口点击 “Open In Default Browser"

DOCTYPE和lang以及字符集的使用

<!DOCTYPE html>作用是告诉浏览器按照HTML5标准解析页面。
lang指定该html标签内容所用的语言
字符集是多个字符的集合

常用标签

标题标签<h></h> (h1~h6)
段落标签<p></p>,可以把 HTML 文档分割为若干段落
换行标签<br /> 单标签

文本格式化标签

标签名	描述	效果
<b></b>和<strong></strong>	文字以粗体显示	粗体效果
<i></i>和<em></em>	文字以斜体显示	斜体效果
<s></s>和<del></del>	文字以加删除线显示	~~删除线效果~~
<u></u>和<ins ></ins>	文字以加下划线显示	下划线效果

<div></div>和<span></span>标签:是没有语义的,是网页布局最主要的2个盒子
<img />图像标签

属性名描述
src 图片路径
alt 图片显示失败时的替换文字
title 鼠标放图片上显示的文字
width 宽度
height 高度
border 边框
注释标签
```

```
快捷键是：ctrl + / 或者 ctrl +shift + /
<a></a>超链接标签
href 链接目标的 url 地址

外部链接需要添加 http://

内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页

如果当时没有确定链接目标时 href="#"

下载链接 href时文件或压缩包

网页元素链接文本图像视频等

锚点定位：通过创建锚点链接，用户能够快速定位到目标内容。
```
    <a href="#hah"></a>
    <p id="hah"></p>
```
target 链接页面的打开方式

属性值描述
_self 当前页面打开

_blank
新标签页打开
特殊字符

特殊字符特殊字符代码
空格  
大于号 >
小于号 <

属性名	描述
src	图片路径
alt	图片显示失败时的替换文字
title	鼠标放图片上显示的文字
width	宽度
height	高度
border	边框

属性值	描述
_self	当前页面打开
_blank	新标签页打开

特殊字符	特殊字符代码
空格
大于号	>
小于号	<

表格标签

标签名	描述
<table></table>	用于定义一个表格标签。
<tr></tr>	用于定义表格中的行，必须嵌套在 table标签中
<td></td>	用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，必须嵌套在 table标签中
<th></th>	表头单元格标签:一般表头单元格位于表格的第一行或第一列，并且文本加粗居中，必须嵌套在 table标签中
<thead></thead>	用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有<tr> 标签，必须嵌套在 table标签中
<tbody></tbody>	用于定义表格的主体。放数据本体，必须嵌套在 table标签中
<tfoot></tfoot>	放表格的脚注之类，必须嵌套在 table标签中
rowspan="合并单元格的个数"	跨行合并
colspan="合并单元格的个数"	跨列合并
colspan="合并单元格的个数"	跨列合并

列表标签

   1.无序列表

        <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

        <li>与</li>之间相当于一个容器，可以容纳所有元素。
<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	......

</ul>
2.有序列表
<ol >
	<li>列表项1</li>
	<li>列表二</li>
	<li>列表三</li>

</ol>
3.自定义列表
<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
	<dt>名词2</dt>
	<dd>名词2解释1</dd>
	<dd>名词2解释2</dd>
	...

</dl>

表单标签

标签名	描述
<form action="url地址" method="提交方式" name="表单域名称"></form>	用于定义表单域，以实现用户信息的收集和传递，会把它范围内的表单元素细腻些提交给服务器
<input type="" name="" id="sex"/>	输入元素
<label for="sex"></label>	为 input 元素定义标注
<select><option>...</option></select>	下拉列表
<textarea></textarea>	文本域

相对路径和绝对路径

绝对路径：目录下的绝对位置，通常时从盘符开始的路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

m0_46288900

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础知识

目录vscode 的使用DOCTYPE和lang以及字符集的使用常用标签相对路径和绝对路径vscode 的使用双击打开软件新建文件 ctrl+N保存 ctrl+S，注意移动要保存为.html文件ctrl+加号键，ctrl+减号键可以放大缩小视图生成页面骨架结构输入！按下 tab利用插件在浏览器中预览页面：单击鼠标右键，弹出窗口点击 “Open In Default Browser"DOCTYPE和lang以及字符集的使用<!D...
复制链接

扫一扫