HTML基础学习

最新推荐文章于 2024-08-12 21:44:16 发布

补天阁

最新推荐文章于 2024-08-12 21:44:16 发布

阅读量546

点赞数 21

文章标签： html 学习前端标签

本文链接：https://blog.csdn.net/csjjjd/article/details/141086988

版权

1、简单的HTML页面架构

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>

   </head>
   <body>
   </body>
</html>

<html>：HTML文档的根元素，在这个元素内定义整个HTML文档的结构。
<head>：这是HTML文档的头部分，在这个部分你可以添加一些元数据和引用外部资源。
<meta charset="utf-8">：这是定义页面使用的字符集编码，utf-8表示使用UTF-8编码，能够支持多种语言字符。
<title></title>：这是页面的标题，在浏览器的标签页上显示。
<body>：HTML文档的主体部分，在这个部分你可以添加页面的内容，比如文本、图像、链接等。

2.TML常见标签

meta标签

什么是TML标签

meta name="keywords" content="网络安全，WEB渗透，数据安全" />

注释

<p>这是一段普通的段落。</p>

标题标签

由大到小
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

</br> 换行标签

<hr> 换行线标签

文本属性

<strong>加粗</strong>
<b></b>加粗
<i></i>斜体
<u></u> 下划线

<sup></sup>上标
<sub></sub>下标
<del></del> 删除线
<font></font> 规定字体属性
   size 字体的大小
   color 字体颜色

代码样式原样输出
<pre></pre>

3.form表单和input标签

<form> 元素用于创建一个包含交互控件的表单，可以收集用户输入的数据。常见的交互控件包括输入框、下拉菜单、单选框、复选框等。

而 <input> 元素是在表单中最常用的标签，用于创建各种不同类型的输入字段。

示例：

<form action="/submit-form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" placeholder="请输入姓名">
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" placeholder="请输入邮箱">
  
  <input type="submit" value="提交">
</form>

form表单：

规定当提交表单时向何处发送表单数据

method 提交的方法有 get、post

get方式就是在浏览器上显示出来

post是不会在浏览器上显示出来的

input标签

name：同样是表示的该文本输入框名称。
size：输入框的长度大小。
maxlength：输入框中允许输入字符的最大数。
value：输入框中的默认值
readonly：表示该框中只能显示，不能添加修改。

input类型

type=password 密码输入框

type=file 文件上传

type=hidden 隐藏域

type=button 按钮

radio 多选框 checked="checked" 默认选择

type=submit 提交按钮
type=reset 重置按钮

textarea 文本域

</textarea >

选择框

<select name="address">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

4.常见的标签学习

a标签的作用：就是用于控制界面与页面之间的跳转的

默认就是self
self：用于在当前选项卡中跳转，也就是不新建页面跳转

_blank ：用于在新的选项卡中跳转，也就是新建页面跳转

锚文本

#锚点在网页开发中是一个标记，用于跳转到页面中的特定位置。当你点击一个包含锚点的链接时，页面会自动滚动到对应的位置，使得你能够直接看到你所需要的信息。锚点通常通过在想要跳转到的位置添加一个<a>标签和命名锚点的方式来创建，如上述的示例所示。

img 元素：向网页中嵌入一幅图像。

列表学习

当需要在网页中创建列表时，可以使用 HTML 提供的列表标签。HTML 提供了两种类型的列表标签：有序列表（Ordered List）和无序列表（Unordered List）。

有序列表使用<ol>标签来创建。
- <ol>标签定义了一个有序列表。
- <li>标签用于定义列表项，每个<li>标签代表一个列表项。

<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ol>

无序列表使用<ul>标签来创建。
- <ul>标签定义了一个无序列表。
- <li>标签用于定义列表项，每个<li>标签代表一个列表项。

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ul>

常见元素：
alt 规定图像的替代文本。

src 规定显示图像的url

width 规定图片的高度
height 规定图片的宽度

table 表格

border 边框
width 宽度
height 高度
colspan 行
rowspan 竖
<th></th>
<tr>行</tr>
<td>表格</td>
cellpadding 单元边与内容的空白
cellspacing 单元格的空白

希望文章能够帮助大家，谢谢！

--文章内容参考-----暗月渗透《HTML基础学习》

补天阁

关注

21
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习

：HTML文档的根元素，在这个元素内定义整个HTML文档的结构。：这是HTML文档的头部分，在这个部分你可以添加一些元数据和引用外部资源。：这是定义页面使用的字符集编码，utf-8表示使用UTF-8编码，能够支持多种语言字符。：这是页面的标题，在浏览器的标签页上显示。：HTML文档的主体部分，在这个部分你可以添加页面的内容，比如文本、图像、链接等。
复制链接

扫一扫