HTML - flowerszhao

HTML

1.结构：

<!DOCTYPE html> 声明文档解析类型，避免浏览器出现怪异模式。（html5）

<html> ---------根标签开始

<head> ---------头标签开始

<title>网站标题</title> ---------标题标签开始

</head> ---------头标签结束

<body> -----------主体标签开始

主体内容 ---------浏览器显示的主体内容

</body> ----------主体标签结束

</html> ---------根标签结束

http-equiv:模拟http协议的文件头信息，主要目的是服务器想客户端返回时用什么格式。

Content-type:内容类型。

Charset:字符集。

Name属性：主要用于设置网页的搜索关键字、版权信息、作者等。

2.属性：

超链接：<a href=http://www.php.cn target=”_blank” title="鼠标悬浮时文本" >我的超链接</a>

<a href=”#c4” >链接到同一页面的不同位置 </a>

Target属性：目标文件的显示窗口。值：_blank 、_self、parent、_top

_bland:在新窗口打开 _self:在当前窗口打开 _parent:在父级窗口打开 _top:在最顶端窗口。

描点链接：是在一个网页的不同区域进行跳转。

命名锚：<a name = “#top”>返回顶部</a> #bottom返回底部

图片链接：<img src=”/z/z.jpg” width=”200” border=”5” alt = '当图片加载失败给的提示' >

对齐方式：<h1 align=”center”>

背景颜色：<body bgcolo=”yellow”>

边框属性：<table border=”1”>

边框颜色：<table bordercolor:red>

背景图片url:background

字体类型：<face:楷体>

颜色值：color

字体大小：size----取值1-7，1小，7大单位：px

常用属性：align=”center”、”left”、”right”

水平距离：hspace

垂直距离：vspace

3.标签

<hr/>水平线单标记。Size、color、width、

<u>下划线underline</u>

< big>大字体</big>

<em>强调字</em> 默认斜体

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

pre 标签很适合显示计算机代码

<div></div>元素经常与 CSS 一起使用，用来布局网页

<a ></a>超链接

2>字符实体：

空格代表一个半角空格，一个汉字是两个字节。

空格、< <、>:>、&: &、￥:¥、*:$times;、/：÷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个页面</title>
</head>
<body>
<h2>你活得&nbsp;&nbsp;有意思吗？</h2>
<p>“如果你正在活的是你的第二次生命，在这次生命中，你可以弥补或修正第一次生命中所有的遗憾或错误。这次，你想怎么活？”</p>
我问潇潇。<br>
<p>近几年来，他正处于失意之中，工作上没有方向，情感上没有着落。更让我担忧的是，28岁的他，觉得活着没有意思。我问他这个问题，是想激活他的内在动力，哪怕只有一点点。</p>
<p>感觉人生虚无，丧失生活动力，这种现象我在10几岁的中学生身上看到过，在30岁左右的年轻人身上看到过，也在50岁左右的中年人身上看到过。我也和许多人探讨过这个问题，发现活出生命意义的人，真是少之又少。</p>
<p><em>活着没意思，存在之虚无，</em>已成为当今社会中普遍存在的现象。这种现象，在哪个国家，哪个时代都有。也许只要人类存在，这种现象就存在，只是现在更为普遍。</p>
<p>10年前，许又新教授就关注到这种现象，并将其称之为<strong>“无聊神经症”。</strong></p><hr>
人与人，不是命不同，是使命不同。<br>
在这个世界上，你独特的使命是什么？<br>
<p>弗兰克尔说，我们可以用三种不同的方式来发现生命的意义：</p>
<ul>
    <li>通过创立某项工作或从事某种事业；</li>
    <li>通过体验某种事情或面对某个人；</li>
    <li>在忍受不可避免的苦难时采取某种态度。</li>
</ul>
<!--definition list:定义列表-->
<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
</dl>

<a href="https://www.baidu.com/" title="点击下获取更多" target="_blank">百度一下</a>

 <a href="mailto:123@qq.com.com?">发送邮件</a>
<img src="../宝可梦.jpg"  width="200" alt = '当图片加载失败给的一个提示'>
</body>
</html>

4.表格：

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成;

<td>若干单元格</td>

<border>边框线

<caption>定义表格标题

Cellpadding:单元格边线到内容间的距离（填充距离）。

Cellspacing:单元格与单元格之间的距离（间距）。

colspan 属性规定单元格可横跨的列数;

Rules:合并单元格边框线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>

</head>
<body>
    <!-- <border>边框线,Cellspacing:单元格与单元格之间的距离-->
    <table border="1"cellspacing ='0'>
        <caption>商品清单</caption>
        <tr>
            <th>产品名称</th>
            <th>品牌</th>
            <!-- colspan 单元格可横项合并列数 -->
            <th colspan="2">数量和入库时间</th>
        </tr>
        <tr>
            <td>电视机</td>
            <td>小米</td>
            <td>200</td>
            <td>2020-05-05</td>
        </tr>
        <tr>
            <td>洗衣机</td>
            <td>海尔</td>
            <td>1300</td>
            <td>2020-05-04</td>
        </tr>
        <tr>
            <td>冰箱</td>
             <!-- rowspan 纵向合并行数 -->
            <td rowspan="3">美的</td>
            <td>3500</td>
            <td>2020-05-06</td>
        </tr>
        <tr>
            <td>电饭煲</td>
            <td>300</td>
            <td>2020-05-11</td>
        </tr>
        <tr>
            <td>加湿器</td>
            <td>350</td>
            <td>2020-03-06</td>
        </tr>

    </table>
