Web基础系列一、Html(网页结构)

HTML全称

HyperText Mark-up Language:超文本标记语言.

本篇基于HTML4,后续会推出HTML5的说明.

HTML文档由四部分组成

  • 文档声明: <!DOCTYPE HTML>
  • html标签对: <html></html>
  • head标签对: <head></head>
  • body标签对: <body></body>

HTML编写规范

  • html程序以<html>开头,同时以</html>结束.
  • <html>中包含两个部分:
    • <head><title>标题信息</title>设置html相关的信息</head>
    • <body>页面上显示的内容</body>
  • html的标签不区分大小写.
  • html的标签有开始标签,也要有结束标签:<title></title>.
  • 如果想对html中的数据进行样式变化,使用标签封装数据,通过修改标签的属性和属性值实现标签内数据样式的变化[一个标签相当于容器,修改容器的属性值可以实现容器内数据样式的变化]—html的操作思想.
  • 个别标签没有结束标签,在标签内结束:<br/> <hr/>.

HTML常用标签

1.文字标签:<font></font>

  • color:字体颜色

    • 英文单词:red black green orange white yellow gray.
    • 十六进制:#fff RGB 使用工具.
  • size:字体大小

    • 使用1-7表示大小范围(超过7按7显示).

2.注释标签

  • java有三种:单行//...、多行/*...*/、文档/**...*/
  • html、xml一种<!-- ... -->
  • css一种:多行/% ... %/
  • js两种:单行、多行

3.水平线标签:<hr/>

  • color:颜色
  • size:粗细(1-7表范围)

4.特殊字符:

  • <:&lt;
  • >:&gt;
  • &:&amp;
  • 空格:&nbsp;

5.标题标签:<h1><h1/>...<h6><h6/> <caption></caption>

  • 自动换行:从1-6字体大小递减

6.列表标签

  • 层级列表

    <dl--列表范围>
    	<dt--上层内容>
    		<dd--下层内容><dd/>
    	<dt/>
    <dl/>
    
  • 有序列表

    <ol type="1/a/i"--排序显示方式>
    	<li><li/>
    <ol/>
    
  • 无序列表

    <ul type="circle/square/disc"--排序显示方式>
    	<li><li/>
    <ul/>
    

7.图像标签:<img src="img src">

  • wigth:图片高度
  • height:图片宽度
  • alt:图片存在,鼠标悬停显示文字;图片不存在,图片位置上显示文字

8.两种路径

  • 绝对路径:图片的完全路径
  • 相对路径
    • 如果图片和html文件在一个目录下,可以直接写picture.jpg
    • 如果图片在html文件所在目录的下层目录,aa/picture.jpg
    • 如果图片在html文件所在目录的上层目录,../picture.jpg
    • 如果图片在html文件所在目录的上层目录的上层目录,../../picture.jpg

9.超链接标签

  • funcA:链接资源

    <a href="" target="_self/_blank/_parent/_top"--打开方式><a/>
    
  • funcB:定位资源

    • 定义位置:<a name="locationName"><a/>
    • 回到位置:<a href="#locationName"><a/>

10.表格标签

<table>
	<tr/th(居中加粗)--行 align="left/center/right"--位置>
		<td--格 align="left/center/right"></td>
	</tr/th>
</table>
  • border:表格线(1-7)
  • bordercolor
  • borderspacing:单元格间距
  • borderpadding:数据与单元格间距
  • width:表格宽度
  • height:表格高度

合并单元格思想:首先确定行数及每行内单元格数
– rowspan:跨行
– colspan:跨列

11.其他标签:b u i p(段落) s pre sub(下标) sup(上标) div span(行内元素)

12.头标签

  • title:定义文档的标题
  • base:定义默认超链接地址<base href="" target="_blank"></base>
  • meta:定义HTML文档中的元数据<meta name="keywords" content="catface, wyh">
  • link:引入外部资源文件(如css文件)
  • style:定义HTML文档的样式
  • script:加载客户端的脚本文件

13.框架标签:不能有body

  • frameset:页面划分方式
    • rows:上下划分
    • cols:左右划分
  • frame:具体封装的页面

★表单标签

要求一:每个输入项必须有name属性
要求二:单选框、复选框、下拉框必须有value属性

  • <form>表单范围</form>

    • action:设置提交到哪个页面

    • enctype:当需上传文件,属性值改为:multipart/form-data

    • method:设置表单提交方式:get(默认)、post(提交的数据放到请求体中)

      get请求post请求
      地址栏会携带数据地址栏不携带数据
      安全性很低安全性较高
      请求数据的大小有限制请求数据的大小无限制
  • 普通输入项:<input type="text"/>

  • 密码输入项:<input type="password"/>

  • 单选输入项:<input type="radio" name=""--必须相同 checked--默认选中/>

  • 复选输入项:<input type="checkbox"/ name=""--必须相同>

  • 文件上传项:<input type="file"/>

  • 提交按钮:<input type="submit"/>

  • 提交操作使用图片:<input type="image" src="img src"/>

  • 重置按钮:<input type="reset" value=""/>

  • 隐藏项:<input type="hidden" name="hidden" value=""/>

  • 文本域:<textarea rows=""--行数 cols=""--列数></textarea>

  • 下拉选择框:不使用input便签,使用select标签

    <select>
    	<option></option>
    </select>
    

