WEB网站与HTML
路径基本介绍
路径分类:
1.绝对路径:
在当前整个电脑的文件中寻找
2.相对路径:
①同级路径:HTML文件和图片在同一个路径中,直接用<img src=”图片名称”/>
②下一级路径:HTML文件和图片不在同一个路径中,用<img src=”目录名/图片名” />
③上一级路径:HTML文件和图片分别在两个不同的路径中,用<img src=”../目录名/图片名” />
超链接:超链接是我们平时点击可以跳转到相应页面
1.超链接标签<a href=”网址”>提示点击内容< /a>
2.新窗口打开超链接<a href=”网址” target=_blank>提示点击内容< /a>
3.空连接:作用是定义一个链接不跳转到链接“#”或者“JavaScript:;”“JavaScript:void(0);”
表单标签:
表单作用:收集用户信息
HTML中表单的标签:<form action=”” method=”post”>< /form>
form是作为表单数据的跟标签
action属性是把所有的表单数据传送给某个后台
Method代表方法有get方法和post方法
Get:明文传送,post:加密传送
文本框和密码框:
1.文本框:<input type=”text” placeholder=”请输入用户名” />
2.Placeholder=”提醒文字”:用于用户提醒文字
3.密码框:<input type=”password” placeholder=”提示内容” />
单选按钮和复选按钮:
1.单选框:<input type=”radio” name=”属性名” id=”lable for=的属性名”/>
2.加name属性能实现选择一个,另一个不被勾选
3.<label for=”属性名”>要点击的内容< /label>提升用户体验感
复选框:<input type=”checkbox” checked=checked/>
实现默认勾选: checked=”checked”
下拉框和以及文本域:
下拉框:<select name=”” id=””>
<option value=””>输入内容< /option>
< /select>
默认选择状态:selected=”selected”
文本域:textarea name=”” id=”” cols=”” rows=””>< /textarea>
cols和rows分别代表列和行,因为有兼容性的问题,一般不用程序员不用这个,一般用css来呈现
按钮:
1.普通按钮:<input type=”button” value=”” />
2.重置按钮:<input type=”reset” value=”” />
3.提交按钮:<input type=”submit” value=”” />
列表:
1.无序列表:<ul>
<li>< /li>
< /ul>
2.有序列表:<ol>
<li>< /li>
< /ol>
3.自定义列表:<dl>
<td>
<dd>< /dd>
<td>
< /dl>
CSS基本语法:
CSS是cascading style sheets的缩写,称为层叠样式表
Css的语法:
<style type=”text/css”>
例如:div{
Color:颜色; font-size: 100px;
}
< /style>
Css选择器介绍:
标签选择器
作用:用来找页面元素,控制它的样式
Id选择器:
给标签里面添加id=”属性名”,
#属性名{
Color: 颜色; font-size=”字体的大小”
}
缺点:一个Id命名属性是不能重复使用的
命名要求:
Id命名不能数字开头
Id不推荐以中文命名
Id不能以特殊符号命名(除_ - 两个符号)
类选择器:class
使用的是 .+类的名字 如 .类的名字{
Color:”颜色”;font-size: 字体大小;
}
优点:类名可以多次使用
同一个标签可以设置多个类名,使用空格分割即可
命名要求:class不允许数字开头命名
Class不允许符号命名(除下划线和中划线)
Class不推荐使用中文命名
继承性和覆盖性
继承性:子元素可以继承父元素的css样式【可以继承不代表一定继承或者全部继承】
覆盖性:权重相同的时候,先写的样式会被后写的样式覆盖
符合选择器:分为后代选择器和并列选择器
1.后代选择器:通过某个元素,通常我们称为父级元素,然后寻找这个元素里面的其他元素我们称为子元素。
使用空格来实现
后代指的是儿子、孙子等等
同一个标签设置id和class不会有冲突,哪怕是id的值和class的值一样也不会有冲突
2.并列选择器:也叫并集选择器,可以使用于任意一个标签
3.什么时候用:当有多个标签要设置同一种样式时使用
4.用英文逗号来实现 如div , p , h1{
5.Color: 颜色;
6.}
以上是对css的基础部分认知和简单总结 |
|