网页设计基础

第一章 Html简介
1.html是一种超文本标记语言，主要组成部分：
   *文档的声明<!DDCTYPE>:声明了html的类型和版本号
   *html的根标记<html> </html>:标识了html的开始和结束
   *html的头标记<head> </head>:设置页面信息
   *html的主题标志<body> </body>:展示内容

2. html的书写规范：
   *html的文件后缀名可以是.html或者.htm
   *html文件的格式
   *html文件必须以<html>开始，以</html>结束
   *html语法不区分大小写
   *有结束标记 <font> </font>
   *如果没有结束标记，则自己结束。比如：<hr/>

3.html作用：编写网页，通过thml标记文本图片和视频

           第二章标记
1.单标记：就是没有结束标记。语法：<hr/> <br/>
双标记：有开始和结束。语法：<font> </font>

2.文本控制和文本样式标记
   *段落标记<p> </p>和换行标记<br/>
   *段落标记：段落之间会自动换行
   *文本样式标记：<font></font> 例如：<font face="微软雅黑" size="7" color="green">文本</font>
      -其中size最大值为7，超过7按7处理
   *其他标记：标题标记<h1></h1>......;字体样式标记：<b></b> <i></i> <u></u>

3.图像标记：在网页上面引用图片语法：<img src="图像的url" width="60" height="20" border="1"/>
路径分为绝对路径和相对路径
注释标记：

4.html描述网页的语言，不是很严谨，被浏览器解析，展示效果

5.表格标记：<table border="1">
               <tr>
                  <td>语文</td>
                  <td>数学</td>
               </tr>
            </table>
*tr表示行 td表示单元格 th表示单元格，表头自动居中加粗
align描述表格的位置 bgcolor边框的厚度 cellspacing描述表格的大小 cellpadding描述文字与边框的距离

6.表单标记：用来让用户输入数据，表单把数据封装起来提交到指定服务器
组成：*表单控件：用户输入数据，比如输入用户名，密码。
     *提示信息；告诉用户输入框要输入什么值。
     *表单域：表示表单的开始和结束语法：<form>提示信息：表单控件</form>
<form action="htmlDemo.html" method="post">
     用户名：<input type="text" name="username"/><br/>
     密码：<input type="password" name="psw"/><br/>
           <input type="submit" value="提交"/>
</form>
常用属性：action:表示表单要提交的位置
   method:表单提交的方式，常用的有get提交和post提交，默认是get提交；get提交数据会显示在浏览器，不安全，post相反。

7.表单控件：<input/>,注意：表单想要把数据提交到指定位置，输入框必须要有name属性
输入框控件的属性type:文本框：text 密码框：password 单选按钮：radio 复选按钮：checkbox 上传按钮：file 提交按钮：submit
重置按钮：reset

8.文本域标签；<textarea rows="5" cols="7"></textarea>

9.列表标记和超链接标记
*列表标记有；有序列表<ol>li、无序列表<ul>li和自定义列表<dl>dd dt
*超链接标记：语法：<a href="跳转的url" target="目标窗口的弹出方式">文本或图片</a>
*target:_self 在原有窗口打开 _blank 在新窗口打开

10.<div>标记：用来实现网页布局，结合css

           第三章 css
1.简介：是层叠样式表，作用是增强网页的显示效果，目的是让网页内容和样式分离，便于网站代码后期的维护

2.书写规范：选择器{属性1：值1；属性2；值2......}

3.css样式的引用方式；不能单独使用，必须和html配合使用
*链入式：步骤：先创建一个css 文件，再在网页里面使用link表亲引入具体代码：<link type="text/css" href="外部css的url地址" rel="stylesheet"
*行内式：直接在html标记里面使用css样式语法：<div style="文本</div>
*内嵌式；语法：<style type="text/css">css代码</style> 注意：一定要放在<head>标记里面，从上往下加载
*导入式

4.css选择器和常用属性
*标记选择器；直接使用html标记作为选择器
比如；<div>标记选择器</div> 语法：div{属性：值；}
*；类选择器：直接使用html标记的class属性的值作为选择器
比如：<div class="divclass">class选择器</div> 语法：.divclass{属性：值；}
*id选择器：直接使用html标记的id属性的值作为选择器
比如:<div id="divid">id选择器</div> 语法：#divid{属性：值；}
*通配符选择器；让所有的标记显示相同的样式语法：*{属性：值；}
注意选择器的优先级：id选择器>class选择器>标记选择器>通配符选择器
            第四章 JS
1.DOM：Document Object Model 文档对象模型

2.块元素和内联元素： *块元素：独占一行的元素有<div> <p> <h1> <h2>....       *div这个标签主要用来对页面进行布局，不会为他里边的元素设置任何的默认样式
   *内联元素（行内元素）只占自身大小的元素有<span></span>，<a> img iframe ...... *span标签专门来选取文字
总结：块元素主要用来做页面的布局，内联元素主要用来选中文本设置样式，一般用块元素去包含内联元素， a元素可与包含任何元素，但是除了他本身。 p元素不可以包含任何的块元素元素

猜你喜欢