网页学习-小试牛刀

网页学习

  • 一、 网页组成
  • 二、HTML认知
    • 2.1 结构
    • 2.2 常用标签
    • 2.3 列表标签
    • 2.4 表格标签
    • 2.5 表单标签
    • 2.6 语义化标签
    • 2.7 字符实体
  • 三、CSS认知
  • 四、JS认知

一、 网页组成

分为三大部分:HTMLCSSJavaScript

  • HTML(Hyper Text Markup Language,即超文本标记语言),网页骨架。
  • CSS(Cascading Style Sheets,层叠样式表),使页面变得美观、优雅,网页皮肤。
  • JavaScript(简称JS,是一种脚本语言),实现实时、动态、交互的页面功能,网页肌肉。

学习目的是制作遥控车控制网页界面,因此主要学习HTML。

学习链接:黑马程序

二、HTML认知

2.1 结构


<html>
	<head>
		<title>网页的标题title>
	head>
	<body>
		网页的主题内容。
	body>
html>

2.2 常用标签

标题标签

<h1>1级标题h1>
<h2>2级标题h2>
<h3>3级标题h3>
<h4>4级标题h4>
<h5>5级标题h5>
<h6>6级标题h6>

段落标签

<p>这是一个段落p>

换行标签

<br>

水平分割线

<hr>

文本格式化标签

标签 说明
b/strong 加粗
u/ins 下划线
i/em 倾斜
s/del 删除线

图片标签

  • 单标签
  • 需要借助标签的属性进行设置
<img src="./1.jpg" alt="如果图片无法加载,则显示这段文字" title="鼠标悬停时显示" width="200" height="100">

音频/视频标签

<audio src="music.mp3" controls autoplay loop>音频audio>
<video src="video.mp4" controls autoplay loop>视频video>

controls:显示播放的控件
autoplay:自动播放
loop:循环播放

链接标签
一般网页的首页命名为index.html

<a href="./目标网页.html 或者 网址" target="">超链接a>
<a href="#">空链接a>

target为_self:覆盖原网页打开;_blank:新建一个网页并打开。

2.3 列表标签

分为:无序列表有序列表自定义列表

后续用到再学

2.4 表格标签

后续用到再学

2.5 表单标签

用途:登录、注册、搜索等功能。
网页学习-小试牛刀_第1张图片
input标签

  • 用于收集用户信息
  • 可以通过type属性值,展示不同的效果
    网页学习-小试牛刀_第2张图片
文本框:<input type="text" placeholder="请输入用户名">
<br>
<br>
密码框:<input type="password">
//placeholder:占位符,提示用户的。

单选功能:
<input type="radio" name="sex"><input type="radio" name="sex" checked>女
//name相同,则只能二选一。
//checked默认选女

多文件上传:
<input type="file" multiple>

表单域标签:
<form action="目的地址">
	......
	<input type="reset">//重置按钮,作用当前表单域。
form>

button按钮
网页学习-小试牛刀_第3张图片

<button type="button">普通按钮button>

下拉菜单

<select>
	<option>北京option>
	<option selected>上海option>
	<option>深圳option>
select>
//selected默认选中

文本域
推荐用CSS去设计美化。

<textarea cols="60" rows="90">textarea>

label标签

  • 用于绑定表单与内容的关系
//方法一
<input type="radio" name="sex" id="nan"> <label for="nan">label>
//方法二
<label><input type="radio" name="sex" checked>label>

2.6 语义化标签

  • 简单了解
    和div特点一致,不过是多了语义。
    网页学习-小试牛刀_第4张图片

2.7 字符实体

  • 网页不认识多个空格,只认识一个。
使用多个 可表示多个空格。

三、CSS认知

后续用到再学

四、JS认知

变量
var和let都是JavaScript中用于声明变量的关键字。使用var声明的变量是函数作用域的,而使用let声明的变量是块级作用域的,具有更严格的作用域规则。在ES6中,引入了let和const关键字来替代var,因为它们更加安全且易于维护。

Touch事件简介
pc上的web页面鼠 标会产生:onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件。

但是在移动终端上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件。

  • 当按下手指时,触发ontouchstart;
  • 当移动手指时,触发ontouchmove;
  • 当移走手指时,触发ontouchend。

你可能感兴趣的:(学习,javascript,html)