欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-04-10 09:51:08
基础英文单词setting：设置；project：工程、项目；font：字体；size：大小；default：默认；title：标题；label：标题、标签；row：行；column：列；bottom：下；middle：垂直居中；border：边框；center：水平居中；right：右；left：左；top：上；target：目标；link：链接；void：没有返回值；image：图片、图像；position：位置、定位；absolute：绝对的；relati...

基础英文单词

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（一定要有文件类型）
↓快捷键 ！自动补全代码
↓右键，在浏览器中打开

基本框架

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

快捷键总结

  • 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
    2020培训0706-0708【web入门】笔记「一」
    浏览器运行：2020培训0706-0708【web入门】笔记「一」
例题——设置网易页面 鼠标所到之处文字变红

注意：使用行内元素实现

<!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里面往这里粘是最安全的，你永远不知道其他地方粘来的代码格式有多可怕！
浏览器运行：
2020培训0706-0708【web入门】笔记「一」
————————————————————————————————————
【新手笔记 欢迎指正】

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

上一篇： nacos简介(一)

下一篇： java空指针不知道错哪 急救！！！

推荐阅读