五月四日 HTML基础,通用标签

HTML即超文本标记语言(Hyper Text Mark Language),是用于创建网页的标准标记语言,分静态页面(html)和动态页面(.php .asxp .jsp,分别由PHP,.NET,JAVA创建)。目前已经有HTML5,而比较常用的是HTML4。

常用的IDE(代码编辑器)有Visual Studio(全面),HBuilder(主要用于前端开发),Dreamweaver(比较古老,适合新手),Webstorm(号称最好用的写前端)。

一、HTML的基础语法:

(1)标签:html最小单位,就是标签,分双标签和单标签。双标签一般用来标记某些内容,格式为<标签名 属性1="属性值1" 属性2="属性值2">内容</属性名>。单标签一般起控制作用,格式为<标签名 属性1="属性值1" 属性2="属性值2" />

(2)结构:<!DOCTYPE html>  文本类型:html

<html>开始结束标记

  <head>

    <mate charset="utf-8">编码格式,常用的有三种utf-8(世界通用),GB2312(国家标准),GBK(GB2312扩容)。

    <title>标题</title>

  </head>标签页标题

  <body>主体内容</body>

</html>

(3)调试。网页可以直接在浏览器中显示的内容上右键点检查(谷歌浏览器)定位代码并修改。

二、通用标签:

(1)body的属性:

  <body bgcolor="背景颜色"  text="文本颜色" margin="页边距">

    <img src="图片路径" width="宽度" height="高度">图片标签  路径分相对路径(以当前文件为基点算起),绝对路径(以当前计算机根目录为基点算起,不要用)。相对路径表示方法:../文件名:上一级目录; ./(也可以不写)文件名: 当前目录; 文件夹名/文件名:下级目录;/文件夹/文件名:根目录

    <a href="网址/本地目录的网页" target="_blank">超链接</a>  target常用属性值有两个,_blank是在新的空白标签页中打开,_self是在当前标签页中打开。超链接也可以做成锚点和下载地址。

  </body>通常很少直接在body里加属性。

(2)格式控制类标签

  <font size="大小" face="字体" color="颜色">文本</font>  font在html4中已经不被赞成使用,在编写过程在通常采用样式代替。

  <b>加粗</b><strong>加粗</strong> 效果一致

  <i></i>倾斜<em>倾斜</em>效果一致

  <u>下划线</u>                       加粗倾斜下划线标签使用较少,用样式表代替。

  <h1>一级标题</h1>    每一级标题

  <h2>二级标题</h2>    相对上一级    标题单独占一行

  <h3>三级标题</h3>    字体会变小

  <p>段落</p>  单独占一行  段落之间会空一行

  <span>层标签</span> 单独使用无效果,可以用来单独标记某些文字,让文字呈现不同的效果。

  <div>层标签</div>配合样式表使用,代替table布局。单独占一行

扩展内容:

  <del>这不是重点,删掉</del> <sup>右上角标</sup>  <sub>右下角标</sub> <mark>这才是重点,标记一下</mark>

(3)表格标签

  <table border="表格边框线粗细" width="表格宽度" height="表格高度" gbcolor="表格背景色">背景色通常用颜色代码表示 例如#0000FF是蓝色

    <tr height="行高">行一   不同行的高度可以不同

      <td width="列宽" rowspn="跨行,跨一行后会覆盖行二的列一">列一</td>   同一列的宽度一样 不允许错位

      <td colsapn="跨列,跨一列后会覆盖列三">列二</td>

      <td bgcolor="表格单元格颜色,优先级高于表格颜色">列三</td>  优先级问题会经常遇到,作为文本语言,按阅读顺序靠后的优先级高

    </tr>

    <tr>行二

      <td align="水平方向">列一</td>    水平方向分 left,center,right三种

      <td valign="垂直方向">列二</td>  垂直方向分top,middle,bottom三种

      <td>列三</td>

    </tr>

    <thead>  表头,增加代码可读性,相当于页眉。

      <td>表头</td>

      <th>标题</th> 相当于样式中的居中和加粗,更加简便。只占一个单元格

    </thead>

    <tfoot>  表脚,增加代码可读性,相当于页脚。

      <td>表脚</td>

    </tfoot>

  </table> 表格无法错位,需要错位时在表格里套表格,不常用。

