HTML基础

最新推荐文章于 2022-07-18 19:50:08 发布

yanzi_0216

最新推荐文章于 2022-07-18 19:50:08 发布

阅读量109

点赞数

分类专栏： html+css 文章标签： html

本文链接：https://blog.csdn.net/yanzi_0216/article/details/107760206

版权

html+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

初识HTML

HTML起步

HTML骨架

<html>
	<head>
		<title>网页标题</title>
	</head>
	<body>
		网页主体内容
	</body>
</html>

HTML文档类型

<!DOCTYPE>

<!DOCTYPE>声明必须是 HTML 文档的第一行，位于标签之前。
<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

//html5的文档类型声明
<!DOCTYPE html>

字符集
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
gb2312 简单中文包括6763个汉字
BIG5 繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符

文本格式化标签

标签	显示效果
`<b></b><strong></strong>`	文字以粗体的方式显示（XHTML推荐使用strong）
`<i></i><em></em>`	文字以*斜体*的方式显示（XHTML推荐使用em）
`<s></s><del></del>`	文字以加删除线的方式显示（XHTML推荐使用del）
`<u></u><ins></ins>`	文字以加下划线的方式显示（XHTML不推荐使用u）

链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

target属性取_self（默认值）的值时，会在原有窗口打开链接。target属性取_balank的值时，会在新的窗口打开链接。

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

	1.使用  <a href=''#id名''>链接文本</a>  创建链接文本（被点击的）
	<a href="#two">
	2.使用相应的id名标注跳转目标的位置。
	<h3 id="two">第2集</h3>

base标签

base标签写在<head>标签中。
base标签可以用在所有a标签之前用于设定页面中所有a标签中的target属性，用于同一a标签的打开方式。

在这里插入图片描述

实体字符（特殊字符标签）

在这里插入图片描述

路径

路径可以分为绝对路径、相对路径和物理路径。
对于 载入文件 形式的路径（PHP中的require和include指令），只能使用相对路径和物理路径。
对于ajax请求，则上述三种路径都可以使用，推荐使用绝对路径。

自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>

表格属性（行内属性）

在这里插入图片描述
通常的表格样式会设置三参为零：即 boder为0，cellspacing为0，cellpadding为0。

表格标题 caption 标签

<table>
	<caption>我是表格标题</caption>
</table>

caption 元素定义表格标题，必须紧随table标签之后，只能在表格中使用，只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格

跨行合并：rowspan 跨列合并：colspan
合并单元格的思想：将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除。
公式：删除的个数 = 合并的个数 - 1
合并的顺序先上后下先左后右

先确定是跨行还是跨列合并
根据先上后下先左后右的原则找到目标单元格
删除单元格删除的个数 = 合并的个数 - 1

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100.00</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$10.00</td>
  </tr>
</table>

在这里插入图片描述
rowspan=“0” 指示浏览器横跨到表格部分的最后一行（thead、tbody 或者 tfoot）。
colspan=“0” 指示浏览器横跨到列组的最后一列。

表单标签

input控件（表单控件）

在这里插入图片描述

lable标签

label 标签为 input 元素定义标注。
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

也可以写成包裹的形式

<label>Male：<input type="radio" name="sex" value="male"> </label>

textarea控件(文本域)

<textarea cols="每行中的字符数" rows="显示的行数">
	文本内容
</textarea>

下拉菜单

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>

注意：

<select></select>中至少应包含一对<option></option>。
在option 中定义selected =" selected "时，当前项即为默认选中项。

表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
	各种表单控件
</form>

常用属性：

Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method
用于设置表单数据的提交方式，其取值为get或post。
name
用于指定表单的名称，以区分同一个页面中的多个表单。

注意：每个表单都应该有自己表单域。

yanzi_0216

关注

0
点赞
踩
0

收藏

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

初识HTMLHTML起步HTML骨架<html> <head> <title>网页标题</title> </head> <body> 网页主体内容 </body></html>HTML文档类型<!DOCTYPE><!DOCTYPE>声明必须是 HTML 文档的第一行，位于标签之前。<!DOCTYPE>声明不是 HTML 标签；它
复制链接

扫一扫