笔记31-HTML

文章目录

  • WEB概念概述
  • HTML
    • 案例

WEB概念概述

  • javaweb:
    • 使用Java语言开发基于互联网的项目
  • 软件架构
    1. C/S: Client/Server 客户端/服务器端
      • . 在用户本地有一个客户端程序,在远程有一个服务器端程序
      • 如: qq, 迅雷…
      • 优点:
        • 用户体验好
      • 缺点:
        • 开发、安装、部署、维护 麻烦
    2. B/S: Browser/Server 浏览器/服务器端
      • 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
      • 优点:
        • 开发、安装、部署、维护、简单
      • 缺点:
        • 如果应用过大,用户的体验可能会受到影响
        • 对硬件要求过高
  • B/S架构详情
    • 资源分类
      1. 静态资源:
        • 使用静态网页开发技术发布的资源。
        • 特点:
          • 所有用户访问,得到的结果是一样的
          • 如:文本、图片、音频、视频、HTML、CSS、JavaScript
          • 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源
      2. 动态资源
        • 使用动态网页及时发布的资源
        • 特点:
          • 所有用户访问,得到的结果可能不一样
          • 如: jsp/servlet,php,asp。。。
          • 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器。
      3. 静态资源:
      • HTML:用于搭建基础网页,展示页面的内容
      • CSS:用于美化页面,布局页面
      • JavaScript:控制页面的元素,让页面有一些动态的效果

HTML

  1. 概念 : 是最基础的网页开发语言
    • Hyper Text Markup Language 超文本标记语言
      • 超文本:
        • 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
      • 标记语言:
        • 由标签构成的语言:<标签名称> 如 html , xml
        • 标记语言不是编程语言
  2. 快速入门:
    • 语法:
      1. html文档后缀名.html 或者 .htm
      2. 标签分为:
        1. 围堵标签: 有开始标签和结束标签. 如< html>< /html>
        2. 自闭和标签: 开始标签和结束标签在一起如:< br />
      3. 标签可以嵌套
        1. 需要正确嵌套,不能你中有我,我中有你
        2. 错误: < a>< b>< /a> < /b>
        3. 正确< a>< b>< /b>< /a>
      4. 在开始标签中可以定义属性,属性是由键值对构成,值需要用引号(单,双都可以)引起来
      5. html的标签不区分大小写,但是建议使用小写.
    • 代码
	<html>
		<head>
			<title>titletitle>
		head>
		<body>
			<font color='red'> hello worldfont><br/>
			<font coklor='green'> hello worldfont>
		body>
	html>
  1. 标签学习:
    1. 文件标签: 构成html的最基本标签
      • html: html文档的跟标签
      • head: 头标签. 用于指定html文档的一些属性,引入外部资源
      • title : 标题标签
      • body: 体标签
      • : html5中定义该文档是html文档
    2. 文本标签:和文本有关的标签
      • 注释: <img src="./image/jingxuan_2.jpg"/> <img src="../image/jingxuan_2.jpg" align="center"> body> html>
      • 列表标签
        • 有序列表
          • ol: 定义有序列表
          • li :定义列表的项目
        • 无序列表
          • ul:定义无序列表。
          • li :定义列表的项目
        
        <html lang="en">
        <head>
        	<meta charset="UTF-8">
        	<title>列表标签title>
        head>
        <body>
        	
        	早上起床干的事情
        	<ol type="A" start="5">
        		<li>睁眼li>
        		<li> 看手机li>
        		<li> 穿衣服li>
        		<li> 洗漱li>
        	ol>
        
        	
        	早上起床干的事情
        	<ul type="disc">
        		<li>睁眼li>
        		<li> 看手机li>
        		<li> 穿衣服li>
        		<li> 洗漱li>
        	ul>
        	早上起床干的事情
        	<ul type="square">
        		<li>睁眼li>
        		<li> 看手机li>
        		<li> 穿衣服li>
        		<li> 洗漱li>
        	ul>
        
        	早上起床干的事情
        	<ul  type="circle">
        		<li>睁眼li>
        		<li> 看手机li>
        		<li> 穿衣服li>
        		<li> 洗漱li>
        	ul>
        
        
        body>
        html>
        
      • 链接标签
        • a : 定义一个超链接
          • 属性:
            • href : 指定访问资源的URL(统一资源定位符)
            • target: 指定打开资源的方式
              • _self: 默认值:, 在当前页面打开
              • _blank: 在空白页面打开
        • 代码
        
        <html lang="en">
        <head>
        	<meta charset="UTF-8">
        	<title>链接标签title>
        head>
        <body>
        	<a href="http://baidu.com">百度链接a>
        	<br/>
        	<a href="http://baidu.com" target="_self">点我a>
        	<br>
        	<a href="http://www.baidu.com" target="_blank">点我a>
        
        	<br>
        
        	<a href="./4_列表标签.html">列表标签a><br>
        	<a href="mailto:[email protected]">联系我们a> 
        
        	<br>
        	<a href="http://wwwbaidu.com"><img src="image/jingxuan_2.jpg">a>
        
        body>
        html>
        
      • 块标签
        • div : 每一个div占满一整行,块级标签
        • span: 文本信息在一行展示,行内标签,内联标签
    
    	<html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>块标签title>
    	head>
    	<body>
    	
    		<span>黑马程序员span>
    		<span>传智播客span>
    		<hr>
    		<div>黑马程序员div>
    		<div>传智播客div>
    	body>
    	html>
    
    1. 语义化标签: html5中为了提高程序的可读性,提供了一些标签
      • < header >: 页眉
      • < footer > :页脚
    2. 表格标签
      • table:定义表格
        • width:宽度
        • border:边框
        • cellpadding:定义内容和单元格的距离
        • cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
        • bgcolor:背景色
        • align:对齐方式
      • tr:定义行
        • bgcolor:背景色
        • align:对齐方式
      • td:定义单元格
        • colspan:合并列
        • rowspan:合并行
      • th:定义表头单元格
      • < caption >:表格标题
      • < thead >:表示表格的头部分
      • < tbody >:表示表格的体部分
      • < tfoot >:表示表格的脚部分

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签title>
head>
<body>
    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
        <tr>
            
            <th>编号th>
            <th>姓名th>
            <th>成绩th>

        tr>

        <tr>
            <td>1td>
            <td>小龙女td>
            <td>100td>

        tr>

        <tr>
            <td>2td>
            <td>杨过td>
            <td>50td>

        tr>
    table>
    <hr>
    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
        <thead>
        <caption>学生信息表caption>

        <tr>
            
            <th>编号th>
            <th>姓名th>
            <th>成绩th>

        tr>
        thead>



        <tbody>
        <tr bgcolor="#7fffd4" align="center">
            <td>1td>
            <td>小龙女td>
            <td>100td>

        tr>

        <tr>
            <td>2td>
            <td>杨过td>
            <td>50td>

        tr>

        tbody>

        <tfoot>
        <tr>
            <td>3td>
            <td>尹志平td>
            <td>10td>

        tr>

        tfoot>


    table>

    <hr>

    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
        <tr>

            <th rowspan="2">编号th>
            <th>姓名th>
            <th>成绩th>

        tr>

        <tr>

            <td>小龙女td>
            <td>100td>

        tr>

        <tr>
            <td>2td>
            <td colspan="2">杨过td>


        tr>

    table>
