js课程复习实践1：HTML和css

港控/mmm° 2022-09-14 09:47 118阅读 0赞

## 写在前面 ##

1.  本部分内容来源于鲜老师的课堂笔记， 学习策略是：

> 课上的，认真听，课后总结一下，然后将总结文字，写到博客中。  
> 视频，刷一下，把重要的内容复现一下或者截取一下，将代码，复制或截图写在博客中。

## 一.HTML基础:行内标记,表单输入等 ##

#### 选项，下拉选框 ####

<select>
    	<option>BeiJing</option>
    	<option>ShangHai</option>
    	<option selected>TaiWan</option>	
    </select>

默认展示第一个,添加selected属性,换一个选中。这里也可以写成： `selected = selected`  
![在这里插入图片描述][7daca1b441a04207bc3efa99e8331ce0.png]

##### 图片,音视频 #####

`src`可以是相对路径或者url,`title`属性大部分标记都有，用于专门做提示使用;`alt`一般用于图片标记，主要在图片加载失败的时候做一个提示.

`src`一般支持`wav ogg mp3`格式文件。`controls="controls"` 调用浏览器默认播放界面,`autoplay="autoplay"` 当资源加载完毕之后，自动播放。`audio.loop`表示循环播放。  
使用`audio>source.src`属性来添加,可以添加多个,避免失效无法播放。

视频标签的用法和声频标签完全一致，但是，设置`video.poster`属性，可以使视频处于加载状态的时候使用一张图片来代替。

#### 行内标记 ####

上标，下标，加粗，倾斜，删除，提示，行内分区

H<sub>2</sub>o		 
    X<sup>2</sup>=4
    
    
    <b>加粗</b>
    <i>倾斜</i>
    <del>删除</del>
    <strong>提示标记</strong>
    <span>行内分区元素无效果</span>

![在这里插入图片描述][e5ad95a0c9a14319a28d5da54fe0cbe1.png]

#### form表单有一些输入 ####

<form action="http://www.baidu.com">
    			
    			
    			输入框:<input name="wd" placeholder="输入框的提示"/><br>
    			
    			密码输入框:<input type="password" placeholder="输入密码" /><br>
    			
    			
    			性别:男<input type="radio"/>女<input 	type="radio"/><br>
    			性别只能单选:男<input type="radio" name="gender" checked/>女<input 	type="radio" name="gender"/><br>	
    			性别可以点字:<label for="man">男</label> <input type="radio" id="man" name="gender"/>
    			<label for="woman">女</label><input id="woman"	type="radio" name="gender"/><br>		
    			爱好复选框: 登山<input type="checkbox"/> 打球<input type="checkbox" checked> 踢球 <input type="checkbox"><br>		
    			个人简介:<textarea rows="3" cols="10"></textarea><br>
    			
    			数字: <input type="number" min="50" max="100" step="10"></input>
    			
    								
    			颜色选择:<input type="color" name="color" id="" value="" /><br>
    			日期:<input type="date" name="" id="" value="" /><br>
    			时间:<input type="time" name="" id="" value="" /><br>
    			日期时间:<input type="datetime-local" name="" id="" value="" /><br>
    			
    			邮箱: <input type="email" name="" id="" value="" /><br>
    			个人主页: <input type="url"><br>
    			
    			联系方式: <input type="tel" name="" id="" value="" /><br>  
    			
    			
    			
    			<input type="reset" value="重置">
    			<input type="button" name="" id="" value="普通按钮" /><br>
    			
    			<button type="button">直接使用button元素,可能会提交表单</button>
    			
    			<br><input type="submit" value="提交"/>	
    		</form>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16]

form.action属性：把数据提交到什么地方  
input默认`type=text`，所以也可以不写这个。`input.placeholder`是显示输入框的提示。

*  单选框和多选框:radio  
    input\[type=“radio”\],默认是可以多选。  
    通过设置`input.name相同`来设置只能单选,使用`input.checked`,设置默认选中。  
    使用`input.for`属性,设置点击字体与选框一起联动。
 *  复选框：  
    input\[type=“checkbox”\],也可设置选中,input.checked

#### 表格 ####

`table>tr>td.colspan`: 指示可以跨的列数,是用来`计数`的,例如,`colspan="3"`,就是当前位置和`向右`一个位置共3个位置被占用; 如果`rowspan="2"`,就是当前位置和`向下`共2个位置被占用,而且不光`td`内容可以,标题`th`也可以.

<table border="1" cellspacing="0">
    	<tr>
    		<th>姓名</th>
    		<th>年龄</th>
    		<th>性别</th>
    		<th>其他</th>
    	</tr>	
    	
    	<tr>
    		<td rowspan="2">总结</td>
    		<td colspan="3">aizsdfdddddddd</td>
    	</tr>
    	<tr>
    		<td colspan="2">其他内容fsfsfs</td>
    	</tr>	
    </table>

![32b4f95c29704ff7abe2dabb45fa58a9.png][]![deb4711e53f54994805ec999ac475216.png][]  
如果要写出更复杂一点的表格样式(如左图),  
可以先给格子编上号,1,2,3,4,5,6,7,8,9,  
再依次占用

*  复习:

