413 重温HTML + css 考试 + 访问HTML元素

2023-02-13 09:18:47

考试前的复习

初学css
1:认识CSS
　　1.1：css简介，css全称是层叠样式表，Cascading style sheets
　　1.2：css的作用，主要是用于定义html内容在浏览器内的显示样式，如文字大小，颜色，字体加粗等
　　　　使用css样式的一个好处是通过定义某个样式，可以让不同的网页位置的字体有着统一的字体，字号或者颜色等
　　1.3：css代码语法
　　　　css样式由选择器和声明组成，而声明又由属性和值组成
　　　　h1 { color:red;font-size:14px;}
　　　　选择器 属性 值{属性和值构成声明}
　　　　选择器：指明网页中要应用样式规则的元素
　　　　声明：在英文大括号"{}"中的就是声明，属性和值之间用英文冒号":"分割。当有多条声明时，中间可以英文分号":"分隔

　　　　css注释代码//是单行注释   /**/ 多行注释 <!----> HTML的注释

2：CSS基本知识（就近原则）
　　　　2.1：内联式css样式，直接写在现有的html标签中
　　　　2.2：嵌入式css样式，写在当前的文件中
　　　　2.3：外部式css样式，写在单独的一个文件中，使用link引入
　　　　　　css样式文件名以称以有意义的英文字母命名
　　　　　　rel="stylesheet" type="text/css"是固定的写法，一定要写到link标签内不可修改
　　　　　　语法格式(<link href="" rel="stylesheet" type="text/css">)
　　　　　　<link>标签位置一般写在<head>标签之内
　　　　2.4：优先级
　　　　　　内联式>嵌入式>外部式

3：CSS选择器
　　3.1：什么是选择器
　　　　每一条css样式声明或者定义由两部分组成(选择器（样式）)
　　3.2：标签选择器
　　3.3：类选择器
　　　　《实际开发过程中使用类选择器最多》
　　　　类选择器名称(css样式代码;)
　　3.4：ID选择器
　　　　为标签设置id="id名称"，而不是class="类名称";
　　　　ID选择符的前面是#号，而不是英文圆点(.);
　　　3.5：类和ID选择器的区别
　　　　相同点：可以应用于任何元素
　　　　不同点：(1)ID选择器只能在文档中使用一个，与类选择器不同，在一个HTML文档中，ID选择器只能使用一个，而且仅一次，而类选择器可以使用多次
　　　　　　　　(2)可以使用类选择器词列表方法为一个元素同时设置多个样式，我们可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，id选择器是不可以的，不能使用id词列表
　　　　ID选择器优先于类选择器
　　3.6：子选择器
　　　　还有一个比较有用的的选择器子选择器，即大于符号>，用来选择指定标签元素的第一代元素
　　3.7：包含(后代)选择器
　　　　包含选择器，即加入空格，用于选择指定标签元素下的后辈元素，如右侧代码编辑器中的代码。
　　3.8：通用选择器(了解即可)
　　　　*{color:red;}

　　　　　*{margin:0;padding:0}//去掉页面样式　
　　3.9：伪类选择符(一般用在链接的标签上面)
　　　　伪类选择器：a:link正常连接的方式
　　　　a:hover:鼠标放上去的样式
　　　　a:active:选择链接时的样式
　　　　a:visited:已经访问过的链接的样式

4：常见属性
　颜色属性
　　　　color属性定义文本的颜色
　　　　color：green;
　　　　color:#ff6600;
　　　　color:#f60;
　　　　color:rgb(255,255,255);
　　　　color:rgba(255,255,255,1);
　字体属性
　　　　font-size:字体大小
　　　　font-famliy:定义字体
　　　　font-weight:字体加粗
　　4.3：背景属性
　　　　背景颜色：background-color;
　　　　背景图片：background-image;
　　　　背景重复：background-repeat;
　　　　背景位置：background-position;
　　　　简写方式：
　　4.4：文本属性
　　　　text-align:横向排列
　　　　line-height:文本行高
　　　　　　(1):%基于字体大小的百分比行高
　　　　　　(2):数值来设置固定值
　　　　text-indent:首行缩进
　　　　letter-spacing:字符间距
　　　　属性值：normal默认，length设置具体的数值，可以设置负数，inherit继承
　　　4.5：边框属性
　　　　4.5.1:边框风格border-style;
　　　　(1):统一风格(简写风格)border-style;
　　　　(2):单独定义某一方向的边框样式
　　　　border-bottom-style:下边框样式
　　　　border-top-style:上边框样式
　　　　border-left-style:左边框样式
　　　　border-right-style:右边框样式
　　(3):边框风格样式的属性值
　　　　none:无边框
　　　　solid:直线边框
　　　　dashed:虚线边框
　　　　dotted:点状边框
　　　　double:双线边框
　　　　groove:吐槽边框
　　　　ridge:垄状边框
　　　　inset inset边框
　　　　outset outset边框
　　　　inherit继承
　　　　依托border-color的属性值
　　4.5.2:边框颜色border-color;
　　(1):统一风格(简写风格)
　　　　border-color;
　　(2):单独风格
　　　　border-top-color:上边边框颜色
　　　　border-bottom-color:下边边框颜色
　　　　border-left-color:左边边框颜色
　　　　border-right-color:右边边框颜色
　　(3):属性值
　　　　颜色值得名称：red,yellow;
　　　　RGB:rgb(255,255,0,0.1)
　　　　十六进制：#ff0,#ffff00;
　　(4):属性值的四种方式
　　　　一个值：border-color：(上,下,左,右)
　　　　两个值：border-color：(上,下)(左,右)
　　　　三个值：border-color：(上)(下,左)(右)
　　　　四个值：border-color：(上)(下)(左)(右)
　　4.5.3:简写方式

          border:1 2 3 4 

