码迷,mamicode.com
首页 > Web开发 > 详细

html基础知识

时间:2017-12-22 00:33:14      阅读:296      评论:0      收藏:0      [点我收藏+]

标签:目标   title   dmi   start   去掉   资讯   har   size   数值   

一、web标准

web标准是网页制作的标准,它是由一系列标准组成的,主要包含三个方面:

结构(html,xhtml),表现(css),行为(javascript)

其中结构和表现的标准由w3c制定,行为标准由ECMA制定

w3c—万维网联盟

ECMA—欧洲电脑厂商联合会

二、html相关概念

1.html—超文本标记语言

2.xhtml—可扩展的超文本标记语言

3.html5—html的第五次重大修改

注:html和xhtml的区别:

xhtml相对于html并没有增加新的标签,只是语法要求更加严格,比如:

标签必须闭合,标记名称必须小写等

三、dw常用快捷键

1.ctrl+n 新建文件

2.ctrl+u 打开首选参数面板

3.ctrl+s 保存

4.F12 预览网页

5.F4 显示或隐藏文件面板

6.ctrl+z 撤销

7.ctrl+y 恢复

8.ctrl+f 查找

9.ctrl+g 快速跳转到第几行

10.ctrl+tab 编辑窗口切换

四、html基本结构

1.文档声明

作用:告知浏览器文档使用哪种 HTML 或 XHTML 规范

html5的文档声明: <!DOCTYPE html>

2.html是网页的根元素或根标签,所有的网页内容和标签都放在html标签之间

语法: <html></html>

3.html包含了两大部分:head部分和body部分

head部分:一般设置meta头元素或引入一些外部的css文件,js文件等以及关键词,描述

设置字符编码:

<meta charset="utf-8"/> 防止网页出现乱码

其他编码格式:gb2312,gbk

body部分:所有要在网页中显示的内容及放置内容的标签都放在body部分

五、html基本语法

1.常规标记

语法: <标记 属性="属性值" 属性="属性值"></标记>

eg: <div class="box" id="main"></div>

2.空标记

语法: <标记 属性="属性值" />

eg: <img src="1.jpg"/>

注:a)属性和属性值用等号连接,属性值要放在双引号中(所有标点符号都必须是英文状态下的)

b)标记名称全部使用小写

c) 属性和属性之间用空格隔开,不分先后顺序

六、html常用标记

1.网页标题

语法: <hx>网页标题内容</hx> (x为1-6)

eg: <h3>千锋教育</h3>

2.段落文本

语法: <p>段落文本内容</p>

3.空格

html转义字符: &nbsp;

注:常用其他转义字符:

">" &gt;

"<" &lt;

4.强制换行

语法: <br/> (空标记)

5.加粗

语法: <strong>加粗文本内容</strong>

<b>加粗文本内容</b>

6.倾斜

语法:<em>倾斜文本内容</em>

<i>倾斜文本内容</i>

7.水平分隔线

语法: <hr/>

8.上标和下标

语法: <sup></sup> 上标

<sub></sub> 下标

9.无序列表

语法: <ul>
<li>aaa</li>
<li>bbb</li>
...
</ul>

10.有序列表

语法: <ol type="A" start="2">
<li>aaa</li>
<li>bbb</li>
...
</ol>

注:type用来设置序号的类型,可以设置A,a,i,I,1

start用来设置从几开始

11.自定义列表

语法: <dl>
<dt>A</dt>
<dd>a1</dd>
<dd>a2</dd>
...
<dt>B</dt>
<dd>b1</dd>
<dd>b2</dd>
...
</dl>

注:dt和dd是并列关系

在dl中可以存在多组dt,dd,每组中只能存在一个dt,可以存在多个dd

--------------------------------------------------------------

相对路径的三种写法:

1.当当前文件和目标文件在同一目录下,写法如下: 目标文件名+扩展名

2.当当前文件和目标文件所处文件夹在同一目录下,写法如下: 目标文件所处文件夹名/目标文件名+扩展名

3.当当前文件所处文件夹和目标文件所处文件夹在同一目录下,写法如下:../目标文件所处文件夹名/目标文件名+扩展名