三、练习内容。今天课上的练习内容。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
             <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title>我是标题</title>
    </head>

    <body bgcolor="grey" text="black" >
        1234567890
        <img src="img/tu1.jpg" width="242" height="273" />
        <a href="http://www.baidu.com">百度</a>
        <a href="./testpage.html" target="_blank">超级链接</a>
        <i>倾斜</i>
        <em>倾斜</em>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <p>这是一段话</p>
        <p>这又是一段话</p>
        <span>啦啦啦</span><span>嘿嘿嘿</span>
        <div>哈哈哈</div>
        <del>今天晚上没作业</del><sup>真的?</sup><sub>骗你的哈哈哈</sub>
        <mark>这里是重点</mark>
        <br />
        <center>在中间</center>
        <table border="1" width="400" height="300"bgcolor="green">
            <tr height="200">
                <td width="100" rowspan="2" align="right" valign="bottom" >1</td>
                <td width="300" colspan="2">2</td>

            </tr>
            <tr height="100">

                <td bgcolor="yellow">b</td>
                <td>c</td>
            </tr>
            <thead>
                <th>头</th>
                <td>头</td>
            </thead>
            <tfoot>
                <td>脚</td>
            </tfoot>
        </table>
    </body>
</html>

效果图:

  

后记:

写完看了一眼时间,没想到已经晚上十一点多了,完全没感觉到时间的流逝啊,挺充实的,感觉真好。

时间: 2024-12-25 08:08:35

五月四日 HTML基础,通用标签的相关文章

父母之颂

自传44.在佳木斯市委党校十二1----父母之颂 一九九六年九月我在佳木斯市委党校经济学教研室工作十二学年.钰香妻在市委党校教务处评为校先进工作者小女儿还在商店上班. 儿子在市建行工作儿媳在市农行工作小孙女两岁半在幼儿园托养.大女儿在第五中学任语文教师和班主任工作一帆风顺并成绩优先. 九月三日我讲市场经济与股份经济30学时汤原县委组织部班5天.九月十日是教师节我们全体教师到郊区四丰山野游照像赏水爬山.九月十六日我讲社会主义市场经济体制8学时县处班机关班中青班.九月十九日后我讲市场经济学和股份经济

合江党校

自传25.在合江地委党校一----喜登讲坛 一九八零年五月初我在合江地委党校经济学教研室工作第一年.妻子在佳木斯市交通局秘书科工作新认识了两个同乡经常访谈.儿子上第六小学五年级聪明好学放学后总是想着写完当日作业.女儿也在第六小学上二年级对学习语文数学很感兴趣从不贪玩. 五月一日我来到我的新工作单位合江地委党校先到党委办报到.上任之前我被抽调去齐齐哈尔为一位老干部落实政策来回共六天.我们在大兴安岭的山地里沐浴阳光徒步行走感觉无限浪漫与畅快.我感到来自北京的一股股春风正在鼓起改革开放航船的历史风帆.

《实践论》全文

论认识和实践的关系--知和行的关系(1937年7月) 马克思以前的唯物论,离开人的社会性,离开人的历史发展,去观察认识问题,因此不能了解认识对社会实践的依赖关系,即认识对生产和阶级斗争的依赖关系. 首先,马克思主义者认为人类的生产活动是最基本的实践活动,是决定其他一切活动的东西.人的认识,主要地依赖于物质的生产活动,逐渐地了解自然的现象.自然的性质.自然的规律性.人和自然的关系:而且经过生产活动,也在各种不同程度上逐渐地认识了人和人的一定的相互关系.一切这些知识,离开生产活动是不能得到的. 在没

【Linux常用命令】find命令

