目录
总述
HTML基本格式
常用标签
1.标题标签
2.段落标签
3.水平线标签
4.换行标签
5.文本格式化标签
6<div>和<span>标签
div的嵌套
7.图片标签和路径
图片标签 <img>(网页中插入图片)
图片路径表示
8.超链接标签
链接的语法格式
链接分类
9.注释标签
10.<em>标签
特殊字符
标签进阶
1.表格标签
1.1语法
1.2表头单元格标签
1.3表格属性(一般用CSS)
1.4表格结构标签
1.5合并单元格
2.列表标签
2.1无序列表(⭐⭐⭐⭐⭐)
2.2有序列表(会自动加序号)
2.3自定义列表
3.表单标签(一般出现在注册页面)
3.1表单域 (包含表单元素的区域)
3.2表单元素
结构性标签
1.section标签
2.article标签
3.nav标签
4.aside标签
5.header标签
6.footer标签
分组标签
1.figure标签和figcaption标签
2.hgroup标签
3.dialog标签
总述
网页是网站中的一个页面,是Internet“展示信息的一种形式”
网站是万维网上相关网页的集合
依据网页位置
- 主页:用户进入网站时看到的第一个页面就是主页。
- 内页:通过主页中的超级链接打开的网页就是内页。
依据表现形式
- 静态页面:使用HTML编写的网页,制作简单,但缺乏灵活性,在浏览网页时浏览者和服务器不发生交互。
- 动态页面:使用ASP、PHP、JSP、ASP.NET等程序生成的网页,可以与浏览者进行交互,也称为交互式页面。
HTML、CSS、JavaScripe脚本是网页设计最核心最基础的技术
- HTML(超文本标记语言)的主要功能是定义网页的基本结构
- CSS(层叠样式表)主要功能是定义网页的外观
- JavaScripe脚本的主要功能是定义网页的行为
HTML基本格式
<!DOCTYPE html>
<html>//文档开始
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<p>你好,我是段落标签</p>
</body>
</html>//文档结束
- <!DOCTYPE>标签位于文档最前面,用于像浏览器说明当前文档使用哪种HTML标准规范
- <html>根标签,用于告知浏览器其自身是一个HTML文档
- <head>用于定义HTML文档的头部信息,也称为头部标签(一个HTML文档只含一对)
- <title>可以显示网页的标题信息
- <body>主体标签,用于定义HTML文档要显示的内容(一个HTML文档只含一对)
常用标签
1.标题标签 <h1>--<h6>
HTML提供了6个等级的网页标题,即<h1>--<h6>(重要性依次递减)。
每个标题独占一行,字体加粗,字号变大。
<h1>标题内容</h1>
<h1 align="对齐方式">标题内容</h1>
align属性可选 left文本左对齐 center文本居中对齐 right文本右对齐(默认left)
2.段落标签 <p>
将内容分段,每段会根据浏览器大小自动换行,段落与段落间有空隙。
<p>内容</p>
<p align="对齐方式">段落文本</p>(默认left)
3.水平线标签 <hr>
用于段落与段落间的分隔。
<hr 属性="属性值"/>
属性 | 参数 | 功能 | 单位 | 默认值 |
size | 设置水平分割线的粗细 | pixel(像素) | 2 | |
align | left、center、right | 设置水平分割线的对齐方式 | center | |
width | 设置水平分割线的宽度 | pixel(像素)、% | 100% | |
color | 设置水平分割线的颜色 | black | ||
noshade | 设置水平分割线的3D阴影 |
4.换行标签 <br/>
强制换行显示(break),单标签,行间无间隙。
在内容中间直接插入
5.文本格式化标签
设置粗体、斜体、下划线和
删除线等
加粗 | <strong></strong> 或 <b></b> |
斜体 | <em></em> 或 <i></i> |
删除线 | <del></del> 或 <s></s> |
下划线 | <ins></ins> 或 <u></u> |
上标 | <sup></sup> |
下标 | <sub></sub> |
6.<div>和<span>标签(用来布局)
没有语义,是用来装内容的盒子(类似淘宝页面的商品推荐,包含图片文字等)
- <div>内容</div>(一行只能放一个div,单独占一行——大盒子)
——分割、分区(类似淘宝某排行榜所有商品的整体)
- <span>内容</span>(一行可以放多个span——小盒子) 【可用于控制一行中部分内容】
——跨度、跨距(可以在一行横着显示·排行榜一行的单个商品)
div的嵌套
<div class="1">
<div class="2"></div>
</div>
7.图片标签和路径
图片标签 <img>(网页中插入图片)
用于定义HTML页面中的图像,单标签
<img 属性="属性值">
属性 | 属性值 | 说明 |
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像不能正常显示时显示文字 |
title | 文本 | 提示文本,鼠标放在图像上显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border//CSS中设定 | 像素 | 设置图像的边框粗细 |
宽度和高度修改一个可以自动等比缩放
<img src="图片路径" alt="文本" title="文本" width="数字" height="数字" border="数字"/>
图片路径表示
- 若与.html文件在同一文件夹中,则直接写文件名
- 若在.html文件上一级文件中,<img src="../文件名.格式">
- <img src="复制网页图片地址">
- <img src="根目录\下一级\下一级......\文件名.格式">(存在电脑里的图)
图像标签的注意点:
①图像标签可以拥有多个属性,必须写在标签名后;要显示图像,必须要有src。
②属性间不分先后,标签名与属性、属性与属性之间要用空格分开。
8.超链接标签 <a>
用于定义超链接,作用是从一个网页链接到另一个页面
链接的语法格式
属性 | 作用 |
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,就具有超链接能力 |
target | 同于指定链接页面的打开方式,其中_self为默认值是当前窗口打开页面(默认),_blank为新窗口中打开方式(启动一个新窗口) |
<a href="跳转目标" title="跳转网页名" target=“目标窗口的弹出方式”>文本或图像</a>
链接分类
- 外部链接:引号中写目标页面的网址
<a href="https://www.csdn/" target="_blank">CSDN</a>
- 内部链接:内部页面间的相互连接(同一文件夹,同一项目中)
<a href="首页介绍.html" target="_blank">首页介绍</a>
- 空链接:当没有确定链接目标时
<a href=”#”>首页</a>
- 下载链接:如果href里的地址是一个文件或压缩包,则会下载这个文件
<a href="程序设计报告格式.doc">下载文档</a>
- 网页元素链接:在网页中各种网页元素,如文本、图像等都可以添加超链接,点击该元素即可前往目标网页
<a href="http://www.baidu"><img src="图片1.png"></a> 此时点击图片即可前往百度
- 锚点链接:不打开新页面,而是直接定位到当前页面的目标位置(类似百度百科中的不同模块)
- 在链接文本的href属性中,设置属性值为“#名字”的形式(名字只能为英文) <a href=”#name”>生平经历</a>
- 找到目标位置标签,里面添加一个id属性=刚才的名字 <h3 id=”name”>生平经历</h3>
9.注释标签
点击想要注释的文字所在行,按Ctrl+/即可直接注释
-
特殊字符
10.<em>标签
表示强调文本,用斜体表示
标签进阶
1.表格标签
1.1语法
<table>
<tr>
<th>单元格内文字</th>
... ...
</tr>
</table>
- <table></table>是用于定义表格的标签(整张表)
- <tr></tr>用于定义表格中的行,必须嵌套于<table></table>中(表中的一行)
- <td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>中(一行中的各个单元格)
-
(写一行都要写<tr> <td></td><td></td> ……</tr> )
-
1.2表头单元格标签
<th>标签表示HTML表格的表头部分,里面的文字会加粗居中表示
语法
<table>
<tr>
<th>表头内容</th>
... ...
</tr>
<tr>
<td>单元格内文字</td>
... ...
</tr>
... ...
</table>
1.3表格属性(一般用CSS)
<table 属性名=”属性值“>
属性名 | 属性值 | 描述 |
align | left、center、right | 规定表格相对周围元素的对齐方式(表格在页面中的位置) |
border | 1或” “ | 规定表格单元格是否拥有边框,默认为”“(无边框) |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认像素1 |
cellspacing | 像素值 | 规定单元格之间的空白,默认像素2 |
width | 像素值或百分比 | 规定表格的宽度 |
1.4表格结构标签
若表格很长,为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分
<thead>标签——表格头部区域
<tbody>标签——表格主体区域
语法:
<table>
<thead>
<tr>
<th>表头内容</th>
... ...
</tr>
</thead>
<tbody>
<tr>
<td>单元格内文字</td>
... ...
</tr>
</tbody>
</table>
1.5合并单元格
- 跨行合并:rowspan=“合并单元格的个数”,最上侧单元格为目标单元格,写合并代码
- 跨列合并:colspan=“合并单元格的个数” ,最左侧单元格为目标单元格,写合并代码
2.列表标签
2.1无序列表(重)
<ul>标签,列表项用<li>
要求:
- 无序列表各个列表项之间是没有顺序级别之分的,是并列的
- <ul></ul>中只能嵌套<li></li>
- <li></li>之间可以容纳任何元素
- 无序列表会带有自己的样式属性,实际使用中常用CSS设置
语法:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
... ...
</ul>
2.2有序列表(会自动加序号)
<ol>标签,列表项用<li>
要求:
- <ol></ol>只能嵌套<li></li>
- <li></li>之间可以容纳任何元素
- 有序列表会带有自己的样式属性,实际使用中常用CSS设置
语法:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
... ...
</ol>
2.3自定义列表
<dl>标签,常与<dt>(定义项目/名字)<dd>(描述每一个项目/名字)一起使用
要求:
- <dl></dl>只能嵌套<dt>和<dd>
- <dt>和<dd>个数没有限制,常为一个<dt>对多个<dd>
- <dt><dd>都是并列的
语法:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
3.表单标签(一般出现在注册页面)
一个完整的表单通常由表单域、表单控件(表单元素)和提示信息3部分组成
3.1表单域 (包含表单元素的区域)
<form>标签,<form>会把他范围内的表单元素信息提交给服务器
<form action="URL地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
属性 | 属性值 | 作用 |
action | URL地址 | 用于指定接收并处理表单数据的服务器程序的URL地址 |
method | get/post | 用于设计表单数据的提交方式,其取值为get或post(默认get) |
name | 名称 | 用于指定表单的名称、以区分同一个页面中的多个表单域 |
3.2表单元素
- <input>表单元素(浏览框)
<input/>(单标签),用于收集用户信息,包含一个type属性,根据不同type属性值输入字段拥有更多形式
<input type="属性值" name="名称" size="显示长度"/>
属性值 | 描述 |
button | 可点击按钮(一般用于通过JavaScript启动脚本) |
checkbox | 复选框(多选按钮) |
file | 输入字段和浏览字段,供文件上传 |
hidden | 隐藏的输入字段 |
image | 图像形式的提交按钮 |
password | 密码字段,该字段中字符被掩码 |
radio | 单选按钮 |
reset | 重置按钮,可以清楚表单中的所有数据 |
submit | 提交按钮,会把表单数据发送到服务器 |
text | 单行输入字段,用户可以在其中输入文本,默认宽度为20个字符 |
属性 | 属性值 | 描述 |
name | 用户自定义 | 定义input元素的名称(区别不同的表单元素) |
value | 用户自定义 | 规定input元素的值(打开框内自动显示的内容) |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符最大长度 |
readonly | readonly | 设置为只读(仅可与type="text"配合使用) |
要点:
- name和value是每个表单元素都有的属性值,给后台工作人员看
- name是表单元素的名字,要求单选按钮和复选框要有一样的name值
2. <lable>标签(扩大可选中范围)
3. 表单外框
- <fieldset> ... </fieldset>定义围绕表单中元素的边框
- <legend> ... </legend>legend元素为fieldset元素定义标题
<fieldset>
<legend>内容</legend>
<input ...>
</fieldset>
4.<select>下拉表单元素
要求:
- <select>中至少包含一对<option>
在<option>中定义select=”selected”时,默认选择中该项
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
5.textarea文本域元素
当用户输入内容较多时,使用<textarea>标签
cols=“每行中的字符数“,row=”显示的行数“,一般用CSS改变大小
语法:
<textarea row="数字" cols="数字">
文本内容
</textarea>
结构性标签
1.<section>标签
- 用于对网页的内容进行分区、分块,定义文档中的节
- 表示一段专题性的内容,必须会带有标题
- 更强调分块
- 当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div标签
语法:
<section>
<h1></h1>
<p></p>
</section>
2.<artical>标签
- 特殊的<section>标签
- 代表一个独立的、完整的相关内容快,可独立于页面其他内容使用
- 可以嵌套,内层的article对外层的article有隶属关系。
语法:
<article>
<header>
<h1></h1>
<h2></h2>
<p></p>
</header>
<p></p>
</article>
3.nav标签
- 代表页面的一个部分,是一个可以作为页面导航的链接组
- 特殊的<section>标签,更强调独立性
语法:
<nav>
<ulr>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</nav>
4.aside标签
- 用来装载非正文的内容,被视为页面里面的一个单独部分
- 可以被包含在article标签内作为主要内容的附属信息
- 也可以在article标签外,作为页面或站点全局的附属信息部分
语法:
<article>
<header>
<h1></h1>
<h2></h2>
<p></p>
<aside>附属信息部分</aside>
</header>
</article>
5.header标签
- 定义文档的页眉,通常是一些引导和导航信息
- 也可以写在网页内容里面
- 通常至少包含一个标题标签,还可以包括<hgroup>标签等
语法:
<header>
<h1></h1>
<h2></h2>
</header>
6.footer标签
- 定义section或document的页脚,包含了与页面、文章或是部分内瓤有关的信息
语法:
<footer> </footer>
分组标签
1.figure标签和figcaption标签
- figure标签用于定义独立的流内容,例如图像、图表等,一般指一个单独的单元
- figcaption标签用于为figure标签组添加标题,一个figure标签最多允许放一个figcaption标签,应放在figure标签的第一个或者最后一个子标签的位置
2.hgroup标签
可以将标题或子标题进行分组,通常与标题标签组合使用,一个内容快中的标题可以通过hgroup标签组成一组
3.dialog标签
主要用于人与人之间的对话,还包括dt和dd两个组合标签,dt表示说话者,dd表示说话者说的内容,常常同时使用
语法:
<dialog>
<dt>戒哥</dt>
<dd>今天你吸猫了吗???!</dd>
<dt>我</dt>
<dd>吸了啊[理直气壮]!</dd>
<dt>戒哥</dt>
<dd>我对你很失望!!!</dd>
</dialog>
更多推荐
HTML.网页程序设计
发布评论