HTML基础-常用标签及属性_标签是指脚本中那些尖括号-CSDN博客

本文链接：https://blog.csdn.net/qq_43676817/article/details/106005683

在这里插入图片描述

Hi,我是EverdayForCode。你，今天学习了吗！

HTML概述

WWW(World Wild Web，万维网)的核心语言，由SGML发展而来。
HTML（Hyper Text Markup Language/超文本标记语言）是一种布局语言，告诉浏览器显示什么内容以及如何显示内容。
浏览器解释执行HTML语句，再通过一个HTML绘制引擎在屏幕上绘制文本和图形等内容。
HTML是开放的全球性标准，使用HTML编写的网页文件，可以在全世界几乎所有的浏览器上显示。
在www网络中通常使用http协议传输html

HTML5概述

2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。目前HTML5发展迅速，首先在手机网页中替代了HTML4.0，PC机由于系统升级缓慢，HTML5并没有完全普及
目前新版的浏览器已经开始支持HTML5
IE9及其更高版本
Chrome
Firefox
Safari
Opera
国产的IE或Chrome核心浏览器
对于程序员来说，HTML5保持了原先的结构，淘汰了很多特性，并增加了很多新特性

HTML基础

标签前面带’*'表示此标签在HTML5不常用或者用CSS取代；例如：*<font>…</font>

HTML标签和内容

HTML由内容和标签组成。标签是在HTML中尖括号中的部分，尖括号以外的部分就是内容。
标签的作用就是指示浏览器怎样显示内容。
例：<开始标签>内容</结束标签>
开始标签告诉浏览器进行怎样的处理，从哪里开始处理，结束标签告诉浏览器处理在哪里结束。
例：请用<b>黑体字</b>显示标题

HTML结构

如：一个最简单的HTML例子

<html>
     <head>
         <title>My First Web Page</title>
     </head>
     <body>  
         This is Content. Html is Easy! 
    </body> 
  </html>

HTML标签通常是成对出现。
浏览器从左至右、至上而下，解释执行HTML。
<html>标签定义该脚本语言是<html>脚本语言。
<head>标签定义网页的属性信息。
<body>标签中的内容才能实际显示在网页中，该标签有很多属性。

文字标签

字体与颜色，*<font>…</font>标签定义文字的详细属性。
face：将文本变为指定字体。
size：将文本变为指定字号。
color：将文本变为指定颜色。支持特定的命名颜色和RGB颜色值。

<font color="red" size="5" face="宋体">字体与颜色标签</font>

加粗：*<b>…</b>
斜体：*<i>…</i>
下划线：*<u>…</u>

标题标签

通过<h1>~<h6>定义标题。

<h1>一级标题</h1> 
 <h2>二级标题 </h2>
 <h3>三级标题</h3>
 ...

此标签仅定义一个标题的容器，具体样式需要结合样式表定义

图片标签

图片标签：<img>或<img />表示一个图片
属性：
src：图片地址（网址/相对地址/绝对地址）
*width：宽度
*height：高度
*border：边框宽度
*alt：图片注释

图片标签仍在使用，但除src属性外，其他属性已基本被淘汰，取而代之的是使用CSS样式表定义图片属性

链接标签

链接<a>…</a>标签
属性：
href：链接地址（网址/相对地址/绝对地址）
target：链接目标（在何处打开链接，_self、_blank、_parent或name）
name：位置点定义
链接地址可跟#name，表示页面滑动到name处显示，如：

<a href="http://www.sample.com/index.html#info">链接到位置点</a>

点击后，会链接到index.html页面并滑动到位置点<a name=“info”></a>处显示

<a href=“#info”>滑动到位置点</a>

点击后，滑动到本页的位置点<a name=“info”></a>处显示

表格标签

表格标签-结构

表格<table>…</table>
行<tr>…</tr>
列<td>…</td>
按照table tr td的顺序写，如：

<table>
		<tr><th>…</th><th>…</th>…</tr>
		<tr><td>…</td><td>…</td>…</tr>
	         …………………………………………………
	</table>

表格标签-属性