注:../是指返回到上一级目录

----------------------------------------------------------------

12.图片

语法: <img src="图片路径" width="数值" height="数值" alt="替换文本" title="提示文本"/>

注:alt和title的区别

title是当鼠标悬停在图片上时要显示的提示信息

alt是当图片由于某些原因无法正常加载时要显示的替换信息

13.超链接

语法:<a href="链接地址或链接文件" target="_blank" title="提示信息">链接文本或图片</a>

注: target属性用来设置超链接是否在新窗口打开

target="_blank" 链接在新窗口打开

target="_self" 默认值,在本窗口打开

注:空链接 <a href="#">新闻资讯</a> (跳转到页面的顶部)

14.表格

作用:显示数据

语法: <table border="1" cellspacing="0" cellpadding="0">
<tr height="30">
<td width="100" align="center">a</td>
<td width="150">b</td>
</tr>
...
</table>

注:表格相关属性:

(1)border 设置边框的宽度

(2)cellspacing 设置单元格之间的间距

(3)cellpadding 设置内容和单元格之间的空隙

(4)align="left|center|right" 设置单元格内容的对齐方式

(5)width 设置单元格的宽度

(6)height 设置单元格的高度或者tr的高度

(7)colspan="数值" 合并列(给td加)

(8)rowspan="数值" 合并行(给td加)

八、表单

作用:用来搜集用户信息

语法:<form method="" action=""></form>

注:所有的表单控件都要放在form标签之间

1.文本框

语法: <input type="text" value="admin" name="username"/>

注:value用来设置默认值

name属性主要供后端获取输入的内容或信息

2.密码框

语法:<input type="password"/>

3.提交按钮

语法: <input type="submit" value="登录"/>

注:提交按钮的默认value值为提交或提交查询,可重新设置需要的value值

4.重置按钮

语法: <input type="reset"/>

5.单选按钮

语法:<input type="radio" name="***" checked="checked"/>

注:使用单选按钮时,一组中的单选按钮必须添加一致的name属性值,才能实现多选一的效果

设置checked属性可以实现页面加载完成后添加默认选中状态

当属性和属性值相同时,可以省略属性值,如checked="checked" 可以简写为checked

6.复选框(复选按钮)

语法:<input type="checkbox" checked disabled/>

注:checked属性主要应用在单选和复选按钮上

disabled属性用来设置input控件的禁用状态

7.下拉列表

语法: <select>
<option>a</option>
<option selected>b</option>
...
</select>

注:selected用来设置下拉列表的默认选中项

8.文本域

语法:<textarea cols="字符宽度" rows="行数"></textarea>

扩展:禁止用户通过拖拽改变文本域的大小

textarea{resize:none;}

9.普通按钮

语法:<input type="button" value="***"/>

注:普通按钮不具备提交的功能,通常结合js使用

普通按钮默认value值为空,可以重新设置value属性

-----------------------------------------------------------------

form标签上的相关属性解释:

1.method 用来设置数据传送方式,一般为get和post方式

注:get和post的区别

a)get用来获取服务器的数据,post用来向服务器发送数据

b)get安全性比较低,post安全性更高

c)get可以传送的数据量较小,post可以传送的数据量较大

2.action 用来设置数据要发送到的位置,一般为后端文件

eg: <form method="get/post" action="http://www.qfedu.com/index.php"></form>

九、div

作用:在布局网页时用来划分板块

语法: <div></div>

十、span

语法: <span></span>

注:span没有固定的表现格式,只有在对它应用样式时,才会产生视觉上的差异

span可以实现将文本的某一部分独立出来

十一、iframe框架

语法: <iframe src="3.表单.html" width="500" frameborder="0" scrolling="auto"></iframe>

注:width:iframe框架的宽度

height:iframe框架的高度

frameborder 设置iframe框架的边框

scrolling = "no" 隐藏(去掉)iframe的滚动条

五、html注释

语法: <!--注释内容-->

html基础知识

标签:目标   title   dmi   start   去掉   资讯   har   size   数值   

原文地址:http://www.cnblogs.com/witkeydu/p/8082826.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!