HTML-基础

最新推荐文章于 2022-12-03 21:24:21 发布

luckyliuqs

最新推荐文章于 2022-12-03 21:24:21 发布

阅读量670

点赞数 1

分类专栏：前端文章标签： HTML

本文链接：https://blog.csdn.net/qq_35507234/article/details/97620232

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

概述

HTML（Hypertext Markup Language）简称超文本标记语言，不区分大小写。

HTML文档结构

HTML文档由4个主要的标签组成，分别是<html>、<head>、<title>和<body>。一个标准的HTML5文档如下所示：
<!DOCTYPE HTML>
<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <P>这是内容</p>
    </body>
</html>
1.<html>标记

<html>标记是网页的根标签，是HTML文件的开头，所有的HTML文件都是以<html>标记开头，以</html>标记结束。HTML页面内所有的标签都要放入<html>和</html>内。

2.<head>标记

<head>标记是HTML文件的头标记，作用是放置HTML文件的信息。如CSS样式代码可以放在<head>标记内。

<head>标记内还可以添加如下元素标签：<style>，<meta>，<link>，<script>，<noscript>，<base>

<style>标签

<style>标签用于定义HTML文档的CSS样式。

<meta>标签

<meta>标签用于描述一些基本的元数据，元数据不会显示在页面上，但会被浏览器解析。如HTML文档的描述，关键词，作者，字符集等等。如下所示：

为搜索引擎定义关键字 <meta name="keywords" content="HTML,CSS,XML,XHML,JavaScript">
为网页定义描述内容 <meta name="description" content="HTML网页">
定义网页的作者 <meta name="author" content="网页作者“>
每30秒刷新当前页面 <meta http-equiv="refresh" content="30">

<link>标签

<link>标签用于引入HTML文档的外部CSS样式文件，如下所示：
<link rel="stylesheet" type="text/css" href="myCss.css">
<script>标签

<script>标签用于加载脚本文件

<title>标签

<title>标签用于定义文档标题。

<base>标签

<base>标签用于描述基本的连接地址或连接目标。该标签会作为HTML文档中所有的连接标签默认连接。如下所示：
<base href="https://www.baidu.com" target="_blank">
3.<title>标记

<title>标记是用于定义网页的标题。

4.<body>标记

<body>标记是HTML页面的主体标记。网页中所有的内容都定义在<body>标记内。

常用标签

按照功能排序如下所示：

基础
<!DOCTYPE> 定义文档类型
<html> 定义一个HTML文档
<title> 定义网页标题
<body> 文档的主体
<h1>到<h6> 定义HTML标题，数字越小，字体也越小。
<p> 定义一个段落
<br /> 换行
<hr /> 水平线
 注释
格式
<abbr> 缩写
<address> 定义文档作者或者拥有者的联系信息
<b> 定义粗体文本
<big> 定义大号文本，HTML5已结废弃
<blockquote> 定义块引用
<center> 定义居中文本，HTML5不再支持。
<cite> 定义引用
<code> 定义计算机代码文本
<em> 定义强调文本
<i> 定义斜体文本
<mark> 定义带有记号的文本
<progress> 定义运行中的任务进度
样式/节
<style>
<div>
<span> 定义文档中的节

img，若只设置高或者宽时，图片会按照等比例进行缩放。

类选择器

id选择器

常见的特殊字符

  表示一个空格
> 表示一个大于符号（>)
< 表示一个小于符号（<）

列表标签

无序列表ul

语法
<ul>
    <li>...</li>
</ul>
属性

type
type属性有三种类型值：

circle：空心圆圈

disc：实心圆圈（默认）

square：实心正块

有序列表ol

语法
<ol>
    <li>...</li>
</ol>
属性

type
type属性有5种类型值：

1：阿拉伯数字（默认）。1、2、3、4、5.....

a：小写英文字母。a、b、c、d......

A：大写英文字母。A、B、C、D......

i：小写罗马字母。i、ii、iii、iv、v......

I：大写罗马字母。I、II、III、IV、V.....

样式

去掉<li>元素前面的type属性可以使用：list-style:none;

表格标签

语法

<table border="" cellspacing="" cellpadding="">
    <tr>
        <th>Header</th>
    </tr>
    <tr>
        <td>Data</td>
    </tr>
</table>

tr代表表格的每一行记录，th代表表格的每列的标题，td代表每列的数据。

标签

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

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			table{
				border: 1px solid #4169E1;
				border-collapse: collapse; /*折疊边框线*/
			}
			th,td{
				width: 70px;
				height: 30px;
				text-align: center;
			}
			th{
				background-color: mistyrose;
			}
		</style>
		<title>表格</title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>职业</th>
				<th colspan="2">联系方式</th>
			</tr>
			<tr>
				<td>91202</td>
				<td>James</td>
				<td>男</td>
				<td>未知</td>
				<td>15023234444</td>
				<td>1502</td>
			</tr>
			<tr>
				<td>91202</td>
				<td>Marias</td>
				<td>男</td>
				<td>未知</td>
				<td>15393234823</td>
				<td>1502</td>
			</tr>
		</table>
	</body>