<hr>
body>
html>

案例

  1. 确定使用table来完成布局
  2. 如果某一行只有一个单元格,则使用
  3. 如果某一行有多个单元格,则使用
    < tr>
    < td>
    < table>< /table>
    < /td>
    < /tr>
  4. 代码

<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>旅游网站title>
head>
<body>
    
    <table width="100%" align="center">
        
        <tr>
            <td>
                <img src="image/top_banner.jpg" width="100%" alt="">
            td>
        tr>
        
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr>
                        <td>
                            <img src="logo.jpg" alt="">
                        td>
                        <td>
                            <img src="search.png" alt="">
                        td>
                        <td>
                            <img src="hotel_tel.png" alt="">
                        td>
                    tr>
                table>
            td>
        tr>
        
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr bgcolor="#ffd700" align="center"  height="45" >
                        <td>
                            <a href="./综合案例_旅游网站.html">首页a>
                        td>
                        <td>
                            门票
                        td>

                        <td>
                            门票
                        td>

                        <td>
                            门票
                        td>

                        <td>
                            门票
                        td>

                        <td>
                            门票
                        td>

                        <td>
                            门票
                        td>

                        <td>
                            门票
                        td>

                        <td>
                            门票
                        td>

                        <td>
                            门票
                        td>
                    tr>
                table>
            td>
        tr>
        
        <tr>
            <td>
                <img src="banner_3.jpg" alt="" width="100%">
            td>
        tr>

        
        <tr>
            <td>
                <img src="icon_5.jpg" alt="">
                黑马精选
                <hr  color="#ffd700" >
            td>
        tr>

        
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td>
                            <img src="./jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                            
                        td>
                        <td>

                            <img src="./jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>
                        <td>

                            <img src="./jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>
                        <td>

                            <img src="./jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>

                    tr>
                table>
            td>
        tr>
        
        <tr>
            <td>
                <img src="icon_6.jpg" alt="">
                国内游
                <hr  color="#ffd700" >
            td>
        tr>
        
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="guonei_1.jpg">
                        td>
                        <td>
                            <img src="./jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                            
                        td>
                        <td>

                            <img src="./jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>
                        <td>

                            <img src="./jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>
                    tr>
                    <tr>
                        <td>

                            <img src="./jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>
                        <td>

                            <img src="./jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>
                        <td>

                            <img src="./jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>
                    tr>
                table>
            td>
        tr>
        
        <tr>
            <td>
                <img src="footer_service.png" alt="" width="100%">
            td>
        tr>
        
        <tr>
            <td align="center" bgcolor="#ffd700" height="40">
                <font color="gray" size="2">
                    江苏传智播客教育科技股份有限公司<br/>
                    版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
                font>
            td>
        tr>
    table>
body>
html>

你可能感兴趣的:(笔记)