黑马程序员技术交流社区

标题: 自理笔记，仅供学习交流 [打印本页]

作者: 九个亿少女的梦 时间: 2019-5-7 21:57
标题: 自理笔记，仅供学习交流
Web标准
由于各个浏览器的内核不同，所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致‘’
结构标准HTML：页面的基本结构的搭建；
表现标准 CSS：页面的样式美化
行为标准 javascript：实现页面的交互
HTML知识：常用的布局标签
一、双标签：有始有终，又开始和结束两个标签组成，结束标签比开始标签多一个/;
1、标题标签（双标签）：分为6个档次分别是h1到h6；
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
2、段落标签
P 一般用来盛放一段文字也就是段落
3、图片标签img
img标签通过自身原则性属性src找到我们的图片所在位置，将图片引入到我们的html页面；
4、div和span
div大标签，主要用来做网页的布局，独自占一行；
span小标签，也是用来做布局的，但是一般用来放小图标或者特殊效果的文字，一行可以存在多个；
5、常见的文本修饰标签（小标签）
加粗标签：<b>单纯的加粗</b> <strong>语义化强调</strong>
倾斜标签：<i>单纯的加粗</i>    <em>语义化强调</em>
删除线标签：<s>单纯的加粗</s> <del>语义化强调</del>
下划线标签：<u>单纯的加粗</u> <ins>语义化强调</ins>
6、超链接a（重点）
概念
双标签  <a href=”文件路径”></a>
二、单标签:  不需要包含内容，直接在开始标签最后面添加一个结束的符号/;
例如：<br /> <hr /> <img src=””/>
1、base标签：单标签，base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间；
<base target=“_blank”>
常用的特殊符号是：空格 、小于号<、大于号>、版权&copy；

三、表格
table嵌套tr，tr嵌套多个td，tr表示行，td单元格我们也可以认为是列；
table表示整体，tr表示行，td表示列；
列表
四、列表分为：无序列表，有序列表，自定义列表
无序列表：ul嵌套li，li里面可以放任何标签，ul里面不要嵌套其他标签只放li标签；
默认的列表样式我们在css里处理；
有序列表：ol嵌套li标签；
自定义列表：dl嵌套dt和dd，dt表示我们要描述的标题，dd是描述的内容
五、表单（重点）
作用：搜集用户信息
组成部分：提示文本、表单、表单域（总体的提交数据的标签）组成
      文本框 type=”text”    <input type="text" >
      密码 type=”password”  <input type="password">
      单选按钮：type=“radio” , <input type="radio" >想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类；
      复选按钮：type=“checkbox”，<input type="checkbox" >也可以设置同样的name名称，但是不会影响多选的效果；
      单选按钮 <input type="radio" checked="checkde“  >
复选按钮 <input type="checkbox" checked="checkde" >
      提交按钮：<input type=“submit” />；
重置按钮：<input type=“reset” />；
图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径；
文件域名：<input type=“file” /> 上传文件使用；
button标签按钮：<button>我也是按钮</button>
      文本域textarea
textarea 双标签，可以控制宽高，自带的两个属性cols和rows不使用，后期我们会使用css进行对应；
      select下拉列表：一对select标签嵌套多对的option标签
      <select>
            <option></option>
            <option></option>
      </select>
css知识：
Css的引入方式分为3种：行内式，内部样式（内联样式），外部样式Css的引入方式分为3种：行内式，内部样式（内联样式），外部样式。
CSS样式规则（键值对规则）
第一步确定给谁加样式 ---- 选择器
第二部书写  {}
第三步在{}里面书写css键值对规则 {属性1:属性值1；属性2:属性值2；}
Css选择器可以分为：基础选择器和高级选择器（复合选择器）；
         基础选择器：标签选择器、类选择器、id选择器
高级选择器（复合选择器）：后代选择器、指定标签选择器、并集选择器
链接的伪类
四种状态：
   a:link       未访问的链接（访问前）
   a:visited 已访问的链接（访问后）
   a:hover    鼠标移动到连接上（鼠标经过）
   a:active    选定的链接（按下鼠标的时候）
盒子的实体化三属性（重点）
宽 width
高height
背景  background
实际开发中我们只要将实体化三属性设置好就不会出现兼容问题
三种显示模式之间的转换（强制记忆）
通过设置display属性的不同取值实现相互转换：
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;
Css的三大特性：
?    层叠性（覆盖性）、继承性、优先级；
层叠性（覆盖性）
层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；
继承性：
有一些css属性子级是可以继承父级的，一般文在控制属性都会被继承，a标签继承color除外，需要单独设置（因为a独特显示，不会继承父级的color，我们需要单独设置）；
能被继承的文字属性：font-size、color、font-weight、font-style、text-indent，text-indent、line-height、text-align: center;、text-decoration:、font-family:

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2