HTML+CSS入门 HTML小白学习
沉沙 2018-08-24 来源 : 阅读 850 评论 0

摘要:本篇教程介绍了HTML+CSS入门 HTML小白学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门 HTML小白学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

<


网页三部份内容:HTML CSS Javascript
路径:一般做网页的时候用的相对路径。
images/aaa.jpg  网页同一个目录中找images文件夹,再在images里面找aaa.jpg
images/1000/aaa.jpg 网页同一个目录中找images文件夹,再在images里面找1000文件夹,再在1000文件夹中找aaa.jpg
../images/aaa.jpg 找网页上一级文件,在网页上一级文件夹中找images文件夹,在images文件夹中找aaa.jpg
../../images/aaa.jpg 找网页上两级文件,在网页上两级文件夹中找images文件夹,在images文件夹中找aaa.jpg

一、body:
bgcolor
background
topmargin
rightmargin
bottommargin
leftmargin
body以上的属性仅做了解。

二、标签:
(一)基本标签:
1.格式控制:
<font face="字体名称" color="颜色" size="大小"></font> 字体
<b></b>加粗 <strong></strong>
<i></i>倾斜 <em></em>
<u></u>下划线
<br> 
<pre></pre> <center></center>
转义:——需要记住
 ——空格
<——小于号 <
>——大于号 >
&——&
© ——©

2.内容容器:
<h1></h1> ...<h6></h6>  ——标题。默认情况下,加粗,独立一行
<p></p> ——段落。独立一段,默认情况下,段落前后都会有一行大小的空白。

<div></div>——区域标签,层标签。用来划分网页区域,进行页布局。前后换行。
<span></span>——区域标签,层标签。前后不换行。


<ul></ul>——无序列表标签。
<ol></ol>——有序列表标签。
<li></li>——列表项标签,用来放在ol或ul里面的。

(二)常用标签:
1. 超链接
<a href="超链接的路径" target="_blank">超链接显示的内容</a>
书签:
第一步:定义书签 <a name="书签名">内容</a>
第二步:定义超链接 <a href="页面名#书签名">超链接文字</a>

2.图片
<img src="路径(相对)" width="" height="" />

3.图片超链接
<a href="超链接的路径"> <img src="图片路径"/> </a>


(三)表格:
<table></table>
 bgcolor:背景色。
 align:表格在页面中的对齐方式。
 width:宽  像素,百分比。
 border:边框宽度
 cellpadding:边距
 cellspacing:间距

<tr></tr>
 bgcolor:背景色
 align:这一行中的文字的对齐方式
 height:高度,一般是像素,也可设百分比。

<td></td>
 bgcolor:背景色
 align:水平对齐
 valign:竖直对齐
 width:宽
 height:高
 colspan:列的跨度。
 rowspan:行的跨度。
 注意:合并单元格的时候,一定要算好格好。
(四)表单:
<form id="" name="" action="" method=""></form>
所有表单元素都具备的属性:id,name,disabled
1.文本类
单行文本框:<input id="" name="" type="text" value="内容"/>
多行文本框:<textarea id="" name="" rows="行数" cols="列数">内容</textarea>
密码框:<input id="" name="" type="password" value="内容"/>
隐藏域:<input id="" name="" type="hidden" value="内容"/>
2.按钮类
普通按钮:<input id="" name="" type="button" value="按钮上的文字"/>
提交按钮:<input id="" name="" type="submit" value="按钮上的文字"/>
重置按钮:<input id="" name="" type="reset" value="按钮上的文字"/>
图片按钮:<input id="" name="" type="image" src="图片的路径" width="宽" height="高"/>
3.选择类
单选:<input id="" name="组名" type="radio" value="运算的值"chacked="chacked"><label for="id的名称">名称</lable>
复选:<input id="" name="组名" type="cheskbo x" value="运算的值"chacked="chacked"><label for="id的名称">名称</lable>
下拉列表:
<select id="" name="" >
<option value="1">内容</option>
<option value="2">内容</option>
<option value="3">内容</option>
<select>
列表:
<select id="" name="" size=""multiple="multiple">
<option value="1">内容</option>
<option value="2">内容</option>
<option value="3">内容</option>
<select>
文件:
<input id="" name="" type="file"


(五)框架:
超链接制定目标页面显示在哪个框架中

<frameset rows="100,*" cols="100,*" frameborder="no">  -- frameset替换了body  cols左右分 rows上下分 分割四块    frameborder="no"去掉分割线
 <frame src="#" />   
     <frame src="#" />         
        <frame src="left.html" noresize="noresize" />          --在第三个框架显示left.html的内容 在left.html超链接处不要忘加tardet=mframe   --noresize="noresize"--禁止窗口调整大小
        <frame src="1.html" name="mframe"  scrolling="no"/>   --显示为1.html的内容 必须给第四个框架赋名         -- scrolling="no"  取消显示滚动条
</frameset> 
</html>
<iframe src="其他页面的网址" width="" height="" frameborder="0" scrolling="no"></iframe>       --frameborder="0" scrolling="no"宽高设为0页面不显示 后台存在一个页面

 
   

本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved