认识HTML:超文本标记语言,html
不是一种编程语言,而是一种标记语言
HTML语言语法骨架格式:
<html>
<head>
<title>标题title>
head>
<body>
body>
html>
标题标签:
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
段落标签: 文本内容
单标签
单标签div
:分区 ;span
:跨度,范围;
标准 | 显示效果 |
---|---|
|
文字以粗体方式显示 |
|
文字以斜体方式显示 |
|
文字以 |
|
文字以下划线方式显示 |
注:
只有使用,没有强调的意思
语义更强调
该语法中src属性用于指定图像文件的路径和文件名,它是img标签的必需属性。
基本语法格式:
<img src="图像URL" />
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图像的路径 |
alt | 文本 | 图像不能显示时的替换文本 |
title | 文本 | 鼠标悬停时显示的内容 |
width | 像素 | 设置宽度 |
height | 像素 | 设置高度 |
border | 数字 | 设置图像边框的宽度 |
基本语法格式:
<a href="跳转目标" target=“目标窗口的弹出方式”>文本或图像a>
href:
用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。
target:
用于指定链接页面的打开方式,其取值有self和blank两种,其中self为默认值,blank为在新窗口中打开方式。
注:
1.外部链接 需要添加http:// + www.baidu.com
2.内部链接 直接链接内部页面名称即可,比如:
<a href="index.html">首页a>
3.如果当时没有确定链接目标时,通常将连接标签的href属性值定义为“#”(即href="#")表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接:
1.使用"a href="#id名"链接文本/a"
创建链接文本。
2.使用相应的id名标注跳转目标的位置。
可以设置整体链接的打开状态。
和
之间:
<base target="_blank " />
特殊字符 | 描述 | 字符的代码 |
---|---|---|
空格符 | |
|
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
℃ | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2(上标2) | ² |
³ | 立方3(上标3) | ³ |
基本语法格式:
1.图像文件和HTML文件位于同一文件夹,只需输入图像文件的名称即可,如
。
2.图像文件位于HTML文件的下一级文件夹,输入文件夹名和文件名,之间用“/”隔开,如
。
3.图像文件位于HTML文件的上一级文件夹,在文件名之前加入“…/”,如果是上两级,则需要使用“…/…/”,以此类推,如
。
“D:\web\img\logo.gif”
,或完整的网络地址,例如"http://www.itcast.cn/images/logo.gif"
。
基本语法格式:
<ul>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
················
ul>
注:
1.
中只能嵌套,直接在
标签中输入其他标签或者文字的做法是不被允许的。
2.之间相当于一个容器,可以容纳所有元素。
3.无序列表会带有自己的样式属性,放下那个样式,让CSS 来!
基本语法格式:
<ol>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
················
ol>
基本语法格式:
<dl>
<dt>名词1dt>
<dd>名词1解释1dd>
<dd>名词1解释2dd>
··················
<dt>名词2dt>
<dd>名词2解释1dd>
<dd>名词2解释2dd>
··················
dl>
基本语法格式:
<table>
<tr>
<td>单元格内文字td>
···················
tr>
···············
table>
解释:
1.table
用于定义一个表格。
2.tr
用于定于表格中的一行,必须嵌套在table
标签中,在table
标签中含有几对tr
,就有几行表格。
3.
:用于定义表格中的单元格,必须嵌套在
标签中,一对
中包含几对
,就表示该行中有多少个单元格。
注:
1.
中只能嵌套
。
2.
标签,它就像一个容器,可以容纳所有的元素。
属性名 | 含义 | 常用属性值 |
---|---|---|
border | 设置表格的边框(默认border=“0”无边框) | 像素值 |
cellspacing | 设置单元格边框之间的空白间距 | 像素值(默认为2) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1) |
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
align | 设置表格在网页中的水平对齐方式 | left、center、right |
表头一般位于表格的第一行或第一列,其文本加粗居中,设置表头只需用表头标签
替代相应单元格标签
即可。
在使用表格进行布局时,可将表格划分为头部、主体和页脚。
:用于定义表格的头部,必须位于
标签中,一般包含网页的logo和导航等头部信息。
:用于定义表格的主体。必须位于
标签中,一般包含网页中除头部和底部之外的其他内容。
基本语法格式:
<table>
<caption>表格标题caption>
table>
注:
1.caption
标签必须紧跟table
标签之后,且只能对每一个表格定义一个标题,通常这个标题会被居中于表格之上。
2.caption
只存在表格里。
跨行合并:rowspan
跨列合并:colspan
合并单元格的思想:
将多个内容合并的时候,就会有多余的东西,把它删除。
公式:
删除的个数=合并的个数-1
合并的顺序:
先上后下 先左后右
1.表格提供了HTML
中定义表格数据的方法。
2.表格中由行中单元各组成。
3.表格中没有列元素,列的个数取决于行的单元格个数。
4.表格不要纠结于外观,那是CSS
的作用。
在HTML
中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。
属性 | 属性值 | 描述 |
---|---|---|
type | text | 单行文本输入框 |
type | password | 密码输入框 |
type | radio | 单选按钮 |
type | checkbox | 复选框 |
type | button | 普通按钮 |
type | submit | 提交按钮 |
type | reset | 重置按钮 |
type | image | 图像形式的提交按钮 |
type | file | 文件域 |
name | 由用户自定义 | 控件的名称 |
value | 由用户自定义 | input控件中的默认文本值 |
size | 正整数 | input控件在页面中的显示宽度 |
checked | checked | 定义选择控件默认被选中的项 |
maxlength | 正整数 | 控件允许输入的最多字符数 |