初学前端必背前端HTML基础

一、 WEB标准的组成

W3C制定的结构和表现的标准;
结构:(xhtml ,xml)
表现:(css)
ECMA制定的行为的标准;
行为 (DOM ,ECMASCRIPT)

结构和表现标准:

(1)W3C( World Wide Web Consortium )万维网联盟,创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。(制定了结构和表现的标准,非赢利性的。)
(2)行为标准:DOM,ECMASCRIPT(ECMA制定的)欧洲电脑场商联合会。

二、Dreamweaver(网页制作) 基本功能

   1)新建(ctrl+n),打开(ctrl+o), 保存        (ctrl+s)
   2)预览页面 (F12快捷键)
   3)建立站点


 CTRL+U(首先参数)里可以更改代码里的代码文字大小
F4隐藏显示所有面版

三、 调试工具 -浏览器

1)PC端调试工具的使用 -浏览器
测试浏览器(chrome,ie,firefox)
2)移动端调试工具chrome可以测试移动端页面(有很多模拟器)

四、 HTML及相关概念的介绍

   HTML 指的是超文本标记语言 (Hyper Text Markup Language)
   XHTML指可扩展超文本标记语言(标识语言)(EXtensible HyperText Markup Language)
   HTML5指的是HTML的第五次重大修改(第5个版本)

(HTML5 是 W3C 与 WHATWG 合作的结果)
WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

五、HTML5 基本结构 (新建一个html文件时默认有那些代码)

<!doctype html>命名文档类型

说明我们写的是标记语言 文件头部 编码格式 html5文件标题(显示在状态栏上的内容) 文件主体(所有要写的内容)

文件命名规则:用英文,不用中文
名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;必须以英文字母开头。

六、 HTML基本语法

1、<常规标记>
<标记 属性=“属性值” 属性=“属性值”></标记>

2.空标记
<标记 属性=“属性值” />

说明:
1.写在<>中的第一个单词叫做标记,标签,元素。
2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”号内。
3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
4.空标记没有结束标签,用“/”代替。

七、 XHTML常用标记

1)文本标题(h1-h6)

<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>

效果:

一级标题

二级标题

...
六级标题

八、正文有两种形式(段落文本和文字列表)

2) 段落(p)

<p>段落文本内容</p>

标识一个段落(段落与段落之间有段间距)
3)空格 ( )
&nbsp;1233333(所占位置没有一个确定的值,这与当前字体字号都有关系.
效果:
1233 333

4)加粗
加粗有两个标记

1.<b>加粗内容</b>
2.<strong>加粗内容</strong>

效果:
加粗内容
加粗内容

5)倾斜
倾斜标记

<em>1111</em>
<i>2222</i>

效果:
1.1111
2,2222

6) 换行(br)

<br />

换行是一个空标记(强制换行)

7)水平线
<hr />空标记
效果:


8)列表(ul,ol,dl)
HTML中有三种列表,分别是:无序列表,有序列表,自定义列表
*无序列表
无序列表组成:

<ul>
<li></li>
<li></li>
<li></li>
......
</ul>

效果:

  • ......

*有序列表
有序列表组成:

<ol>
<li></li>
<li></li>
<li></li>
......

</ol>

效果:

  1. ......

扩展内容
有序列表的属性
type:规定列表中的列表项目的项目符号的类型
语法:<ol type="a"></ol>
1 数字顺序的有序列表(默认值)(1, 2, 3, 4)。
a 字母顺序的有序列表,小写(a, b, c, d)。
A 字母顺序的有序列表,大写(A,B,C,D)
i 罗马数字,小写(i, ii, iii, iv)。
I 罗马数字,大写(i, ii, iii, iv)。
start 属性规定有序列表的开始点。
语法:<ol start="5"></ol>

*自定义列表

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

</dl>

效果:

名词
解释
......

9)插入图片

<img   src="目标文件路径及全称"     alt="图片替换文本"     title="图片标题" />

注:所要插入的的图片必须放在站点下

*相对路径的写法:
1)当当前文件与目标文件在同一目录下,直接书写目标文件文件名+扩展名;
2)当当前文件与目标文件所处的文件夹在同一目录下,写法如下:
文件夹名/目标文件全称+扩展名;
3)当当前文件所处的文件夹和目标文件所处的文件夹在同一目录下,写法如下:
…/目标文件所处文件夹名/目标文件文件名+扩展名

title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的
alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方。

10)超链接的应用
语法:

<a   href="目标文件路径及全称/连接地址">链接文本/图片</a>
<a href="#"></a>空链接

属性:target:页面打开方式
属性值:_blank 新窗口打开

<a href="#" target="_blank">新窗口打开</a>

11) 数据表格的作用及组成
作用:显示数据

<table width="value" height="value" border="value" bgcolor="value"
 cellspacing="value" cellpadding="value">
<tr>
     <td></td>
    <td></td>
</tr>
</table>

注:个tr表示一行;一个td表示一列(一个单元格)

*数据表格的相关属性
1)width=“表格的宽度”
2)height=“表格的高度”
3)border=“表格的边框”
4)bgcolor=“表格的背景色”
5)cellspacing=“单元格与单元格之间的间距”
6)cellpadding=“单元格与内容之间的空隙”

7)水平对齐方式:align=“left/center/right”;

8)合并单元格属性:
colspan=“所要合并的单元格的列数"合并列;

一行
一行 一行

rowspan=“所要合并单元格的行数”合并行;
一行 一行
一行

12) 表单的应用
表单的作用:用来收集用户的信息的;