table标签属性
*cellpadding
cellspacing
table、tr、td属性
*border：边框宽度
*bordercolor：边框颜色
*background：背景图片
*bgcolor：背景颜色
*width：宽度
*height：高度
*align：水平排列(left、right、center)
*valign：垂直排列(top、middle、bottom)
td属性：
colspan：单元格横向合并
rowspan：单元格纵向合并

表格盒模型

表格边框由table边框和td边框构成

表单

表单标签

表单标签具有HTML5新属性

<form>…</form>用于容纳和提交表单控件，属性：

action：提交的地址
method：提交的方式(post/get)

post：将数据放入http消息体中提交
优点：安全、传输的数据量大；缺点：数据构造不方便
get：将数据以键值对的方式放入url中提交
优点：数据构造方便(可直接放入链接地址)；缺点：数据量受限于url最大长度、不安全

target：与链接中的target属性相同
enctype：编码方式，提交的post数据编码方式

application/x-www-form-urlencoded：对字符做urlencode编码
multipart/form-data：不做字符编码，上传文件时需要
text/plain：空格转换为 “+” 加号，但不对特殊字符编码。

表单控件标签

表单控件用于数据的输入和提交

文本框：

<input type="text" name="..." value="..." />

密码框：

<input type="password" name="..." value="..." />

单选框：

<input type="radio" name="..." value="..." checked="checked" />

复选框：

<input type="checkbox" name="..." value="..." checked="checked" />

文件选择框：

<input type="file" name="..." />

隐藏表单：

<input type="hidden" name="..." />

按钮：

<input type="button" value="..." />

提交按钮：

<input type="submit" value="..." />

重置按钮：

<input type="reset" value="..." />

下拉菜单：

<select name="...">
    <option value="...">选项1</option>
    <option value="...">选项2</option>
</select>

多行文本框：

<textbox name="...">
   文本内容
 </textbox>

表单标签属性

*maxlength：能够输入的最大字符数，用于文本输入表单
readonly：只读
*size：字符宽度
check：是否被选中
name：表单提交时的键名
value：表单提交时的值

转义字符和换行标签

由于HTML标签无法被显示出来，但如果用户需要显示的内容包括HTML标签可使用HTML转义字符：

&lt;表示左尖括号（<）
&gt;表示右尖括号（>）
&quot；表示双引号（”）
&nbsp;表示空格
……

换行标签<br>：网页中内容换行使用<br>，HTML源代码的回车换行符并不会被解析为换行

框架页

目前框架页已较少使用，HTML5中不再支持框架页

框架页标签

<frameset>…</frameset>：定义框架
<frame>…</frame>：子标签，定义子页面

用于将一个页面分为若干个子页面，每个子页面都是独立的页面，可以单独访问。

框架页属性

标签及属性

<frameset rows="153,*" cols="*">

rows代表上下分，153,*代表上部高度为153PX，下部为剩余宽度
cols代表左右分，*代表左右不划分

<frame name="topFrame" scrolling="NO" noresize src="head.htm">

name：子页面的名称，与<a>标签中的target的名称对应
scrolling：是否打开滚动条
noresize：不允许拖动子页面大小
src：子页面的来源地址

注意

<frameset>不能放在<body></body>或<title></title>内。
在框架页面中，父页面用来定义框架及子页面属性，子页面的具体内容仍在子页面中。
父页面与子页面都是独立的页面，可以单独访问，只是在父页面中引用了子页面。
框架中还可以再套框架。
如果一个主页要用左右框架式页面来做，那么需要做3个页面，一个父页面，用来定义框架，两个子页面，供父页面调用。

框架页实例

<html>
<head>
   <title>框架页例</title>
</head>
<frameset rows="153,*" cols="*" frameborder="no" border="0" framespacing="0">
   <frame name="topFrame" scrolling="no" noresize src="head.htm" >
   <frameset cols="160,*" frameborder="no" border="0" framespacing="0">
      <frame name="leftFrame" noresize scrolling="no" src="bar.htm">
      <frame name="mainFrame" src="content.htm" scrolling="yes">
   </frameset>
</frameset>
</html>