当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 2020培训0706-0708【web入门】笔记「一」

2020培训0706-0708【web入门】笔记「一」

2020年07月14日  | 移动技术网IT编程  | 我要评论

基础英文单词

setting：设置；
project：工程、项目；
font：字体；
size：大小；
default：默认；
title：标题；
label：标题、标签；
row：行；
column：列；
bottom：下；
middle：垂直居中；
border：边框；
center：水平居中；
right：右；
left：左；
top：上；
target：目标；
link：链接；
void：没有返回值；
image：图片、图像；
position：位置、定位；
absolute：绝对的；
relative：相对的；
fixed：固定的

新建一个工程

↓新建一个空白文件夹，拖拽到vscode中
↓下载插件（已经下载好了，就不讲了）
↓新建文件，重命名dangerous.html（一定要有文件类型）
↓快捷键 ！自动补全代码
↓右键，在浏览器中打开

基本框架

在这里插入图片描述

快捷键总结

  • ctrl+h：替换和查找
  • ctrl+/：注释
  • alt+shift+f：整理代码
  • alt+shift+↓：单行复制
  • ctrl+shift+i：可以看浏览器源代码

转义字符

html里的空格、换行不识别，需要有个特殊字符叫转义字符

  • 空格：&nsbp；
  • 小于号（less than）：&lt；
  • 大于号（greater than）：&gt：
  • and符号（&）：&amp；
  • 版权所有（copyright）：&copy；
  • 换行使用：<br>

标签和属性

标签写法：
（ 原则上一段标签写完了要有结束 / ）
（1）单标签（自闭和）例：<input/>
（2）双标签（闭合）例：<p>xxx</p>

标签中的属性：
属性来规定这个标签的特征，例如：对齐方式、文本长度等。例：<input type=”checkbox”/>

一些文本修饰标签

  • <i>：斜体标签
  • <em>:斜体标签
  • <u>:下划线标签
  • <b>：加粗
  • <strong>:加粗
  • <del>:删除线
  • <small>:小字标签
  • <big>:大字标签
  • <time>:时间或日期标签
  • <code>:代码

基础标签

  • <div>文本框<div/>
  • meta标签：辅助标签，写错也没事。例如：关键字可以帮助搜索引擎把我们的网页放到爬虫索引库
  • title标签：当前网页的标题，title属性是鼠标悬停在标签上的文本
  • style标签：用于定义样式，以便下面使用。（还有一个style属性，是为某个标签单独设置的样式
  • script标签：写js代码
  • h1~h6（heading）标签：标题（默认字体加粗，有上下外边距）
  • time标签：一个普通的标签，没有样式
  • sup标签：上标；
  • sub标签：下标
  • p（paragraph）标签：为了描述段落、正文的意思，有上下外边距
  • pre标签：预定义，它可以识别放在里面的代码里的空格，有的字符不用转义，写什么样，网页就显示啥样
  • img标签：引用图片
    src属性：值，是url或者相对路径
    alt属性：图片路径写错了，图片服务崩了，无法显示这张图片，就会显示内容（alt和title的区别：alt是前者图片不显示的时候显示的文字，title是通用属性，任何标签都能写，鼠标悬停）
    width属性：宽，如果只设置宽，他的高会等比例自动设置
    height属性：高

通用属性

  • id属性：表示你这个标签的名字，不重复使用，在整个网页里面唯一的存在
  • class属性：css里面的class选择器的名字
  • style属性：行内样式，这里面写css的样式
  • title属性：鼠标悬停出现的文字
  • data-*属性：开发人员自定义属性，为的是给JS操作用
  • dir属性： tr | rt |
  • hidden属性
  • tabindex属性：切换焦点的顺序，值是从小到大（财务软件和成绩软件常用）
  • accesskey属性：快捷键，这里的值写字母，用的时候配合alt+字母

基础属性

  • font属性：文字，设置你包含的标签或者文字的字体（是HTML4里的标签，html5不推荐使用）
  • size属性：（属性中的值不写文字大小像素，写整数）
  • color属性：文字的颜色

【不全】

块级元素和行内元素

按显示效果把标签分为块级元素和行内元素，一般写法块级元素包含行内元素
【这个板块的内容和其他笔记结合在一起看比较好懂】

  1. 块级（block）
    自己占一行，因为他的宽度是100%，有上下左右四个边的8px的外边距；高度是根据里面的内容拉伸的，如果没有内容就没高 可以设置width和height
    例：body、div、h1~h6、p、table、header、form、article、footer
    （注意body也是一个块级元素 默认是没有高的）
  2. 行内（inline）
    宽高根据标签里面的内容拉伸的 不能设置高和宽，想设置需要设置inline-block
    例：span、small、b、i、time、big
    在这里插入图片描述
    浏览器运行：在这里插入图片描述
例题——设置网易页面 鼠标所到之处文字变红

注意：使用行内元素实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易www.163.com</title>
    <style>
        a
        {
            color: black;
            text-decoration: none;
            font-size: large;
            width: 2.5em;
            display: inline-block;
        }
        div a:hover
        {
            color: red;
        }
    </style>
</head>
<body>
    <span>
        <div>
            <a href="#" style="font-weight: bolder;">教育</a>
            <a href="#">军事</a>
            <a href="#">图片</a>
            <a href="#">航空</a>
        </div>
        <div>
            <a href="#" style="font-weight: bolder;">娱乐</a>
            <a href="#">电影</a>
            <a href="#">音乐</a>
            <a href="#">经典</a>
        </div>
    </span>
</body>
</html>

【插句题外话】：实在不知道 vscode怎么往这里粘代码，选了 markup（最接近的一个）代码块，还有就是word里面往这里粘是最安全的，你永远不知道其他地方粘来的代码格式有多可怕！
浏览器运行：
在这里插入图片描述
————————————————————————————————————
【新手笔记 欢迎指正】

本文地址：https://blog.csdn.net/RK_Dangerous/article/details/107289534

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网