HTML

最新推荐文章于 2022-04-09 10:43:09 发布

qq_42378434

最新推荐文章于 2022-04-09 10:43:09 发布

阅读量83

点赞数

本文链接：https://blog.csdn.net/qq_42378434/article/details/89215995

版权

HTML

概念：
Hyper Text Markup Language 超文本标记语言
超文本：
使用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：
由标签构成的语言。<标签名称> html，xml
标签语言不同于编程语言

语法：
1.Html 文档后缀名为html,htm
2.标签分类：
1.围堵标签：有开始标签与结束标签。
2.自闭和标签：开始标签与结束标签在一起。
3.标签可以嵌套，但注意规范
4.开始标签中可以定义属性。属性由键值对构成，属性由引号标注
5.不区分大小写

标签：
1.文件标签：构成html最基本的标签
html:html文档的根标签
head:头标签。用于指定html文档的一些属性。引入外部资源
title:标题标签
body:体标签
html5中定义该文档为html标签
2,文本标签：
注释：<!-- 注释内容 –
h1 to h6：

标题标签

p：段落标签
br：换行标签
hr：展示一条水平线

b：加粗
i：斜体

3.图片标签
img：展示图片
src：指定图片位置

<image src="images/logo.png"></image>

4.列表标签
有序列表
ol
li
无序列表
ul
li
5.链接标签
a:定义一个超链接
属性：
href：指定访问资源的url（统一资源占位符）
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页面打开

<!--超链接-->
<a href="http://www.itcast.com">点我</a><br>

<a href="http://www.itcast.com" target="_blank">clickOn</a>

<!--以图片作为超链接-->
<a href="http://www.itcast.com" target="_blank"><img src="images/logo.png"></a>

6.块标签

<!--块标签-->

<!--文本展示在一行，行内标签，内联标签-->
<span>Hello world</span>
<!--自动换行-->
<div>Hello world</div>

7.语义化标签

之前：
在div中使用id，CSS中进行控制
<div id="header"></div>
<div id="footer"></div>
HTML5之后：使用语义化标签，提高程序可读性
<header></header>
<footer></footer>

8.表格标签

表格标签
table：定义表格
	width:宽度
	border:边框
	bgcolor:背景色
tr:定义行
td:定义单元格
th:定义表头单元格

<table border="1" bgcolor="#7fffd4" width="50%">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>

    <tr>
        <td>1</td>
        <td>小明</td>
        <td>100</td>
    </tr>

    <tr>
        <td>2</td>
        <td>小智</td>
        <td>80</td>
    </tr>
</table>

静态网页样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Travel Web</title>
</head>
<body>