> `align`: 规定单元格中内容的水平对齐方式,left,right,center,justify(每行拉长到相同长度)  
> `valign`: 垂直,值有top,上对齐。middle,bottom下对齐,baseline基线对齐  
> `border` 规定围绕表格内边框的外边框宽度。内边框一直是1px.但是在border=“0”，可以显示没有边框的表格。

## 二. CSS基础: ##

color设置前景色

<h1 style='font-family:"楷体" '>bilibili哔哩哔哩动画</h1>

也可以生效

#### 字体和背景,框等 ####

颜色`rgba(255,0,255,1)`表示不透明,0表示透明; \#fff,\#ffffff都是指示`rgb`颜色

![6efd799f2f6c4c9bbe706894d4280d76.png][]

#### 阴影 ####

这里主要演示了多次

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 1]

#### \-------------定位 ####

且看下回分解

.outer{
        
    	width:500px;
    	height: 500px;
    	background-color: green;
    	margin:20px;				
    }
    .inner{
        
    	width:100px;
    	background-color: orange;
    	height: 100px;
    	margin-top:500px;
    	/* fixed 相对于浏览器定位 */
    	/* relative 相对于自身原来的位置定位 */
    	/* absolute 绝对定位，相对于上级已定位的元素进行定位，如果没有上一级元素已经定位，则相对于html元素定位 */
    	/* sticky 粘性定位 */
    	/* static 没有定位(没有定位) */
    	position: sticky;
    	top:10px;
    	left:10px;
    }
    .inner:hover{
        
    	/* position: relative;
    	bottom:10px;
    	left:10px; */
    }
    
    
    <div class="outer">
    	<div class="inner"></div>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

#### 浮动 ####

div{
        
    width:5cm;
    	height: 3cm;
    }
    .a{
        
    	background-color: orange;
    	float: left;
    }
    .b{
        
    	background-color: green;
    	float: left;
    }
    .c{
        
    	background-color: aqua;
    	/* 清除浮动影响 */
    	clear: both;
    }
    
    		<div class="a">橙色</div>
    		<div class="b">绿色</div>
    		<div class="c">青色</div>

`float:left`  
清除浮动影响,`clear：both`.可以让固定元素,不受浮动元素影响,正常显示。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 2]

## 三. js基础 ##

#### 作用域 ####

function cf() {
        
    	c = 10
     }
     cf()
     console.log(c)		// 10

function bf() {
        
    	var b = 10
    }
    bf()
    console.log(b)		// Uncaught ReferenceError: b is not defined

#### `+`运算 ####

首先,看操作数是否都是数值,如果是,则进行`+`,  
如果不是,先尝试`valueof()`,若可以转换为数,也进行`+`,  
若不能,则先调用`tostring`方法,在进行`拼接`运算。

var a = 1, b = "1", c = true;
    var d = []; // Array
    var e = {
        }; // Object
    console.log(a + a, typeof (a + a));
    console.log(a + b, typeof (a + b));
    console.log(a + c, typeof (a + c));
    console.log(a + d, typeof (a + d));
    console.log(a + e, typeof (a + e));

![在这里插入图片描述][f3b38227938d4c78a963d7f7054acbef.png]

#### 事件 ####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 3]

h.innerHTML = " 点击了按钮 <span style="color:yellow">" + count + "</span>次";

如果吧 innerHTML改成innerText,它就不会解释`<span>`标记了,而是把它当成文本来展示。  
但是，在获取时就相反了

<h1 id="h">这是<span style="color: green;">第0个</span>标题</h1>
    function show_head() {
        
      var h = document.getElementsByTagName("h1")[0];
      var content = h.innerHTML;
      alert("标签中的内容是: " + content);	//  这是<span style="color: green;">第0个</span>标题
    
      alert("标签中的内容是: " + document.getElementsByTagName("h1")[2].innerText); //这是第0个标题
    }

#### 一个±\*/的窗口 ####

![在这里插入图片描述][4561d5b7b7ed4b22857de78c7ca4ca5e.png]

[7daca1b441a04207bc3efa99e8331ce0.png]: /images/20220828/98eb8d1953f84a6c8af1fe5c69e6340e.png
[e5ad95a0c9a14319a28d5da54fe0cbe1.png]: /images/20220828/c440ab00bf194df990e4c83312f89e6c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/555be85ba9874721aba4cf8ee5c8f788.png
[32b4f95c29704ff7abe2dabb45fa58a9.png]: https://img-blog.csdnimg.cn/32b4f95c29704ff7abe2dabb45fa58a9.png
[deb4711e53f54994805ec999ac475216.png]: /images/20220828/71d142a327fb4a92b8239ca3f3102a1b.png
[6efd799f2f6c4c9bbe706894d4280d76.png]: /images/20220828/b30e37d29f7f451296a2efc26b986683.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/4abe09cbe4094b4a9f631d52907f3961.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/93216ffeb4e349cd9122229aab4ba6ce.png
[f3b38227938d4c78a963d7f7054acbef.png]: /images/20220828/92a81a2777db4b4ca16b63d586830ac8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/c9458fb46c4d4bed9593deead036a87b.png
[4561d5b7b7ed4b22857de78c7ca4ca5e.png]: /images/20220828/99b0bdabf51c49ea959a9de2a82b279e.png