网页设计基础
Posted 1877chl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页设计基础相关的知识，希望对你有一定的参考价值。
第一章 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元素不可以包含任何的块元素元素
以上是关于网页设计基础的主要内容，如果未能解决你的问题，请参考以下文章