1、表单框

<form name="表单名称" method="post/get"  action="">
</form>

1)文本框

<input type="text" value="默认值"/>

2)密码框

<input type="password" />

3)提交按钮

<input type="submit" value="按钮内容" />

4)重置按钮

<input type="reset" value="按钮内容" />

5)单选框/单选按钮

<input type="radio" name="ral"/>
<input type="radio" name="ral" checked="checked" />(默认选中;)

单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。

6)复选框

<input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled" />

(disabled=“disabled” :禁用)
(checked=“checked” :默认选中)

7)下拉菜单

<select    name="">
         <option>菜单内容</option>
</select>

8)多行文本框(文本域)

<textarea name="textareal" cols="字符宽度" rows="行数">
</textarea>

9)按钮

<input   name="'"   type="button" value=“按钮内容” />

(他和submit的区别是 ,submit是提交按钮 起到提交信息的作用,button只起到跳转的作用,不进行提交。)

13)div的用法

<div id="id名"/class="class名"></div>

文档区域,文档布局对象

14) span的用法
<span></span>文本结点(某一小段文本,或是某一个字)

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Html 5 标签(按照英文字母a~z顺序排列): 1、<!--...--> 定义注释。 2、<!DOCTYPE> 定义文档类型。 3、<a> 定义超链接。 4、<abbr> 定义缩写。 5、<address> 定义地址元素。 6、<area> 定义图像映射中的区域。 7、<article> 定义外部的内容。 8、<aside> 定义article 以外的内容。 9、<audio> 定义声音内容。 10、<b> 定义粗体文本。 11、<base> 定义页面中链接的基准 URL。 12、<bdo> 定义文本显示的方向。 13、<blockquote> 定义摘自另一个源的块引用。 14、<body> 定义文档主体。 15、<br> 定义换行符。 16、<button> 定义按钮。 17、<canvas> 定义图形。 18、<caption> 定义表格标题。 19、<col> 定义表格列的属性。 20、<colgroup> 定义表格列的分组。 21、<command> 定义命令按钮。 22、<datalist> 定义下拉列表。 23、<dd> 定义定义的描述。 24、<del> 定义删除文本。 25、<details> 定义元素的细节。 声明:本电子书内容源于网络,所有内容仅供测试, 不保证内容的正确性! HTML 5中文参考手册 由夏天(博客:www.xiatianhk.com)收集并整理 26、<div> 定义文档中的一个部分。 27、<dl> 定义定义列表。 28、<dt> 定义一个定义列表里的项目。 29、<embed> 定义外部交互内容或插件。 30、<fieldset> 可将表单内的相关元素分组。 31、<figcaption> 定义 figure 元素的标题。 32、<figure> 定义媒介内容的分组。 33、<footer> 定义section/page的页脚。 34、<form> 定义表单。 35、<h1> --- <h6> 定义标题 1 到标题 6。 36、<head> 定义关于头部文档的信息。 37、<header> 定义文档的页眉。 38、<hgroup> 定义文档中的 section 信息。 39、<hr> 定义水平线。 40、<html> 定义 html 文档。 41、<i> 定义斜体文本。 42、<iframe> 定义行内的子窗口(框架)。 43、<img> 定义图像。 44、<input> 定义输入域。 45、<ins> 定义插入文本。 46、<keygen> 定义生成密钥。 47、<label> 定义表单控件的标注。 48、<legend> 定义 fieldset 中的标题。 49、<li> 定义列表的项目。 50、<link> 定义资源引用。 51、<map> 定义图像映射。 声明:本电子书内容源于网络,所有内容仅供测试, 不保证内容的正确性! HTML 5中文参考手册 由夏天(博客:www.xiatianhk.com)收集并整理 52、<mark> 定义有记号的文本。 53、<menu> 定义菜单列表。 54、<meta> 定义元信息。 55、<meter> 定义预定义范围内的度量。 56、<nav> 定义导航链接。 57、<noscript> 定义 noscript 部分。 58、<object> 定义嵌入对象。 59、<ol> 定义有序列表。 60、<optgroup> 定义选项组。 61、<option> 定义下拉列表中的选项。 62、<output> 定义输出的一些类型。 63、<p> 定义段落。 64、<param> 为对象定义参数。 65、<pre> 定义预格式化文本。 66、<progress> 定义任何类型的任务的进度。 67、<q> 定义短的引用。 68、<rp> 定义非ruby显示的内容。 69、<rt> 定义 ruby 注释的解释。 70、 <ruby> 定义 ruby 注释。 71、<script> 定义脚本。 72、<section> 定义文档中的节(section)。 73、<select> 定义可选列表。 74、<source> 定义媒介源。 75、<span> 定义文档中的节元素。 76、<style> 定义样式定义。 77、<sub> 定义下标文本。 声明:本电子书内容源于网络,所有内容仅供测试, 不保证内容的正确性! HTML 5中文参考手册 由夏天(博客:www.xiatianhk.com)收集并整理 78、<summary> 定义 details 元素的标题。 79、<sup> 定义上标文本。 80、<table> 定义表格。 81、<tbody> 定义表格的主体。 82、<td> 定义表格单元。 83、<textarea> 定义 textarea。 84、<tfoot> 定义表格的脚注。 85、<th> 定义表头。 86、<thead> 定义表头。 87、<time> 定义日期/时间。 88、<title> 定义文档的标题。 89、<tr> 定义表格行。 90、<ul> 定义无序列表。 91、<video> 定义视频。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

野猪佩奇007

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值