[html/css]---001

非专业做web前端人员,如有错误,请多多指正,下面开始介绍html/css的最基础内容。

一、html超文本标记语言同xml一样是一种标记语言而非编程语言,html拥有一套完整的标记标用于描述网页上不同的控件。下面简单说明一下不同的标签控件。

标签名称-----标签书写

1、文本显示类:

    标题-----<h1><h2><h3><h4><h5><h6>

    段落-----<p>

    行内元素----<span> 常嵌套与段落之内

    折行-----<br/>

    背景颜色-----<body bgcolor=”yellow”>

    粗体-----<b>

    粗体-----<strong>+强调

    斜体-----<i>

    斜体-----<em>+强调

2、列表显示类:

    无序-----ul 无序列表ul+li内容

    有序-----ol 有序列表ol+li内容

    数据-----dl 数据列表dl+dt标题+dd内容

3、表格显示类:

    表格定义-----table

    表格标题-----<caption>表格标题</caption>

    表格行-----tr

    表格表头-----th

    表格数据-----td

    水平对齐-----align:center、left、right、justify(对行进行伸展,这样每行都可以有相等的长度)

    垂直对齐-----valign:top、middle、buttom、baseline(与基线对齐)

    表格宽占比-----width

    跨行-----rowspan

    跨列-----colspan

    单元格边框到表边框距离-----cellspacing 通常设置为0即可

    单元格数据到单元格边框距离-----cellpadding

    表格线条宽度-----border

    表格线条颜色-----bordercolor

    表格背景色-----bgcolor

   

4、链接跳转类:

    网页链接-----<a herf=”http://www.baidu.com”>网页标题</a>  切记要添加协议体http

    邮件链接-----<a herf=”mailto:xxx@yyy”>

    新窗口链接-----<a herf=”url” target=”_blank”>

5、表单交互类:

    表单定义-----form

    表单分组-----fieldset

    表单分组标题-----legend

    1>表单输入标签(value输入类)

        <input type=”text” name=””>

        <input type=”password” name=””>

    2>表单选择标签(value选择类)

         单选-----<input type=”radio” name=”” value=”” checked=”checked”/>名称

         多选-----<input type=”checkbox” name=”” value=”” checked=”checked”/>名称

         选择器-----<select name=“”>

         选项分组-----<optgroup label="小组标题"/>

         选项-----option

    3>表单文本标签

         <textarea rows=”” cols=””></textarea>

    4>表单文件标签

         <intput type=”image” src=””/>

         <input type=”file” name=””/> //上传:<input type=”file” name=”upload” style=”width:500px”/>

    5>表单操作标签(表单操作类无需name,表单输入类无需value)

         提交-----<input type=”submit” value=””> 对submit的事件监听在form表单的action属性中

         重置-----<input type=”reset” value=””>

         按钮-----<input type=”button” value=”” onclick=”javascript”> 对button事件的监听在onclick的javascript语句中

6、框架frameset

     框架集-----frameset

     框架-----frame 框架frame需指明两个属性src用于确定此frame对应的html文件、name用于在 JavaScript 中引用元素,或者作为链接的目标

     cols定义框架集中竖向列包含几个frame以及每一个frame所占框架集的比例。

     rows定义框架集合中横向行包含几个frame以及每一个frame所占框架的比例。

     cols、rows两个属性,用于分割框架集,指明框架集中包含的框架frame个数,以及每个frame框架所占列(cols)、宽(rows)的比例。每一个frame即为一个单独的html文件。

二、CSS用于同时控制多html网页的样式和布局

     先说CSS的结构

     选择器:  选择器名称 声明集(声明集由大括号{})如图:选择器

     技术分享

                   图:选择器

 

---未完待续

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。