HTML的基础语法介绍

目录

HTML基础

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML 很容易学习！相信您能很快学会它！

HTML元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性(长宽高,颜色....)

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 和
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML声明

<!DOCTYPE html>

使用HTML编辑时使用需要声明

HTML主体

<html></html>

为整个界面主体

HTML标题

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
style="text-align: center;" 是用来让标题居中的属性

HTML标题(Heading)是通过< h1> - < h6> 标签来定义的。

HTML段落

HTML段落是通过< p>标签来实现的

<p>这是我的第一个段落</p>
<p>这是我第二个段落</p>
<p>这是我第三个段落</p>

<br/>可以实现换行功能,<hr/>也可以实现换行功能但是效果是下面的样子,有横线

image-20240119194645230

HTML< span>标签

实例:

使用 < span> 元素对文本中的一部分进行着色：

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

HTML超链接

HTML连接是通过<a>标签来实现的

<a href="https://www.runoob.com">这是一个链接</a>
属性:
用target=“_blank”就可以让新页面在另一个窗口打开。

相关css属性

  • 在<a>标签内部使用style属性来设置样式，将text-decoration属性设置为none。可以取消标签的下划线

HTML图像

HTML图像是通过< img>标签来实现的

<img decoding="async" src="/images/logo.png" width="258" height="39" />

注:图片的名称和大小是通过属性定义的

让我们练习一下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>这是我第一个标题</title>
    </head>
    <body>
        <h1>这是我第一个标题</h1>
        <h2>这是我第二个标题</h2>
        <h3>这是我第三个标题</h3>
        <h4>这是我第四个标题</h4>
        <h5>这是我第五个标题</h5>
        <h6>这是我第六个标题</h6>
        <p>这是我第一个段落</p>
        <a href="https://www.4399.com">4399入口</a>
        <img decoding="async" src="https://gitee.com/cwy0710/image/raw/master/img/boos.jpg" width="123" height="144"/>
    </body>
</html>

image-20230927180429958

这就是基本成功然后让我们来逐一详细学习HTML

HTML属性

用来改变标签的状态

例如:

<img decoding="async" src="/images/logo.png" width="258" height="39" />

注:图片的名称和大小是通过属性定义的

HTML转义符

由于在网页中有些符号不能直接显示,需要通过其他符号进行代替

几个常用的转义符

&lt; b&gt; <!--表示 <b>-->
&nbsp; <!--代表一个空格-->
&reg;  <!-- 注册商标符号 --> 
&copy; <!--版权符号-->

HTML表格

  • 元素table,td ,tr

表格基本结构

<table border = "1" width = "400">定义表格 border是表格的属性 ==1为显示表格线,0为不显示表格线
	cellspacing = "[间隔]"还有单元格之间的间隔 
    cellpadding = "[间隔]"设置单元格内容到边框的距离
    <tr>定义表行
    colspan = "[nums]" //跨多列合并,从哪个合并,就从哪个单元格开始写进去,删除多余单元格
        <th>定义表头</th>
        <td>定义单元格</td>
        align = "left/center/right" 水平  
        valign = "top/middle/bottom" 垂直位置
        rowspan = "[nums]" //跨多行合并,删除多余的
        
    </tr>
    <tr>
        height="150"定义每行的高度
        <td>定义单元格</td>
    </tr>
</table>


*快捷创建爱你表格 table>tr*nums>td*nums

HTML表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

  • <form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
  • <label> 元素用于为表单元素添加标签，提高可访问性。
  • <input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
  • <select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。
<form action = "" method = "get">
    账号:<input type = "text" name = "account" value = ""/><br/>
    <!-- type 与name是一对键值对 -->
    <!-- 
    action 代表一个地址
    type = "text"  文本  Password 密码;radio 性别;
    name = "定义名称 名字自定义"向后端提交的键
    placeholder = "提示信息"
    readonly = "readonly" 只读不能修改  但是可以提交
    disabled = "disabled" 禁用组件不能修改  不能提交
	-->
    <input type ="submit" />
</form>

image-20240302093458869

嵌套HTML元素

大多数HTML元素是可以嵌套的(HTML元素可以包含其他HTML元素)

HTML文档由相互嵌套的HTML元素构成

比如下面

<!DOCTYPE html>
<html>
    
    <body>
    	<p>
			这是第一个段落
        </p>    
    </body>
    
</html>

以上就包含了三个HTML元素

详细参考菜鸟教程html参考文档

posted @ 2024-05-26 18:48  Yang0710  阅读(13)  评论(0)  编辑  收藏  举报