预览加载中，请您耐心等待几秒...

HTML+CSS+JS.docx

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共47页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

HTML+CSS+JS HTML html简介 一、什么是html: 1.HTML:(HyperTextMarkupLanguage)超文本标记语言。 二、常见的扩展名: .txt记事本 .jpg/.png图片 .doc/.docxword文档 .xls/.xlsxExcel表格 .pptPPT .exe应用程序 .zip/.rar压缩包 .avi/.rmvb/.mp4视频 .mp3音频 三、HTML的基本结构: <html> <head> <title>TFBOYS直播间</title> </head> <body> TFBOYS--左手右手一个慢动作，右手左手慢动作重播。 </body> </html> 常见标签 标题标签<hn></hn> 1.标题标签:<hn></hn>n:代表1~6 <h1>这是标题1</h1> <h2>这是标题1</h2> 特性： 字体加粗、自动换行、默认有行高（会跟字体前后保持距离） 标题（Heading）是通过<h1>-<h6>等标签进行定义的。 <h1>定义最大的标题。<h6>定义最小的标题。 2.居中属性(CSS替代)： 标题居中：<hnalign="left(居左)/center(居中)/right(居右)"> 3.添加背景色：bgColor="red/blue" 段落标签<p></p> 特性： 自动换行、p元素会自动在其前后创建一些空白。 <p>这是段落。</p> <p>这是段落。</p> <p>这是段落。</p> <p>段落元素由p标签定义。</p> 换行标签:<br/> <br>可插入一个简单的换行符。 <p> Tobreak<br>lines<br>ina<br>paragraph,<br>usethebrtag. </p> 水平线标签:<hr/> <hr>标签在HTML页面中创建一条水平线。 水平分隔线（horizontalrule）可以在视觉上将文档分隔成各个部分。 <h1>Thisisheader1</h1> <hr/> <p>Thisissometext</p> 列表标签 有序标签 1、结构： <ol> <li>卜鹏</li><li>田璐</li> <li>欧阳春</li> </ol> 2.属性： type: 1===>有序以数字开头 i===>有序以罗马i开头 I===>有序以罗马I开头 a===>有序以字母a开头 A===>有序以字母A开头 无序标签 1、基本结构 <ul> <li>卜鹏</li> <li>田璐</li> <li>欧阳春</li> </ul> 2.属性： type: circle(圆形)|disc(实心圆)|square（方块） 图片标签 1、图片标签 <imgsrc="1.jpg"/> 1)src指定的路径特点: 1.会在当前目录下为基点，去找图片 2.如果图片在当前目录的img文件夹里面。src="img/xxx.jpg" 3.如果图片在当前目录的上一级目录。src="../xxx.jpg" 2)设置图片大小width="200"height="400" 3)图片和文字同时出现的时候，我们希望文字出现在图片的中间。 方案1：在img标签中添加一个align="center",只有一行文字的时候是OK的。 方案2：align="left"，文字居中，可以使用<br/> 4)鼠标移到图片上，有文字提示信息。title="提示信息" 5)当图片不存在的时候的提示信息。alt="您找到图片不存在" <imgalt="您找到图片不存在"src="1.jpg"/> 6)去掉图片的默认边框：border="0" <imgborder="0"src="1.jpg"/> 超链接标签 一、超链接标签：<a></a> 1)指定要跳的网址：<ahref="http://www.baidu.com"></a> 当我们要跳到别人的网址的时候要重点注意：加http:// 当我们要跳到自己的网址的时候，不写http://，跳自己网址的规则跟找图片的规则一致。 2)要求新开一个选项卡： target="_self"(默认，自身打开页面), target="_blank"(新开一个页面), target="_top" target="framename"(用于框架集) 3)使用图片做超链接：<atarget="_blank"href="http://www.baidu.com"><imgsrc="1.jpg"></a> 二、a标签和Name属性,做页内跳转。 <ahref="http://www.w3school.com.cn/html/html_links.asp#tips"> JumptotheUsefulTipsSection </a>