HTML基础

来源：互联网发布：阿里云短信接口demo 编辑：程序博客网时间：2024/05/29 19:41
一、HTML入门
C-S结构（Client - Server 客户端-服务器端）
B-S结构（Broswer-Server 浏览器-服务器端）
二、基本标签：
<!doctype html><html><!--html开始标签--><head><!--文件头（用户在浏览器的主体是看不到的）--><meta charset="utf-8"><!--告诉浏览器使用什么码表解释html文件--><!--也可以是使用 <meta http-equiv="content-type" content="text/html;charset=utf-8"/>--><meta name="keywords" content="java培训，net培训"/><!--页面关键字--><meta name="description" content="这是一家专门做IT培训的公司"/><!--标题描述--><title></title><!--标题：在窗口的标题栏可以看到--></head><body><!--用户在浏览器的主体可以看到--> <!--标题--><h1  align="center">标题1</h1><h2  align="center">标题2</h2><h3  align="center">标题3</h3><h4  align="center">标题4</h4><h5  align="center">标题5</h5><h6  align="center">标题6</h6><hr color="red">换行<br><b>粗体</b><br><i>斜体</i><br><u>下划线</u><p>段落有时候一些熟悉的代码不想打，打个前面字母就能直接显示，这个在我们的Dreamweaver里面就可以实现，也就是我们常说的代码提示，那么我们如何设置呢！下面小编就带给大家具体方法！</p><blockquote>段落缩进段落有时候一些熟悉的代码不想打，打个前面字母就能直接显示，这个在我们的Dreamweaver里面就可以实现，也就是我们常说的代码提示，那么我们如何设置呢！下面小编就带给大家具体方法</blockquote>上下标y=x<sub>2</sub><br>CaCo<sup>3</sup><pre>原样输出：好雨知时间，当春乃发生，随风潜入夜，润物细无声。</pre><br><!--behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动 bgcolor:字幕背景颜色 direction:设置字幕的滚动方向down  right  left  up--> 滚动：<marquee behavior="alternate" bgcolor="#EF0D5A" direction="left">hello</marquee><br><h4>列表</h4><!--有序列表ol li（type属性更改序号类型）无序列表ul  li（用于条目的罗列，type属性更改序类型)--><ul type="circle">  <li>无序列表1</li>  <li>无序列表2</li>  <li>无序列表3</li></ul><ol type="a">  <li>有序列表1</li>  <li>有序列表2</li>  <li>有序列表3</li></ol><h3>项目列表标签</h3><dl>  <dt>这是二层</dt>  <dd>这是第三层</dd>  <dd>这是第三层</dd>  <dd>这是第三层</dd>  </dt>  <dt>这是二层</dt>  <dd>这是第三层</dd>  <dd>这是第三层</dd>  <dt>这是二层</dt>  <dd>这是第三层</dd>  <dd>这是第三层</dd></dl><h3>下拉选项</h3><select><option>陕西</option>    <option>河北</option>    <option>大连</option></select><br>hello<span>world</span><h3>超链接标签</h3><!-- href  表示链接到的地址（文件）target  打开资源方式     _self: 当前窗口打开， _blank: 新窗口打开 常见协议： file://   本地文件协议（本地或局域网）  在href中不写就是使用这个默认协议 http://    http协议（执行流程）  通常连接到域名或IP地址(画图讲解http协议执行流程) thunder:// 迅雷下载软件的协议 mailto:发送邮件协议 超链接作用；     1）链接到资源         2）作为锚点使用        打锚点： <a name="锚点名称"></a>            去到锚点： <a href="#锚点名称">内容</a> --> <a name="top"></a> <a href="#" target="_blank">超链接</a> <a href="http://www.baidu.com">链接到百度</a><br/> <a href="http://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(普通通道)</a><br/> <a href="thunder://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(迅雷通道)</a><br/>　人生漫漫路，像是一条况味儿深邃的长河。飞逝的光阴，簇拥着打着赤脚的我，慢慢地趟着生活。纵使有山水相隔，有风雨吹落，但对生活用情至深的我，偏爱于草色烟光的青枝上，翩飞如蝶的枯叶间，逐字逐句地将悠悠岁月里遇见的美好，细细品味深深雕琢。　　　　红尘阡陌，带有况味的词藻若是堆砌起来，如山似海。可岁月与美好，绝对称得上是生活里最清逸灵动的词汇。世间一切唯美风物，时光自会竭尽所能地演绎其大度以及快意的慷慨成全。一切已知往昔，都像是一场场命定的不期而遇。而一切未来的岁月，均是生活赋予你施展想象的留白。<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="#top">返回到顶部</a><h3>图片标签</h3><!--常用属性：src :  表示图片源位置width: 图片宽度height: 图片高度alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效title: 提示文本。当鼠标放到图片上面出现。地图（热点区域）：map热点： area，设置图片上可以被点击的区域（用工具做之后进行简单分析）    --><img src="../../zuoye/云起点书城界面原形/egou/images/couponregister/logo.gif"><h3>转义字符</h3><!--转义字符(以&开头，以;结尾)需求:在浏览器中显示：<h1>标题</h1><          <   letter than>          >   greater than                    &          & 需求：在浏览器中输入    华育     国际空格        王老吉加上商标和版权：版权       &copy;商标   &reg;--><hello><br>版权&copy;<br>商标&reg;<br><h3>表格标签</h3><!--常用的属性：border  表格的边框width  宽度heigth 高度align   对齐方式。 left: 左对齐   center:居中  right：右对齐rowspan  行合并。把多行的单元格合并colspan  列合并。把多列的单元格合并--><form action="#" method="post"><table border="1" width="300px" height="200" align="center"><caption>学生信息添加</caption><tr>    <td>用户名</td>        <td><input type="text" name="username"></td>    </tr>    <tr>    <td>密码</td>        <td><input type="password" name="password"></td>    </tr>     <tr>    <td>性别</td>        <td><input type="radio" name="gender" value="男">男<input type="radio" name="gender" value="女">女</td>    </tr>     <tr>    <td>年龄</td>        <td><input type="text" name="age"></td>    </tr>    <tr>    <td>出生地</td>        <td>        <select>        <option>陕西</option>                <option>山西</option>        </select>        </td>    </tr>    <tr>    <td>爱好</td>        <td></td>    </tr>    <tr>    <td colspan="2"><input type="submit" value="提交"><input type="reset" value="重置"></td>    </tr></table></form></body></html>
阅读全文
0 0