- CS架构:Client/Server架构,即客户端/服务器架构。是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,需要安装客户端才可进行管理操作
- BS架构:Browser/Server架构,客户端基本上没有专门的应用程序,应用程序基本上都在服务器端。由于 客户端没有程序,应用程序的升级和维护都可以在服务器端完成,升级维护方便。
- html规范
- 所有的标签必须小写
- 所有的属性必须用双引号括起来
- 所有标签必须闭合
- img必须要加alt属性(对图片的描述)
- html块
1、div标签 块元素,表示一块内容,没有具体的语义。
2、span标签 行内元素,表示一行中的一小段内容,没有具体的语义。 - 含样式和语义的标签
1、em标签 行内元素,表示语气中的强调词,效果—(斜体)
2、i标签 行内元素,原本没有语义,w3c强加了语义,表示专业词汇,效果—(斜体)
3、b标签 行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名,效果—(加粗)
4、strong标签 行内元素,表示非常重要的内容,效果—(加粗) - 语义化的标签
语义化的标签,就是在布局的时候多使用语义化的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。 - 插入图片
<img src=”images/pic.jpg” alt=”产品图片” / >
“ ./ ” 表示当前文件所在目录下
“ ../ ” 表示当前文件所在目录下的上一级目录 - 插入链接
<a>标签可以在网页上定义一个链接地址,通过href属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。
<a href=”链接地址” title=“链接上的提示文字” >文字 </a> ——–文字链接网址
<a href=”链接地址” title=“链接上的提示文字” ><img src=”xxx.jpg alt=”xxx”/> </a>——–图片链接网址
<a href=”#”>文字 </a> ——— # 表示链接到页面顶部 - <a href=”javascript:;”>文字 </a> ——— js语句为空表示链接不做任何事
- 定义页面内部跳转
设置锚点—>设置链接
<h3 id=”maodian”>标题3</h3> — 设置标题3为锚点
<a href=”#maodian”>跳转到锚点</a> —设置链接跳至锚点 - 新建窗口打开链接
<a href=”链接地址” title=“链接上的提示文字” target=”_blank”>文字 </a> ——–文字链接网址 - 有序列表,每条项目上会按1、2、3…编号
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
在sublime中emmet插件的快捷键是:ol>li*3+Tab - 无序列表,显示小圆点
<ul>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ul>
在sublime中emmet插件的快捷键是:ul>li*3+Tab - 带链接的无序列表
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
快捷键:ul>(li>a)*3+Tab,
同理,div>div*3+Tab , > 表示嵌套 - 注释的快捷键: ctrl + /
- ★ 按住ctrl,点击其他位置,可以产生多个光标,实现同步修改
- 定义列表,定义–解答 样式
<dl>
<dt>1</dt>
<dd>1</dd>
<dt>2</dt>
<dd>2</dd>
<dt>3</dt>
<dd>3</dd>
</dl>
快捷键:dl>(dt+dd)*3 + Tab html表格
- 创建主体
快捷键:table>(tr>td*5)*6 + Tab 定义表格尺寸,合并单元格
// <th>:定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体。 <table border="1" width="600" height="300"> <tr> <th colspan="5" align="center">基本情况</th> </tr> <tr> <td width="18%" align="center">姓名</td> <td width="18%"></td> <td width="18%" align="center">性别</td> <td></td> <td rowspan="5" width="28%"><img res="xxx.png" alt="xxx"></td> </tr> <tr> <td align="center">民族</td> <td></td> <td></td> <td></td> </tr> <tr> <td align="center">政治面貌</td> <td></td> <td></td> <td></td> </tr> <tr> <td align="center">籍贯</td> <td></td> <td></td> <td></td> </tr> <tr> <td align="center">电子邮箱</td> <td></td> <td></td> <td></td> </tr> </table>
传统表格布局
- cellpadding 定义单元格内内容与边框的距离
- cellspacing 定义单元格与单元格之间的距离
- align和valign设置的是自己相对于父级的对齐方式,valign只有<td>里面有
- 传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点:
1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0
2、★单元格里面嵌套表格
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
4、通过属性或者css样式设置单元格中元素的样式
- 创建主体
表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h3>用户注册</h3> <form action="http://www.baidu.com"> <!--数据提交位置--> <div> <label>用户名:</label> <input type="text" name="username"> </div> <br> <div><!--单行文本--> <label>密 码:</label> <input type="password" name="pwd"> </div> <br> <div><!--单选--> <label>性别:</label> <input type="radio" name="gender"> 男 <!--名称写一样,可以保证单选--> <input type="radio" name="gender"> 女 </div> <br> <div><!--多选--> <label>爱好:</label> <input type="checkbox" name="like"> 学习 <input type="radio" name="like"> 上网 </div> <br> <div><!--上传文件--> <label>照片:</label> <input type="file" name=""> </div> <br> <div><!--多行文本--> <label>个人描述:</label> <textarea></textarea> </div> <br> <div><!--下拉菜单--> <label>籍贯:</label> <select> <option>北京</option> <option>上海</option> <option>杭州</option> <option>深圳</option> </select> </div> <br><!--提交按钮--> <input type="submit" name="" value="提交"> </form> </body> </html>
内嵌框架
<body> <a href="http://www.baidu.com" target="myframe">baidu</a> <a href="http://www.qq.com" target="myframe">tencent</a> <a href="http://www.inspur.com" target="myframe">inspur</a> <iframe src="http://www.baidu.com" width="900" height="500" frameborder="no" scrolling="no" name="myframe"></iframe> </body>
可以实现,在页面内嵌一个页面,并设置内嵌页面的高度,边框和滚动条,还可以创建超链接
- 一个不错的学习资料:https://codeme.gitbooks.io/easy-web-code-book/
学习日记50--html学习
最新推荐文章于 2022-10-11 15:55:30 发布