前端基础HTML以及常用的标签

2022-09-11 11:50:07

cs模式：--- c:client server

bs模式：---Browser server

1、WEB标准的概念及组成

　　网页主要有三部分组成：

　　a：结构 -- 主要标准：XHTML和XML

　　b：表现 --- 主要是css

　　C: 行为 ---- 主要包括对象模型（w3c DOM）、ECMAScript

2、站点

　　目的：规划网站的所有内容和代码

3、HTML及相关概念

　　HTML：超文本标记语言-（Hyper TextMarkup Language）

　　XHTML：可扩展超文本标记语言

4、HTML页面是由标签和属性构成的

　　文件主体：就是在web浏览器窗口用户看见的内容

　　文件头：用来规定该文件的标题和一些其他属性

5、标记

　　a、<常规标记>

　　　　<标记属性="属性值"></标记>　　　　

　　b、<空标记>

　　　　<标记属性="属性值"/>

　　说明：写在<>中的第一个单词叫做标签、标记或者元素

　　　　属性和属性值之间用等号，属性值要加上引号包含

　　　　html属性和属性之间是没有先后顺序的！！但是css有！

　　　　空标记没有结束标签：</hr>

6、HTML常用的标记

　　1、文本大小，从1级到6级标题, 一级标题: <h1>内容</h1> , h1不是24px，是可变的（其他也是一样，是可变的）

　　2、字体及字符实体：

　　　　a、<i></i>和<em></em>:倾斜标记

　　　　b、<b></b>和<strong></strong>:加粗标记

　　　　逻辑风格：em、strong、code、small 。。。让浏览器自己决定，不同浏览器结果不同

　　　　物理风格：b、i、u

　　　　c、<u></u>:给文本加上下划线 ----

　　　　　　<ins></ins>:也是下划线，通常和del标签一起用，表示被插入与被删除的文本

　　　　　　<del></del>:代表删除文字，出现一个中划线，表示删除文字

　　　　d、<br /> 空标记，用来设置字体换行

　　　　e、<hr />空标记，用做水平线

　　　　f、<sup></sup>用来设置上标字

　　　　g、<sub></sub>用来设置下标字

　　　　h、<p></p> 段落标记，分段显示

　　3、字符实体

　　　　a、&nbsp：文字间的空格，不换行空格，一般用的是css属性来设置

　　　　b、&gt：左尖括号，这个是输出尖括号！！避免有歧义

　　　　c、&lt: 右尖括号

　　　　d、&copy: 备案中图标

　　4、常用的元素

　　　　a、<div></div>: 可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，本身不带样式！

　　　　　　1、div+css切图布局，在html中使用的最多的就是div

　　　　　　2、通常将网页重构，称为divcss制作

　　　　　　3、div替代了以前的table标签

　　　　　　4、通过对div标签设置不同样式，实现我们想要的效果

　　　　　　5、特性，通常对为设置任何样式的div，独占一行

　　　　b、<span></span>:文本结点可以是某一小段文本，或是某一个字。

　　　　c、列表

　　　　　　1、无序列表

　　　　　　<ul>

　　　　　　　　<li>列表项内容</li>

　　　　　　</ul>

　　　　　　2、有序列表　

　　　　　　　　<ol>

　　　　　　　　　　<li>列表项内容</li>

　　　　　　　　</ol>

　　　　　　3、自定义列表

　　　　　　　　　<dl>

　　　　　　　　　 </dl>

　　5、超链接和图片

　　　　a、超链接

　　　　　<a href ="目标文件路径及全称/链接地址" alt="替换文本"

　　　　　　title ="提示文本">链接文本/图片</a>

　　　　其他属性：<a href = "#" target="_blank"></a>:在新页面打开,默认是在当前页面打开

　　　　b、插入图片

　　　　这里要注意的是，绝对路径和相对路径！！不用解释

　　6、表格

　　语法：

　　　　<table>

　　　　　　<tr> ##一行

　　　　　　　　<td></td>##一列

　　　　　　</tr>

　　　　</table>

　　　　数据表格的相关属性：

　　　　1、width = '表格的宽度'

　　　　2、height ="表格的高度"

　　　　3、border ="表格的边框"

　　　　4、bordercolor="边框色"

　　　　5、cellspacing="单元格与单元格之间的间距"　　

　　　　6、cellpadding = "单元格与内容之间的空隙"

　　　　7、align ="表格水平对齐方式" 取值:left、right、center

　　　　　　valign=“垂直对齐” top\bottom\mddle

　　　　8、合并单元格属性

　　　　　　合并列：colspan = "所要合并的单元格列数"

　　　　　　合并行：rowspan="所要合并的单元格行数"

 <table width="500" height="300" border="1" cellspacing ='0'>

     <tr >

         <td colspan="2"></td>

     </tr>

     <tr>

         <td></td>

         <td></td>

     </tr>

 </table>

 <table width="500" height="300" border="1" cellspacing="0">

     <tr>

         <td rowspan="2"></td>

         <td></td>

     </tr>

     <tr>

         <td></td>

     </tr>

 </table>

 <table height="400" width="600" border="1">

         <tr>

             <td rowspan="4"></td>

             <td colspan="2"></td>

         </tr>

         <tr>

             <td></td>

                 <td></td>

         </tr>

         <tr>

             <td></td>

                 <td></td>

         </tr>

         <tr>

             <td colspan="2"></td>

         </tr>

 </table>

7、表单

　　表单的作用：上来收集用户的信息

　　1、表单框

　　　　说明：get是用来从服务器上获得数据，post向服务器传递数据。出于安全性考虑，最好使用post传递数据

　　2、表单控件

　　　　a、<input type="" name=" " value="" size= " " maxlength=" " />：

　　　　　　name：表单的名称

　　　　　　value：默认值

　　　　　　size :表单大小

　　　　　　这些均是由css来实现，一般不用这些属性

　　　　b、文本框：<input type="text" value="默认值"/>

　　　　c、密码框：<input type="password"/>

　　　　d、提交按钮：<input type="submit" value="按钮内容">

　　　　e、重置按钮：<input type="reset" value="按钮内容">

　　　　f.单选框/单选按钮

　　　　　　<input type="radio" name="ral" /> ##如果一组name相同，那么一组单选框只能选择一个

　　　　　　<input type="radio" name="ral" checked="checked" />(默认选中；)

　　　　g.复选框

　　　　　　(disabled="disabled" :禁用) (checked="checked" :默认选中)

码农公寓

相关文章