<table width="100%" align="center">
    <!--第一行-->
    <tr>
        <td><img src="image/top_banner.jpg"width="100%" align="center"></td>
    </tr>

    <!--第二行-->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td><img src="image/logo.jpg" alt=""></td>
                    <td><img src="image/search.png" alt=""></td>
                    <td><img src="image/hotel_tel.png" alt=""></td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第三行-->
    <tr>
        <td>
            <table width="100%" align="center" bgcolor="#ffd700" >
                <tr align="center">
                    <td><a href="">首页</a></td>
                    <td><a href="">门票</a></td>
                    <td><a href="">酒店</a></td>
                    <td><a href="">香港车票</a></td>
                    <td><a href="">出境游</a></td>
                    <td><a href="">国内游</a></td>
                    <td><a href="">港澳游</a></td>
                    <td><a href="">抱团定制</a></td>
                    <td><a href="">全球自由行</a></td>
                    <td><a href="">收藏排行榜</a></td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第四行-->
    <tr>
        <td><img src="image/banner_3.jpg" width="100%" align="center"></td>
    </tr>
    
    <!--第五行-->
    <tr>
        <td>
            <img src="image/icon_5.jpg">
            黑马精选
            <hr color="#ffd700">
        </td>
    </tr>

    <!--第六行-->
    <tr>
        <td>
            <table width="95%" align="center" >
                <tr>
                    <td>
                        <img src="image/jiangxuan_1.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_1.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_1.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_1.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第七行-->
    <tr>
        <td>
            <img src="image/icon_6.jpg">
            国内游
            <hr color="#ffd700">
        </td>
    </tr>

    <!--第八行-->
    <tr>
        <td>
            <table width="95%" align="center" >
                <tr>
                    <td rowspan="2">
                        <img src="image/guonei_1.jpg" height="488">
                    </td>

                    <td>
                        <img src="image/jiangxuan_2.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_2.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_2.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="image/jiangxuan_2.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_2.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_2.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第九行-->
    <tr>
        <td>
            <img src="image/icon_7.jpg">
            境外游
            <hr color="#ffd700">
        </td>
    </tr>

    <!--第十行-->
    <tr>
        <td>
            <table width="95%" align="center" >
                <tr>
                    <td rowspan="2">
                        <img src="image/jiangwai_1.jpg" height="488">
                    </td>

                    <td>
                        <img src="image/jiangxuan_3.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_3.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_3.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="image/jiangxuan_3.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_3.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_3.jpg">
                        <div>
                            上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游)
                        </div>
                        <font color="red" size="2">&yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第十行-->
    <tr>
        <td>
            <img src="image/footer_service.png" width="100%">
        </td>
    </tr>
    <tr>
        <td>
         <center>
            <font color="#778899" size="2">
                <p>江苏传智播客教育科技股份有限公司</p>
                <p>版权所有Copyright&copy; 2006-2018, All Rights Reserved 苏ICP备16007882</p>
            </font>
        </center>
        </td>

    </tr>
</table>

</body>
</html>

表单：

概念：用于采集用户输入的数据。用于和服务器进行交互
使用标签form，定义一个范围，代表采集用户数据的范围
		属性：action：提交数据的url
			method：指定提交方式（get，post）

		get：1.请求参数会在地址栏中显示，请求参数长度有限制，不安全
		post：请求地址栏中不会有请求参数，会封装在请求体中，较为安全
表单项的数据要想被提交，必须指定name属性
<form action="#" method="get">
    <label for="username">用户名</label><input name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别: <input type="radio" name="gender" value="male">男
    <!--要想将多个单选框实现单选效果，需将多个单选框的name的属性值设为相同-->
    <!--会给每一个单选框提供一个value属性，指定被选中后提交的值-->
    <!--check属性，表示默认被选中-->
            <input type="radio" name="gender" value="female">女<br>
    爱好:<input type="checkbox" name="hobby" value="shopping">Shopping
    <input type="checkbox" name="hobby" value="Java">Java
    <input type="checkbox" name="hobby" value="Game">Game<br>
    省份:<select name="province">
        <option>---</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select><br>

    自我描述:
    <textarea rows="5" cols="20" name="descruipt"></textarea>
    <input type="submit" value="登录">
</form>


<!--表单项标签：
    input:使用type属性，改变元素展示的样式
        text:文本输入框,默认值
            placeholder:指定输入框的提示信息，当输入框内容发生变化时，自动清空提示
        password:密码输入框
        radio:单选框
        checkbox:复选框
     label:指定输入项文字描述信息（for)属性会与input的id相关联

     按钮：
        submit:提交按钮，用于提交一些信息
        button:普通按钮
        image:图片提交按钮
            src属性指定图片路径

    select:下拉列表
        子元素:option,指定列表项

    textarea:文本域
-->

qq_42378434

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTML概念：Hyper Text Markup Language 超文本标记语言超文本：使用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本标记语言：由标签构成的语言。<标签名称> html，xml标签语言不同于编程语言语法：1.Html 文档后缀名为html,htm2.标签分类：1.围堵标签：有开始标签与结束标签。2.自闭和标签：开始标签与结束标签...
复制链接

扫一扫