网页制作（HTML）

最新推荐文章于 2024-06-03 12:50:59 发布

放羊西谷夕

最新推荐文章于 2024-06-03 12:50:59 发布

阅读量405

点赞数 1

本文链接：https://blog.csdn.net/weixin_45145037/article/details/99194353

版权

HTML的介绍

HTML语言的特点：

简易性：超级文本标记语言版本升级采用超级方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上。

html的文档结构实例：

 <html>
        <head>
            <title>html的结构</title>
        </head>
        <body>
          <h1>我们现在开始学习HTML!!</h1>
        </body>
     </html>

html的文档结构主要是有3部分组成的：

        - <html></html>
        
          <html>标记用于html文件的最前面，用来表示html文件的开始。而</html>的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。

        - <head>和</head>
    
          <head>和</head>构成html文件的头部部分，在此标记对之间可以使用<title> </title>和<script> </script>等等标记对，这些标记都是描述html文档相关信息的标记对，<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
         
        - <body>和</body>
         
          <body>和</body>是html文档的主体部分，在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。

所有的标记都要成对出现要不在运行时会出现错误的样式

META标记
HTML语中head部分的一个辅助性的标记，位于head和title标记之间，他提供的时用户不可以看见的信息。meta标记的用来走索殷勤robots定义页面主题，或者是定义用户浏览器上的cookie；可以用来鉴别作者，或者设置页面格式，标注内容提要和一些关键字，或者设置页面的自动刷新

TITLE标记

        在头部标签中<title></title>在里面可以增加文字，出现在浏览器视窗最上面蓝色的部分，作为网页主题

文字之间的分隔符

       强制分隔标记<br>
       强制分段标记<p>
       空格                <&nbps;>

排版的标记

文字的位置设定

               在<p>上增加简单的属性

  <html>
     <head>
      <title>排版不标记</title>
    </head>
    <body>
    <p  align="left">为救李浪离家远。</p>
    <p  align="center">谁料皇榜中状元。</p>
    <p  align="right">女驸马</p>
   </body>
  </html>

利用pre标记可以将排版和排版后的内容原封不动的呈现出来

     <html>
     <head>
       <title>保持原始数据格式标记</title>
     </head>
      <body>
     <Pre>  
      为救李浪离家远
                 谁料皇榜中状元
     </pre>
      </body>
     </html>

字体标记
1.标题标记

        使用方法：<h1>内容</h1>

2.设置字体标记

     使用方法：<font  size=“2”  color=“red”  face=“黑体”>内容</font>

3.字体变化标记
使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。

     <b></b>  加粗        <i></i>  斜体      <u></u>  底线
    <kbd>用粗体等宽字体显示文字</kbd>
    <var>用较小的固定宽度显示字体</var>

背景标记
添加背景颜色

<body bgcolor="red"  backgroud="bg.jpg">
   
   <html>
    <head><title>背景颜色</title> </head>
     <body  bgcolor="red">
     <font  size="4"  face="黑体"  color="red">背景颜色</font>
     </body> </html>

添加背景图片

   <html>
    <head><title>背景颜色</title> </head>
     <body  background="bg.jpg">
     <font  size="4"  face="黑体"  color="red">背景图片</font>
     </body> </html>

IMG标记

网页中插入图片


使用：<img  src="boy.jpg"  alt="haha" align="left" border="0"  height="56px" width="32px">

<html>
    <head>
     <title>图片</title>
    </head>
     <body>
       <img  src="boy.jpg"  alt="haha" align="left" border="0“   height="56px"        width="32px">
     </body>
   </html>

其中的alt是图片的替换文本，在浏览器无法加入图片时进行提醒

alt文本的使用规则：

                         如果图像包含信息 - 使用 alt 描述图像 
                         如果图像在 a 元素中 - 使用 alt 描述目标链接 
                         如果图像仅供装饰 - 使用 alt=""

序列标记
可以分为：
1.无序列表

 <html>
    <head>
     <title>无序列表</title>
    </head>
      <ul>
      <li>姓名：jock
      <li>生日：1989/4/9
      <li>星座：天蝎座
      </ul>
     </body>
   </html>

其中

就是无序列表，每增加一列内容，就需要加一个
;
可以为
- 添加属性type=“disk”(实心点)，type=“square”(小正方形)type=“circle”(空心点)

2.有序列表

 <html>
    <head>
     <title>有序列表</title>
    </head>
      <ol type="1">   
<!-- 	  说明：其中<ol>就是无序列表，没增加一列内容，就需要加一个<li>;
    可以为 <ol>添加属性type="1"(数字)，type="A"(大写字母)，type="a"(小写字母)，type="I"(大写罗马)，type="i"(小写罗马)； -->

      <li>姓名：jock
      <li>生日：1989/4/9
      <li>星座：天蝎座
      </ol>
     </body>
   </html>

3.自定义链表

    <html>
    <head>
     <title>有序列表</title>
    </head>
      <dt>咖啡</dt>
       <dd>黑色热饮</dd>
       <dt>牛奶</dt>
        <dd>白色冷饮</dd>
     </body>
   </html>

表格：

表格的结构
       1.<table>
            <table>...</table>是用来在html页面上创建表格的。
	 2.<th>代表列名一般放在第一行
      3.<tr>代表格的一行。
      4.<td>用来定义表格的一列。
      在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。

下拉列表以及文本域：

    <html>
    <head>
     <title>有序列表</title>
    </head>
	<body>
	<select>
        <option   value="qxz"  selected/>请选择
        <option   value=“A”/>苹果
        <option   value=“B”/>香蕉
        <option   value=“C”/>橘子
        <option   value=“D”/>西瓜
   </select>
	
	</body>
     
   </html>

框架：
利用frameset

<html>
 <head>
 <title>框架页示例</title>
 </head>
<frameset rows="50%,50%">
	<frame src="http://www.baidu.com">
	<frameset cols="25%,75%">
		<frame src="http://www.sina.com.cn">
		<frame src="http://www.baidu.com">
	</frameset>
</frameset>
</html>

放羊西谷夕

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
网页制作（HTML）

HTML的介绍HTML语言的特点：简易性：超级文本标记语言版本升级采用超级方式，从而更加灵活方便。可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上。html的文档结构实例： <html>...
复制链接

扫一扫