HTML基础

最新推荐文章于 2024-10-10 22:49:27 发布

啊啊啊啊～～～～

最新推荐文章于 2024-10-10 22:49:27 发布

阅读量241

点赞数

分类专栏：前端文章标签： html css html5

本文链接：https://blog.csdn.net/qq_39371480/article/details/120451222

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML

1.初始HTML

1.1 HTML元素

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容

<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

上述代码具有3个html元素，即<html>,<body>,<p>

1.2 HTML头部

1.2.1 <head>元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

1.2.2 <title>元素

<title> 标签定义了不同文档的标题。<title> 在 HTML/XHTML 文档中是必须的。

1.2.3 <base>元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
	<base href="http://www.runoob.com/images/" target="_blank">
</head>

1.2.4 <link>元素

<link> 标签定义了文档与外部资源之间的关系.

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

1.2.5 <style>元素

<style> 标签定义了HTML文档的样式文件引用地址.在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
	<style type="text/css">
		body {background-color:yellow}
		p {color:blue}
	</style>
</head>

1.2.6 <meta>元素

meta标签描述了一些基本的元数据。<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

1.3 HTML中的CSS

有以下几种方式将CSS添加到HTML当中:

内联样式：在HTML元素中使用"style" 属性;
内部样式表 ：在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 : 使用外部 CSS 文件

内联样式:

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

内部样式表:

<head>
	<style type="text/css">
		body {background-color:yellow;}
		p {color:blue;}
	</style>
</head>

外部引用:

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

1.4 HTML中的图像

定义图像的语法为:

<img src="url" alt="some_text">

src:图像加载的地址
alt:当图片无法加载的时候，采用文字来替换图片增加可读性

1.5 HTML中的表格

HTML中表格携带的属性有：

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格的单元
<caption>	定义表格的标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

1.6 HTML中的列表

无序列表

<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>

有序列表

<ol>
	<li>Coffee</li>
	<li>Milk</li>
</ol>

自定义列表
其中<dl>:定义列表；<dt>:自定义列表项目；<dd>:定义自定列表项的描述

<dl>
	<dt>Coffee</dt>
	<dd>- black hot drink</dd>
	<dt>Milk</dt>
	<dd>- white cold drink</dd>
</dl>

2.HTML进阶

2.1 HTML区块

HTML中的区块元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）。比如:<h1>,<p>,<ul>,<table>
HTML中的内联元素：内联元素在显示时通常不会以新行开始。比如:<b>,<td>,<a>,<img>
HTML <div> 元素:HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
HTML <span> 元素：HTML <span> 元素是内联元素，可用作文本的容器

2.2 HTML布局

大多数的网站或者报纸都需要安排多个列，通常采用<div>或者<table>。

<!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>

在这里插入图片描述

2.3 HTML表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <form> 来设置。
html中的表单标签:

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

<form action="demo_form.php" method="post/get">
	<input type="text" name="email" size="40" maxlength="50">
	<input type="password">
	<input type="checkbox" checked="checked">
	<input type="radio" checked="checked">
	<input type="submit" value="Send">
	<input type="reset">
	<input type="hidden">
	<select>
		<option>苹果</option>
		<option selected="selected">香蕉</option>
		<option>樱桃</option>
	</select>
	<textarea name="comment" rows="60" cols="20"></textarea>
</form>