</html>

效果如下所示：

表单标签

语法
<form action="" method="post" name="" onSubmit="" target="">
    //...			
    <input type="submit" value=""/>
</form>
属性如下所示：

action 用来指定处理表单数据程序的URL地址
method
有两种属性值

get:表示将输入的数据追加在action指定的url地址后面，并传送到服务器

post:表示按照HTTP协议中的post传输方式传送到服务器

name 指定表单的名称，可以自定义值
onSubmit 指定当用户点击提交按钮时触发的事件
target
指定输入数据结果显示在哪个窗口，其属性值可以设置如下：

_blank:表示在新的窗口中打开目标文件

_self:表示在同一个窗口中打开，默认

_parent:表示在上一级窗口大家，一般在使用框架页面时使用

_top:表示在浏览器的整个创建中打开，忽略任何框架。

<input>标签
<input type="" disabled="" checked="" width="" height="" maxLength="" readonly="" size="" 
src="" usemap="" alt="" name="" value="" placeholder=""/>
属性值如下：

type
用于指定类型，有如下值：

text:代表文本框

password：代表密码域

file：代表文件域

radio：代表单选按钮

checkBox:代表复选框

submit:代表提交按钮

reset:代表重置按钮

button:代表普通按钮

hidden:代表隐藏域

image:代表图像域，使得图片可以单击

disabled 用于指定输入标签是否为不可用（不可点击编辑）
checked 用于指定输入标签是否被选中，用于单选框和复选框，值为checked表示选中
maxlength 用于指定输入标签可输入的文字个数
readonly 用于指定输入标签是否为只读（不可编辑），值为readonly表示只读
size 用于指定输入标签的宽度，当type属性值为text和password时，以文字的个数为单位；为其他值时，以像素为单位。
src 当type为image时有效，用于指定图片的来源
usemap 当type为image时有效，为图片设置热点地图
alt 当type为image时有效，用于指定当图片无法显示时显示的文字
name 用于指定输入子弹的名称
placeholder 用于在输入标签里面显示的提示
value 用于指定输入标签默认的数据值。当type值为checkbox和radio时，不可省略此属性值。其他可省略。

案例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .name,.password{
        width: 220px;
        height: 29px;
        border-radius: 6px;
        border: 1px solid black;
        background: mistyrose;
        }
    </style>
</head>
<body>
    <form action="#" method="post">
        姓名：<input class="name"  name="stuName"  maxlength="11" placeholder="请输入学号"/><br />
        密码：<input class="password" name="stuPwd"  maxlength="10" placeholder="请输入名字"/><br />
        性别：input type="radio" name="stuSex" value="1" checked="checked"/>男
                <input type="radio" name="stuSex" value="0"/>女<br />
        爱好：<input type="checkbox" name="hobby"/>音乐
             <input type="checkbox" name="hobby" />蹦迪
             <input type="checkbox" name="hobby"/>运动<br />
        城市：<select name="">
	             <option value="" selected="selected">重庆</option>
                 <option value="">北京</option>
                 <option value="">上海</option>
                 <option value="">天津</option>
                 </select><br />
        头像：<input type="file" name="" id="" value="头像" /><br />
        自我介绍：</span><textarea name="" rows="13" cols="39"></textarea><br />
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>
效果图如下所示：

<select>下拉框标签

语法
<select name="" size="" multiple="" disabled=""></select>
属性值如下所示：

name 用于指定列表框的名称
size 用于指定列表框的显示的选项数量，超出该数量的选项通过滚动条查看
disabled 用于指定列表框不可使用（点击，变成灰色）
multiple 用于指定列表框支持多选
selected 用于指定<option>被选中

案例
<select name="">
    <option value="cq" selected="selected">重庆</option>
	<option value="bj">北京</option>
	<option value="sh">上海</option>
	<option value="tj">天津</option>
</select>
<textarea>多行文本标签

语法
<textare cols="" rows="" name="" disabled="" readonly="" wrap=""></textarea>
属性值如下所示：

name 用于指定多行文本框的名称，当表单提交后，在服务器端获取表单数据时应用
cols 用于指定多行文本框的显示列数（宽度）
rows 用于指定多行文本框的显示行数（高度）
wrap
用于指定多行文本框的文字是否自动换行，其值如下：

hard:默认值，表示自动换行

soft:表示自动换行，如果文字超过cols指定的列数就自动换行，但提交到服务器时换号符不会被提交

iff:表示不自动换行。

超链接标签

语法

<a href="" ></a>

图片标签

语法
<img src="" width="" height="" border="" alt="提示文字"/>
去除超链接的下划线使用：text-decroation:none;

