> 文章列表 > 网页学习-小试牛刀

网页学习-小试牛刀

网页学习-小试牛刀

网页学习

  • 一、 网页组成
  • 二、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 表单标签

用途:登录、注册、搜索等功能。
在这里插入图片描述
input标签

  • 用于收集用户信息
  • 可以通过type属性值,展示不同的效果
    在这里插入图片描述
文本框:<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按钮
在这里插入图片描述

<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特点一致,不过是多了语义。
    在这里插入图片描述

2.7 字符实体

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

三、CSS认知

后续用到再学

四、JS认知