欢迎使用CSDN-markdown编辑器

最新推荐文章于 2019-05-21 15:14:19 发布

飞豆

最新推荐文章于 2019-05-21 15:14:19 发布

阅读量1.7k

点赞数

分类专栏： Html5 css 文章标签：前端

本文链接：https://blog.csdn.net/wwwstand1108/article/details/73381747

版权

Html5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

标签、表格、表单

一、网页制作技术和工具

1.制作技术

 HTML超文本标记语言

2.制作工具
Dreamweaver、HBuilder、Sublime、IDEA
Dreamweaver的基本功能：
新建（ctrl+N）、打开（ctrl+O）、保存（ctrl+S）、预览页面（F12）、首选项（ctrl+U）
3.调试工具
3.1 PC端调试工具————浏览器（Chrome、IEtest、FireFox）
3.2移动端调试工具————Chrome模拟器
二、什么是站点
1.站点的作用
用来归纳一个网站上所有的网页，素材以及他们之间的联系
规划网站的所有内容和代码，整合资源
2.文件的命名规则
a.用英文，不用中文
b.用小写英文字母、数字、下划线的组合，其中不得包括汉字、空格和特殊字符；必须以英文开头
c.网站的首页必须命名为index.html，不要使用shouye.html

三、HTML常用标签

1.文本标签

     <h1></h1>
     <h2></h2>
     <h3></h3>
     <h4></h4>
     <h5></h5>
     <h6></h6>

2.段落文本

    <p></p>

每一个段落之间有换行，段落段落有一些空白区域。
3.空格
4.加粗

  <strong></strong> 
     <b></b>

5.倾斜

     <em></em>
     <i></i>

6.换行:单标签

  <br>

7.水平线：单标签

     <hr>

8.列表（ol、ul、dl）

有序列表：

<ol start="3" type="A">
     <li></li>
     <li></li>
     <li></li>
</ol>

无序列表：

<ul type="circle">
     <li>拉克首都喀山接电话</li>
     <li>春节前偶发不错</li>
     <li>没那空回复</li>
</ul>

自定义列表：

<dl>
     <dt></dt>
     <dd></dd>
</dl>

列表的项目符号能不能调？
属性start，表示从第几个序号开始
属性type，表示项目编号的类型
有序列表的项目类型有：1，a，A，i，I
无序列表的项目类型有：circle空心圆,disc实心圆,square方形
9.图片（img）
相对路径：相对于网页本身，路径起始点，

<img src="123.png">
<img src="../2.gif">
<img src="../imgs/news.jpeg">

1.网页和图片在同一个文件夹，直接写图片的名字和扩展名（完整的名称）
2.网页所在的文件夹和图片在一个文件夹里，需要返回上一层“../”，然后写图片的名字和扩展名（完整的名称）
3.网页所在的文件夹和图片所在的文件夹在一个文件夹里，需要先返回上一层“../”，再写上图片所在的文件夹名，然后再写图片的名字和扩展名（完整的名称）。
10.超链接（a）

：在href属性值里，写上需要链接页面的完整路径和文件全称
target=”_blank”在新窗口中打开页面。
11.div和span
div，块区域。
span，文本区域，用来包裹文字。
11.数据表格
table：表格整体，tr：一行，td：一列（一个单元格）。

<table width="value" height="value" border="value" bgcolr="value" cellspcing="value" cellpadding="value">
     <tr>
          <td></td>
          <td></td>
     </tr>
     <tr>
          <td></td>
          <td></td>
     </tr>
</table>

相关属性：
width=”表格宽度”
height=”表格高度”
border=”表格边框宽度”
bgcolor=”背景颜色”（bg=background）
bordercolor=”表格边框颜色”
cellspacing=”单元格之间的间距”
cellpadding=”单元格与内容之间的空隙”
align=”对齐方式left/center/right”
colspan=”合并的列数”
rowspan=”合并的行数”
12.表单：用来收集用户信息
1.表单框（form）

<form name="表单名称" method="post/get" action="提交的目标的位置"></form>

2.表单控件——文本框（以下都是控件）

<input type="text" value="默认值" />

3.密码框

<input type="password"placeholder="请输入密码" />

4.按钮

<input type="button" value="按钮内容" />
<input type="submit" value="按钮内容" />
<button></button>

button和submit的区别是：
submit是提交按钮，起到提交信息的作用，type类型是button只起到跳转作用，不进行提交
5.重置按钮

<input type="reset" value="按钮名称">

6.单选按钮/单选框

<input type="radio" name="suiuyi" />
<input type="radio" name="suiyi" checked="checked" />

单选按钮的name属性必须填写，同一组按钮的name属性值必须一样
checked=”checked”（默认选中）disabled=”disabled”（禁用）
eg:

性别<input type="radio" name="sex">男
    <input type="radio" name="sex">女

复选框