HTML布局

1.使用DIV元素布局

2.使用HTML5的网站布局

HTML5 提供的新语义元素定义了网页的不同部分，如下所示：

header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题

3.使用表格的HTML布局

HTML音频

使用HTML5的多媒体标签：

<audio> 标签定义声音，比如音乐或其他音频流。
<embed> 标签定义嵌入的内容，比如插件。

HTML视频

使用HTML5的多媒体标签：

<video> 标签定义声音，比如音乐或其他音频流。
<embed> 标签定义嵌入的内容，比如插件。

luckyliuqs

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML-基础

概述 HTML（Hypertext Markup Language）简称超文本标记语言，不区分大小写。HTML文档结构 HTML文档由4个主要的标签组成，分别是<html>、<head>、<title>和<body>。一个标准的HTML5文档如下所示：<!DOCTYPE HTML><htm...
复制链接

扫一扫

专栏目录

为搜索引擎定义关键字	<meta name="keywords" content="HTML,CSS,XML,XHML,JavaScript">
为网页定义描述内容	<meta name="description" content="HTML网页">
定义网页的作者	<meta name="author" content="网页作者“>
每30秒刷新当前页面	<meta http-equiv="refresh" content="30">

基础
<!DOCTYPE>	定义文档类型
<html>	定义一个HTML文档
<title>	定义网页标题
<body>	文档的主体
<h1>到<h6>	定义HTML标题，数字越小，字体也越小。
<p>	定义一个段落
<br />	换行
<hr />	水平线
<!-- -->	注释
格式
<abbr>	缩写
<address>	定义文档作者或者拥有者的联系信息
<b>	定义粗体文本
<big>	定义大号文本，HTML5已结废弃
<blockquote>	定义块引用
<center>	定义居中文本，HTML5不再支持。
<cite>	定义引用
<code>	定义计算机代码文本
<em>	定义强调文本
<i>	定义斜体文本
<mark>	定义带有记号的文本
<progress>	定义运行中的任务进度
样式/节
<style>
<div>
<span>	定义文档中的节

	表示一个空格
>	表示一个大于符号（>)
<	表示一个小于符号（<）

action	用来指定处理表单数据程序的URL地址
method	有两种属性值 get:表示将输入的数据追加在action指定的url地址后面，并传送到服务器 post:表示按照HTTP协议中的post传输方式传送到服务器
name	指定表单的名称，可以自定义值
onSubmit	指定当用户点击提交按钮时触发的事件
target	指定输入数据结果显示在哪个窗口，其属性值可以设置如下： _blank:表示在新的窗口中打开目标文件 _self:表示在同一个窗口中打开，默认 _parent:表示在上一级窗口大家，一般在使用框架页面时使用 _top:表示在浏览器的整个创建中打开，忽略任何框架。

type	用于指定类型，有如下值： text:代表文本框 password：代表密码域 file：代表文件域 radio：代表单选按钮 checkBox:代表复选框 submit:代表提交按钮 reset:代表重置按钮 button:代表普通按钮 hidden:代表隐藏域 image:代表图像域，使得图片可以单击
disabled	用于指定输入标签是否为不可用（不可点击编辑）
checked	用于指定输入标签是否被选中，用于单选框和复选框，值为checked表示选中
maxlength	用于指定输入标签可输入的文字个数
readonly	用于指定输入标签是否为只读（不可编辑），值为readonly表示只读
size	用于指定输入标签的宽度，当type属性值为text和password时，以文字的个数为单位；为其他值时，以像素为单位。
src	当type为image时有效，用于指定图片的来源
usemap	当type为image时有效，为图片设置热点地图
alt	当type为image时有效，用于指定当图片无法显示时显示的文字
name	用于指定输入子弹的名称
placeholder	用于在输入标签里面显示的提示
value	用于指定输入标签默认的数据值。当type值为checkbox和radio时，不可省略此属性值。其他可省略。

name	用于指定列表框的名称
size	用于指定列表框的显示的选项数量，超出该数量的选项通过滚动条查看
disabled	用于指定列表框不可使用（点击，变成灰色）
multiple	用于指定列表框支持多选
selected	用于指定<option>被选中

name	用于指定多行文本框的名称，当表单提交后，在服务器端获取表单数据时应用
cols	用于指定多行文本框的显示列数（宽度）
rows	用于指定多行文本框的显示行数（高度）
wrap	用于指定多行文本框的文字是否自动换行，其值如下： hard:默认值，表示自动换行 soft:表示自动换行，如果文字超过cols指定的列数就自动换行，但提交到服务器时换号符不会被提交 iff:表示不自动换行。

header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

<audio>	标签定义声音，比如音乐或其他音频流。
<embed>	标签定义嵌入的内容，比如插件。

<video>	标签定义声音，比如音乐或其他音频流。
<embed>	标签定义嵌入的内容，比如插件。