html基础-持续更新
基础结构
<!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布局
大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。
大多数网站可以使用
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关于表单输入标签
标签 | 描述 |
---|---|
定义供用户输入的表单 | |
定义输入域 | |
定义文本域 (一个多行的输入控件) | |
定义了 元素的标签,一般为输入标题 | |
定义了一组相关的表单元素,并使用外框包含起来 | |
定义了 元素的标题 | |
定义了下拉选项列表 | |
定义选项组 | |
定义下拉列表中的选项 | |
定义一个点击按钮 | |
指定一个预先定义的输入控件选项列表 | |
定义了表单的密钥对生成器字段 | |
定义一个计算结果 |
HTML框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面(在一个窗口中显示多个网页链接)
iframe语法:
<该URL指向不同的网页。
同时iframe也可以设置标签的高度和宽度
<
定义是否移除边框:
<
显示一个目标链接的页面
<
<