<input type="checkbox" name="like" />
<input type="checkbox" name="like" checked="checked" />

checked=”checked”（默认选中）disabled=”disabled”（禁用）
eg:

爱好<input type="checkbox" name="body"> 耍
       <input type="checkbox" name="body"> 跑
       <input type="checkbox" name="body"> 打

8.下拉菜单

<select name="">
     <option>菜单内容1</option>7.
     <option selected="selected">菜单内容2</option>
</select>
selected为默认选项
eg:
地区<select>
            <option></option>
            <option>四川</option>
            <option>新疆</option>
            <option>大连</option>
            <option>吐鲁番</option>
            <option>云南</option>
    </select>

9.文本域（多行文本框）

注意：阻止浏览器对窗口的拖动设置：{resize:none;}（需要写在样式里）
知识点：
1.value与input：
value 属性为 input 元素设定值。
对于不同的输入类型，value 属性的用法也不同：
type=”button”, “reset”, “submit” - 定义按钮上的显示的文本
type=”text”, “password” - 定义输入字段的初始值
type=”checkbox”, “radio” - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
2.post与get的区别：

<form name="表单名称" method="post/get" action=""></form>

Form中的获取数据的两个方式get和post的区别？
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在url中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML header内一起传送到action属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
5. get安全性非常低，post安全性较高。但是执行效率却比post方法好。
建议：
1. get方式的安全性较post方式要差些，包含机密信息的话，建议用post数据提交方式；
2. 在做数据查询时，建议用get方式；而在做数据添加、修改或删除时，建议用post方式；
第二天：CSS基础
一、CSS简介（cascading style sheet）
二、css语法
选择符{属性：属性值；属性：属性值；}
选择器(符)：要定义样式的对象
属性：指定选择符所具有的属性
属性值：包括属法定性值及常见的数值加单位，如25px，或颜色
等。
说明：
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为两部分，属性和属性值；
2）声明必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先顺序。
5）当一个选择符有多个声明的时候？
6）在书写样式过程中，空格、换行等操作不影响属性显示。

三、样式的创建和分类

1内部样式：

<style>
h1{color:red;font-size:24px;}
</style>

2、外部样式
法一： <link rel="stylesheet" type="text/css" href="目标文件的的路径及文件名全称">
法二： <style type="tetx/css">@import url(目标文件的路径及文件名全称);</style>
说明：@和import之间没有空格，url和小括号之间也没有空格，必须以分号结束
两种引入方式的区别：1.老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
3、内联样式
<标签 style=”属性:属性值; 属性:属性值;”>

四、CSS选择器(符)

1.元素选择符/类型选择符
语法：标签{属性:属性值;}
说明：元素选择符就是以文档语言类型对象作为选择符，即使用结构中元素名称作为选择符。如body，div，p，img，
span，em…………所有的页面元素都可以作为选择符使用
用法：div{color:red;}
改变某个元素的默认样式时，改变页面中统一元素的样式时。
2.id选择器：
语法：#id名{属性:属性#box{color:red;}v id=”box”>
3.class选择器（类选择器）：
.class名{属性:属性值;}
.box{color:red;}

<div class="box"></div>

4.*通配符
*{margin:0;padding:0;}
5.群组选择器：
语法：选择符1,选择符2,选择符3,选择符4{属性:属性值;}
说明：
1.怎么写：#top,.banner,.list,div span,#news li{color:red}
2.用在哪：当一些元素具有相同属性时
3.注意事项：群组选择符的每一个选择符都需要完整书写，如id的“#”，class的“.”，包含选择符的完整父级，如“#news.box1 span,#new .box1 p,#new .box1 h1{color:red;}”，
不可写成“#news .box1 span,p,h1{color:red;}”
6.包含选择器
语法：选择符1 选择符2{属性:属性值;}
说明：
1.怎么写

<div class="box">
<ul>
<li></li>
<li></li>
</ul>
</div>

.box ul li{color:red;}

2.用在哪：当页面中有重复元素时，需要把当前元素的父级加上，就构成了包含选择符。
7.伪类选择符（超链接a标签上）
语法：
a:link{属性:属性值;}
a:visited{属性:属性值;}
a:hover{属性:属性值;}
a:active{属性:属性值;}
说明：顺序不可乱，可单独使用，
2.简写方式

a{color:red}
a:hover{color:blue}

五、选择器(符)的权重

css中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型(标签、标记、标识)选择符的权重为0001
class选择符的权重为0010
id选择符的权重为0100
子选择符的权重为0000
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0010
包含选择符的权重：为包含选择符的权中之和
内联样式的权重为1000
继承样式的权重为0000
* 当不同选择符的样式设置有冲突的时候，高权重选择符的样式
会覆盖低权重选择符的样式。
例如：b .demo的权重是1+10=11
.demo的权重是10
所以经常会发生.demo的样式失效
* 相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，
就采用哪个选择符样式。