HTML标记概览

标记类型译名或意义作用备注
文件标记
<html>文件声明让浏览器知道这是 HTML 文件
<head>开头提供文件整体资讯
<title>标题定义文件标题,将显示于浏览顶端
<body>本文设计文件格式及内文所在
排版标记
<!--注解-->说明标记为文件加上说明,但不被显示
<p> 段落标记为字、画、表格等之间留一空白行
<br>换行标记令字、画、表格等显示于下一行
<hr>水平线插入一条水平线
<center>居中令字、画、表格等显示于中间反对
<pre>预设格式令文件按照原始码的排列方式显示
<div>区隔标记设定字、画、表格等的摆放位置
<nobr>不折行令文字不因太长而绕行
<wbr>建议折行预设折行部位
字体标记
<strong>加重语气产生字体加粗 Bold 的效果
<b>粗体标记产生字体加粗的效果
<em>强调标记字体出现斜体效果
<i>斜体标记字体出现斜体效果
<tt>打字字体Courier字体,字母宽度相同
<u>加上底线加上底线反对
<h1>一级标题标记变粗变大加宽,程度与级数反比
<h2>二级标题标记将字体变粗变大加宽
<h3>三级标题标记将字体变粗变大加宽
<h4>四级标题标记将字体变粗变大加宽
<h5>五级标题标记将字体变粗变大加宽
<h6>六级标题标记将字体变粗变大加宽
<font>字形标记设定字形、大小、颜色反对
<basefont>基准字形标记设定所有字形、大小、颜色反对
<big>字体加大令字体稍为加大
<small>字体缩细令字体稍为缩细
<strike>画线删除为字体加一删除线反对
<code>程式码字体稍为加宽如<tt>
<kbd>键盘字字体稍为加宽,单一空白
<samp>范例字体稍为加宽如<tt>
<var>变数斜体效果
<cite>传记引述斜体效果
<blockquote>引述文字区块缩排字体
<dfn>述语定义斜体效果
<address>地址标记斜体效果
<sub>下标字指数
<sup>下标字下标字
清单标记
<ol>顺序清单清单项目将以数字、字母顺序排列
<ul>无序清单清单项目将以圆点排列
<li>清单项目每一标记标示一项清单项目
<menu>选单清单清单项目将以圆点排列,如<ul>反对
<dir>目录清单清单项目将以圆点排列,如<ul>反对
<dl>定义清单清单分两层出现
<dt>定义条目标示该项定义的标题
<dd>定义内容标示定义内容
表格标记
<table>表格标记设定该表格的各项参数
<caption>表格标题做成一打通列以填入表格标题
<tr>表格列设定该表格的列
<td>表格栏设定该表格的栏
<th>表格标头相等于<TD>,但其内之字体会变粗
表单标记
<form>表单标记决定单一表单的运作模式
<textarea>文字区块提供文字方盒以输入较大量文字
<input>输入标记决定输入形式
<select>选择标记建立 pop-up 卷动清单
<option>选项每一标记标示一个选项
图形标记
<img>图形标记用以插入图形及设定图形属性
连结标记
<a>连结标记加入连结
<base>基准标记可将相对 URL 转绝对及指定连结目标
框架标记
<frameset>框架设定设定框架
<frame>框窗设定设定框窗
<iframe>页内框架于网页中间插入框架IE
<noframes>不支援框架设定当浏览器不支援框架时的提示
影像地图
<map>影像地图名称设定影像地图名称
<area>连结区域设定各连结区域
多媒体
<bgsound>背景声音于背景播放声音或音乐IE
<embed>多媒体加入声音、音乐或影像
其他标记
<marquee>走动文字令文字左右走动IE
<blink>闪烁文字闪烁文字NC
<isindex>页内寻找器可输入关键字寻找于该一页反对
<meta>开头定义让浏览器知道这是 HTML 文件
<link>关系定义定义该文件与其他 URL 的关系
StyleSheet
<style>样式表控制网页版面
<span>自订标记独立使用或与样式表同用

  • 表示该标记属围堵标记,即需要关闭标记如 </标记>.
  • 表示该标记属空标记,即不需要关闭标记.
  • IE 表示该标记只适用于 Internet Explorer.
  • NC 表示该标记只适用于 Netscape Communicator.
  • 反对 表示该标记不为 W3C 所赞同,通常这标记是 IE 或 NC 自订,且己为众所支 持,只是 HTML 标准中有其它同功能或更好的选择.
  • 弃用 表示该标记己为 W3C 所弃用,是过时的标记,但 HTML 具向下兼容的特 性,不用担心新浏览器不支援旧标记.
  • 表示该标记是 HTML 4.0 中新增的.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值