一.find命令选项 find命令有很多选项或表达式,每一个选项前面跟随一个横杠-.让我们先来看一下该命令的主要选项,然后再给出一些例子. (1)-name 按照文件名查找文件. (2)-perm 按照文件权限来查找文件. (3)-prune 使用这一选项可以使find命令不在当前指定的目录中查找,如果同时使用了-depth选项,那么-prune选项将被find命令忽略. (4)-user 按照文件属主来查找文件. (5)-group 按照文件所属的组来查找文件. (6)-mtime -n +n

佳木斯

自传13.在佳木斯煤机厂----打铁锻练 一九六八年九月二十日我乘坐火车离开天津站直向东北方向开跋.一路上我提笔写成了一首<咏志(七律)>诗把我的感想尽情地抒发:年少岂能做井蛙,志在地角与天涯.招来海燕驱恶浪,扫去乌云见彩霞.绿水青山终有道,广天阔地必开花.面朝苍穹高声笑,万里神州是我家. 两日后的清晨我走出火车站举目观看佳木斯这座北国边塞小城.下着小雨身有点凉取出行李登上一辆布篷三轮车摇摇晃晃地前行.半小时后到达一座大楼前门牌写着煤炭部国营佳木斯煤矿机械厂.在厂部接待处办理了简单的手续后我便

玲珑歌舞

自传35.在佳木斯市委党校五----清水山花 一九八九年九月我在佳木斯市委党校经济学教研室工作第五学年.珍香在市运管处上班离小夜莺歌舞厅很近每天早上我俩前去联欢.儿子上黑大二年级未受社会风波影响坚持安心读书思想政治进步.女儿上二中高三学习紧张每天夜自习后我都去接陪回家以保安全. 上学期我讲的课有物价学152学时工商局大专班和税务局大专班. 农村商品经济56学时乡镇长班企业经济法规32学时县处青干班. 专题有我国当前多种所有制的基本经济制度8学时县处班青干班. 有二人合讲继续深化改革和扩大开放开放

黄龙洞

自传76.在张家界学院工作四4---见习像机 二零零六年四月二十日我写一首<叶阴花晴话心思(七古)>:西堂忱到迟几分,行走不稳面伤神.坐后门旁身未动,两节后会走廊门.散发不长遮面容,双眉低垂锁双睛.红上肥大掩身曲,青下单薄显孤伶.汝这样子怎么了,余刚哭了整一夜.什么大事值得哭,先进分子没通过. 慢慢来吧再努力,鼓起劲头莫泄气.意志坚强表现优,经受考验会如意.余就有些想不通,为何入党难重重.师长意见不算数,推荐大权在学生.五一放假学政治,人生重在立大志.考研是汝大目标,抓紧时机办大事.电脑现又打

南开大学

自传7.在南开大学一年级----学习雷锋 一九六二年九月一日我自太行山的家乡经德州站来到南开大学校园.三十七名刚来报到的新生组成了经济系政治经济学专业的新621班.上课在主楼三楼教室住宿在主楼一层房间吃饭在大礼堂的主体会场.所开设的主要课程包括政治经济学哲学党史外语体育和专家讲坛. 我离开农村低矮土房住进城市的高楼大厦真令我感到无限的幸福.这良好学习生活条件和每月15.5元的助学金使我心生极大的满足.我十分感谢党和国家给予我这样新鲜美好环境和成长进步的机会.我入学以后所做出第一件事就是向党支部递

find命令详解(转载)

功能:在目录结构中搜索文件,并执行指定的操作.此命令提供了相当多的查找条件,功能很强大. 语法:find 起始目录 寻找条件 操作 说明:find命令从指定的起始目录开始,递归地搜索其各个子目录,查找满足寻找条件的文件并对之采取相关的操作. 该命令提供的寻找条件可以是一个用逻辑运算符not.and.or组成的复合条件.逻辑运算符and.or.not的含义为: (1)and:逻辑与,在命令中用“-a”表示,是系统缺省的选项,表示只有当所给的条件都满足时,寻找条件才算满足.例如: $ find –n