5：DIV+CSS布局
　　5.1：div和span
　　　　div和span在整个html标记中，没有任何意义，他们的存在就是为了应用css样式
　　　　div和span的区别在于，span是内联元素，div是块级元素
　　5.2：盒模型
　　　　5.2.1:margin
　　　　　　盒子外边距
　　　　5.2.2:padding
　　　　　　盒子内边距
　　　　5.2.3:border
　　　　　　盒子边框宽度
　　　　5.2.4:width
　　　　　　盒子宽度
　　　　5.2.5:height
　　　　　　盒子高度
　　5.3：布局相关的属性
　　　　5.3.1：position定位方式
　　　　　　(1):正常定位：relative
　　　　　　(2):根据父元素进行定位：absolute
　　　　　　(3):根据浏览器窗口进行定位：fixed
　　　　　　(4):没有定位：static
　　　　　　(5):继承inherit
　　　　5.3.2：定位
　　　　　　左left 右right 上top 下bottom离页面顶点的距离
　　　　5.3.3：z-index层覆盖先后顺序(优先级)
　　　　5.3.4：display显示属性(学习的重点)
　　　　　　　　display:none层不显示
　　　　　　　　display:block块状显示，在元素后面换行，显示下一个块元素
　　　　　　　　display:inline内联显示，多个可以显示在一行内

　　　　5.3.5：float浮动属性
　　　　　　left:左浮动
　　　　　　right:右浮动

　　　　5.3.6:clear清除浮动  left、right、both 左、右、左右一起

 

学习DOM的一些操作流程和一些其他的使用方法

elements：返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件

根据ID访问HTML元素：通过document对象调用getElementById()方法来查找具有唯一id属性值的元素

通过document对象调用getElementById()方法来查找具有唯一id属性值的元素
parentNode、previousSibling、nextSibling、childNodes、firstChild、lastChild、getElementsByTagName(tagName)
DOM访问表单控件
action、elements、length、method、target、reset()、submit()

length:返回表单内表单域的个数
reset() sumbit()重置表单和确定表单

总体来讲 很蒙 需要多看视频 多敲代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>查找列表框、下拉菜单控件</title>

</head>

<body>

<select name="city" id="city" size="5">

    <option value="beijing">北京</option>

    <option value="shanghai" selected>上海</option>

    <option value="tianjin">天津</option>

    <option value="nabjing">南京</option>

    <option value="shenzhen">深圳</option>

    <option value="wuhan">武汉</option>

</select><br>

<input type="button" value="第一个城市">

<input type="button" value="上一个城市">

<input type="button" value="下一个城市">

<input type="button" value="最后一个城市">

---------------------------------------------------------------
<title>对表格操作</title>
  </head>
   
  <body>
  <table id="mytable" border="1">
  <caption>甲骨文课程表</caption>
  <tr>
  <td>HTML</td>
  <td>JavaScript</td>
  </tr>
  <tr>
  <td>javaSE</td>
  <td>Oracle</td>
  </tr>
  <tr>
  <td>MySQL</td>
  <td>Struts2</td>
  </tr>
  </table>
  <input type="button" value="表格标题">
  <input type="button" value="第一行、第一格">
  <input type="button" value="第二行、第二格">
  <input type="button" value="第三行、第二格"><br>
  设置指定单元格的值：第<input type="text" id="row" size="2">行，
  第<input type="text" id="cell" size="2">列的值为
  <input type="text" id="course" size="10">
  <input type="button" id="btn_set" value="修改" onClick="updateCell()">
   

-----------------------------------------------------------------------------------

<title>创建元素</title>
  </head>
   
  <body>
  <ul id="city">
  <li>北京</li>
  <li>上海</li>
  </ul>
  <input type="button" value="创建插入替换节点" onClick="create()">
  <input type="button" value="复制节点" onClick="copy()">
  <input type="button" value="删除节点" onClick="del()"> 
</body>

</html>

 

上一篇：MVC 本地运行可以发布到IIS 报Sorry, an error occurred while processing your request.解决方案


下一篇：实现PHPCMS手机门户的伪静态