</body>
</html>

5.表单：

表单：用来获取客户端用户数据。

<form>定义表单

<input type=”text”>用于输入表单

单选按钮<input type="radio" 属性=”值” checked=”checked”> 默认选择哪一项

复选框<input type = “checkbox” 属性 = “值” />

提交方式<form action=”123.pnp”method=”get”>提交的服务器以及提交方式

<select>下拉列表 </select>下

<option>定义待选择</option>

multiple:下拉框多选

selected:下拉框的默认选择项-->

提交按钮：<input type="submit" value="提交表单" />

重置按钮：<input type="reset" value=”"重新填写" />

隐藏域：<input type="hidden" name=”” value="默认 " />

<typt=”image” src=””>图片按钮

文本域<textarea rows=”行数” cols=”列数”>

上传文件<input type = “file” 属性 = “属性” />

<button>确定

Caction:表单处理的程序。

Maxlegth：最多可以输入多少个字符。

GET方式，是将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。

POST提交方式，它不是将表单数据追加到地址上，而是直接传给表单处理程序。

<form name =“user”  method=”get” caction=””>

用户名：<input  type=”text” name=”uername” value =”请输入用户名”  maxlegth=”6”><br/>

 密码：<input  type=”password”  name=”userpwd”/>

 性别：<input  type =”radio” value=”男” checked=”checked”/>男 <br/>

      <input  type=”checkbox”  name=”hobby”  value=”看书”>看书 <br/>

<select  name=”city”>

<option  value=”北京”  selected=”selected”默认显示>北京</option>

</select >

<textarea  rows=”30”  cols=”40”>请在这里输入</textarea>

<input type="image" src=" " width="70"/>图片

<input  type=”submit”  value=”提交信息”>

<input  type=”reset”  value=”重置”>

</form>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="" method="post">
        <p>
            <!--设置label属性可以根据ID和某个表单控件做关联，这里和输入框相关联-->
            <label for="username">用户名:</label>
            <input type="text" id="username" placeholder="请输入用户名">

        </p>
        <p>
            <label for="pwd">密码:</label>
            <input type="password" id="pwd" placeholder="请输入密码">
        </p>
        <p>
            男<input type="radio" name="sex" checked="checked">&nbsp;
            女<input type="radio" name="sex">
        </p>
        <h4>购买的课程：</h4>
        <p>
            <!--checkbox:默认选择项-->
            web前端：<input type="checkbox" checked="checked" >
            Java：<input type="checkbox" >
            网络安全：<input type="checkbox" >
        </p>
        <h4>下拉框单选</h4>
        <p>
            <select name="class">
                <option value="HTML">HTML</option>
                <option value="CSS">CSS</option>
                <option value="JAVA">JAVA</option>
                <!--selected:下拉框的默认选择项-->
                <option value="JavaScript" selected="selected">JavaScript</option>
                <option value="Vue">Vue</option>
            </select>
        </p>
        <h4>下拉框多选</h4>
        <p>
            <!--multiple:下拉框多选-->
            <select name="class" multiple="multiple">
                <option value="HTML">HTML</option>
                <option value="CSS">CSS</option>
                <option value="JAVA">JAVA</option>
                <option value="JavaScript">JavaScript</option>
                <option value="Vue">Vue</option>
            </select>
        </p>
        <h4>个人喵说</h4>
        <textarea rows="10" cols="40">请在这里输入</textarea><br>
        <input type="submit" value="立即注册">
        <input type="reset" value="重置">
        <input type="image" src="宝可梦.jpg" width="70"/>

    </form>
<button>按钮</button>
</body>
</html>

6.列表

无序列表：

…..

</ul>

属性：type:项目类型，取值：disc(小黑点)、circle(空心圆)、square(实心方块)

有序列表：

…..

</ol>

属性：type:编号类型，取值：1、a、A、i、l start:从第几个开始编号(数字)

自定义列表：

<dl>

</dl>

<dl>

</dl>

7.块元素和内联元素

1>块元素：一般是单独占一行，不管内容多少，总是占一行。块元素<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

2>行内元素：不会单独占一行，行内元素的宽度，主要是根据内容决定。多个行内元素，会排在同一行。行内元素<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<span> 元素是内联元素，可用作文本的容器

例子：<div style="color:#00FF00">

<h3>This is a header</h3>

<p>This is a paragraph.</p>

</div>

例子：<style>

Span{color:red；}

</style>

<span>设置了样式</span>

块元素例子：<style type="text/css">

display:block;

width:100px;

height:18px;

/*设置背景色*/

color:#fff; /*设置字体颜色*/

}

</style>

</head>

<body>

<a href="#">PHP中文网</a>

内联元素例子：

div{

display:inline; /*转换成内联元素*/

/*转换成内联元素之后，我们设置宽高，背景色，文字颜色*/

width:300px;

height:200px;

color:red;

}

</style>

</head>

<body>

<div>欢迎大家来到php中文网</div>

8.iframe内联框架

<iframe src="URL"></iframe>

9.XHTML编码规范

可扩展的超文本标注语言，与html一模一样，取代html,所有标记和属性要全小写。

单标记必须关闭。<br>----à<br/>

所有属性值必须加引号，所有属性必须要有值。

Xhtml网页必须要有DTD文档类型定义代码。

posted on 2020-05-05 21:54 flowerszhao 阅读(169) 评论(0) 收藏举报

刷新页面返回顶部