码迷,mamicode.com
首页 > Web开发 > 详细

网页设计基础

时间:2020-03-04 12:50:35      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:常用   指定位置   idt   总结   href   没有   第四章   描述   设计   

            第一章 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元素不可以包含任何的块元素元素


 










网页设计基础

标签:常用   指定位置   idt   总结   href   没有   第四章   描述   设计   

原文地址:https://www.cnblogs.com/1877chl/p/12408580.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!