html基础-持续更新-CSDN博客

本文链接：https://blog.csdn.net/2302_80729149/article/details/140358784

html基础-持续更新

基础结构
链接
如何使用css
html图像标签
HTML 表格标签
HTML 列表标签
HTML 分组标签
HTML布局
HTML表单和输入
HTML框架
- iframe语法：

基础结构

<!DOCTYPE html><!--每个文件都要加上这个，是html文件的主题-->
<html><!--查不多就是c预言的main函数，从头括到尾部-->
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>html教程</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
            <a href="定义一个超链接">基础教程超链接</a>
            <img src="C:\Users\侯卓林\Desktop\图片\2.jpg" width="258" height="400">
            <body>
                <p>这是一个段落</p><!--p是段落标签-->>
                <br><!--//br标签只有一个，是换行标签-->
                
                <table border="1">
                    <tr><!--这两句是表格框架-->
                        <td>基础教程</td><!--每个框架一个td标签-->
                        <td>基础教程</td>
                        <td>基础教程</td>
                    </tr>
                </table>
            </body><!--代码主题写在body里边-->

            </body>
</html>

1.需要注意的是：html文件里的注释用的是这个格式<！–注释内容-- >

html结构标签	功能
	标题
	段落
	包含文档主体
	包含整个html文档
	超链接
	分隔，水平线
	简单文字内容换行

html文本格式化标签	描述
	粗体
	着重文字
	斜体字
	小号子
	加重语气（粗体）
	定义下标字
	定义上标字
	插入字（下划线）
	删除字

链接

<a herf="https://">访问示例网站</a><!--直接链接网站-->

<a href="https://www.example.com">
	<img src="example.jpg" alt="示例图片"><!--将链接创建在图片上-->
</a>

<a href="document.pdf" download>下载文档</a><!--这个链接可以直接下载文件-->

<!--target属性可以定义被链接的文档在何处显示-->
<a href="https://www" target="_blank" rel="noopener noreferrer">访问菜鸟教程</a>
<!--这个链接可以再新窗口打开文档-->

<!--另外解释一个ID属性-->
<a id="tips">这个id是隐藏的</a>

如何使用css

css是为了更好的渲染html元素而引入的

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部区域使用

内联样式

一般来说，我们是在外部引用css文件，但当特殊的样式需要应用到个别元素时，就可以使用内联样式：在相关的标签中使用样式属性，比如：改变段落的颜色和左外边距<p style="color:blue;margin-left:20px;">这是一个段落。<p>

设置背景颜色

<bodystyle="background-color:yellow;">
                    <h2 style="background-color: aqua;">这是一个段落海贼王
                    </h2>
                </bodystyle></body>

html样式实例-字体，字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

文本对齐方式

<h1 style="text-align:center;">
    居中对齐的标题
</h1>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在部分通过

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}</style>
    <title>2.11</title>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

外部样式表

通过更改一个文件来更改整个站点的外观

<head>
    
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

html样式标签

标签	描述

html图像标签

标签	描述
	定义图像
	定义图像地图
	定义图像地图中的可点击区域

HTML 表格标签

标签

定义表格

定义表格的表头

定义表格的行

定义表格单元

定义表格标题

定义表格列的组

定义用于表格列的属性

定义表格的页眉

定义表格的主体

定义表格的页脚

HTML 列表标签

标签	描述
	定义有序列表
	定义无序列表
	定义列表项
	定义列表
	自定义列表项目
	定义自定列表项的描述

HTML 分组标签

标签	描述
	定义了文档的区域，块级 (block-level)
	用来组合文档中的行内元素，内联元素(inline)

HTML布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用

或者元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

div的id部分用于识别布局，例如

例如，这是一个html代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>
</html>

HTML表单和输入

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

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

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

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

<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

其中，提交按钮表单的内容会被传送到服务器，表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:

代码如下：

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

这里的method属性一共有两个：post和get

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 **?**作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。

例如：

<!-- 以下表单使用 GET 请求发送数据到当前的 URL，method 默认位 GET。 -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 表单使用 fieldset, legend, 和 label 标签 -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>

html5关于表单输入标签

标签	描述
	定义供用户输入的表单
	定义输入域
	定义文本域 (一个多行的输入控件)
	定义了元素的标签，一般为输入标题
	定义了一组相关的表单元素，并使用外框包含起来
	定义了元素的标题
	定义了下拉选项列表
	定义选项组
	定义下拉列表中的选项
	定义一个点击按钮
	指定一个预先定义的输入控件选项列表
	定义了表单的密钥对生成器字段
	定义一个计算结果