第一弹 常用标记和表格的运用

  今天上午学习的是各种常用的标记以及它们的用法,

<html>-------开始
  
          <head>
  
               <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>控制网页编码格式,防止乱码
               <title>网页的名字或者标题</title>
  
              <style>固定在head里面</style>head的样式标签
  
         </head>
  
        <body bgcolor=“选颜色也可以用颜色的英文” text=“选颜色也可以用颜色的英文” background=“选图片”>
  
                 <font>文字控制标签</font>
  
                <font color="选颜色也可以用颜色的英文">文字颜色控制<font>
  
                <font size="选择大小的数字">文字大小控制<font>
  
                <font face="选择字体也可以直接用汉子写上字体比如宋体">文字字体控制<font>
  
                <b>文字加粗</b> 换行:<br/>单标记有换行作用,也可以<br>
                <i>文字倾斜</i>
                <u>下划线</u>
                <strong>文字加粗,这个是用来强调的,爬虫用</strong>
                <em>文字倾斜,这个是用来强调的,爬虫用</em>
                 空格作用一个代表一个空格
                <h1>自定义标题自动换行</h1>
                <h2>从h1-h6标题会越来越小</h2>
                <h3></h3>
                <h4></h4>
                <h5></h5>
                <h6></h6>
                <ol type="1">
                     <li>有序列表,序号为1、2、3......当type="a"序号为a、b、c......当type="A"序号为A、B、C......当type="i"序号为i、ii、iii......当type="I"序号为I、II、III......</li>
               </ol>
                 
               <ul type>
                     <li>无序列表</li>
1
</ul><br>              <a href="超链接的地址可以是网页,也可以是网址,图片,文本等" target="超链接打开的样式,在原页上打开,还是在新页面上打开,当是-blank和new时超链接在新页中打开>超文本链接</a><br>              <a name="给回到的地方起个名字"></a><br>              <a href="#name名字">可以在网页中点击某一部分回到网页别的地方比如返回首页</a><br>              <img/ src="图片保存的路径" width="图片的宽"height="图片高" alt="图片打不开时对图片的文字" title="把鼠标放在图片上,会显示文字">
 

<html></html>是双标记中间可以加内容,有开始和结束,代表网页。

    头部<head></head>作用为控制网页的布局效果和页面效果等。

    主体<body></body>作用是显示网页的内容。

示例

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>你好</title>
<style></style>
<script></script>
</head>

<body text="#33FF00" background="淄博ddd汉企/图片/9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" bgcolor="#FFFFFF">
<a name="ni">加粗</a>
<!--<b><i>加粗</i></b><br />-->
<strong>你好</strong><br>
<em>你好</em><br />
<i>倾斜</i><br />
<u>下划线</u><br>
<font size="7" color="red" face="华文行楷">这是&nbsp;&nbsp;&nbsp;&nbsp;字体标记</font><br />
<h1>标题1</h1>
<p>你好好好爱hi阿Hi好</p><p>你好好好爱hi阿Hi好</p>
<p>你好好好爱hi阿Hi好</p>
<span>ausgaui</span>
<span>ausgaui</span>
<span>ausgaui</span>
<h2>标题2</h2>
<h3>标题3</h3>
<ol type="I">
<li>dddd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
</ol>
<ul type="square">
<li>dddd</li>
<li>dd</li>
<li>dd</li>
<li>dd</li>
</ul>
<div>
<div>ddd</div>
<div>ddd</div>
<div>ddd</div>
</div>
<img src="淄博汉企/图片/9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" width="200" height="200" alt="这是图片" title="这是"/>
<a href="http://www.baidu.com" target="new">内容:文字、图片、视频</a>
<a href="#ni">sanuanuie</a>
</body>

</html>

加粗 你好
你好
倾斜
下划线
这是    字体标记

标题1

你好好好爱hi阿Hi好

你好好好爱hi阿Hi好

你好好好爱hi阿Hi好

ausgaui ausgaui ausgaui

标题2

标题3

  1. dddd
  2. dd
  3. dd
  4. dd
  • dddd
  • dd
  • dd
  • dd
ddd
ddd
ddd

这是图片 内容:文字、图片、视频 sanuanuie

下午老师讲的是表格的运用

示例:

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

<body style="font-size:14px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="100"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="45%">&nbsp;</td>
<td width="5%">首页</td>
<td width="10%">公司简介</td>
<td width="10%">公司介绍</td>
<td width="10%">公司新闻</td>
<td width="10%">产品图片</td>
<td width="10%">联系我们</td>
</tr>
</table></td>
</tr>
<tr>
<td height="300">
<img src="file:///G|/wamp/www/9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" height="300" width="100%" />
</td>
</tr>
<tr>
<td height="300"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="300" width="33%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%" height="50"><b>媒体报道</b></td>
</tr>
<tr>
<td width="33%" height="50"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td>
</tr>
<tr>
<td width="33%" height="50"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td>
</tr>
<tr>
<td width="33%" height="50"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td>
</tr>
<tr>
<td width="33%" height="50"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td>
</tr>
<tr>
<td width="33%" height="50"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td>
</tr>
</table></td>
<td height="300" width="33%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%" height="50"><b>学校新闻</b></td>
</tr>
<tr>
<td height="50"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td>
</tr>
<tr>
<td height="50"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td>
</tr>
<tr>
<td height="50"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td>
</tr>
<tr>
<td height="50"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td>
</tr>
<tr>
<td height="50"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td>
</tr>
</table></td>
<td height="300" width="33%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%" height="50"><b>通知公告</b></td>
</tr>
<tr>
<td height="50"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td>
</tr>
<tr>
<td height="50"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td>
</tr>
<tr>
<td height="50"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td>
</tr>
<tr>
<td height="50"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td>
</tr>
<tr>
<td height="50"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="100" bgcolor="#3366FF">&nbsp;</td>
</tr>
</table>
</body>
</html>

  首页 公司简介 公司介绍 公司新闻 产品图片 联系我们
媒体报道
山东理工大学扎实推进校城融合发展
山东理工大学扎实推进校城融合发展
山东理工大学扎实推进校城融合发展
山东理工大学扎实推进校城融合发展
山东理工大学扎实推进校城融合发展
学校新闻
学校隆重举行典礼欢迎新同学
学校隆重举行典礼欢迎新同学
学校隆重举行典礼欢迎新同学
学校隆重举行典礼欢迎新同学
学校隆重举行典礼欢迎新同学
通知公告
山东理工大学诚聘海内外高层次人才
山东理工大学诚聘海内外高层次人才
山东理工大学诚聘海内外高层次人才
山东理工大学诚聘海内外高层次人才
山东理工大学诚聘海内外高层次人才

 

 

总结一下今天上课的内容,给我的感觉有点蒙圈,上午的标记运用还好些,下午的这个表格感觉还是有点迷糊,需要比着前面老师讲的一步步的来,但总体来说感觉还能听懂,这个必须要勤加练习,熟能生巧,坚持下去!

posted @ 2017-09-29 21:28  小孩坏坏  阅读(216)  评论(0编辑  收藏  举报