分类 Learn 下的文章

效果预览

废话不多说,先上效果,然后再介绍下Vim基本操作以及快捷键

Vim

介绍

Vim是一种文本编辑器,是Linux和Unix系统中最常用的编辑器之一。它是Vi编辑器的改进版,包含了Vi编辑器的所有功能,并增加了很多新的功能和命令。Vim的特点是可以使用键盘快捷键完成各种操作,非常适合程序员和系统管理员使用。它支持语法高亮、多标签窗口、代码折叠、自动缩进等功能,还可以通过插件扩展功能。Vim也被广泛应用于编写各种文本文件,如程序代码、配置文件、Markdown文档等。

PS:只要与linux打交道,应该是避免不了接触这个了,也有一些竞赛选手喜欢用这个。并且有丰富的插件功能,用来实现各种功能。如果你能熟练使用Vim,那么就会发现其好处,当然了,萝卜青菜各有所爱,如果不喜欢,也不用强求自己使用,

常用指令

  • i: 在当前光标处插入文本。
  • a: 在当前光标后插入文本。
  • o: 在当前行下插入新行。
  • dd: 删除当前行。
  • x: 删除当前光标下的字符。
  • :w: 保存文件。
  • :q: 关闭当前窗口。
  • :wq: 保存并关闭当前窗口。
  • :q!: 强制关闭当前窗口,丢弃所有修改。
  • :set nu: 显示行号。
  • :set nonu: 取消显示行号。
  • /: 查找关键字。
  • :%s/old/new/g: 在全文中将 "old" 替换为 "new"。

这里只是列举了一些基本的指令,Vim 的指令非常多,可以根据需要进一步学习和使用。

Vim工作模式

Vim键盘图

 

配置文件

set sw=4
set ts=4
set et
set smarttab
set smartindent
set lbr
set fo+=mB
set sm
set selection=inclusive
set wildmenu
set mousemodel=popup

set pastetoggle=<F11>

au FileType php setlocal dict+=~/.vim/dict/php_funclist.dict
au FileType css setlocal dict+=~/.vim/dict/css.dict
au FileType c setlocal dict+=~/.vim/dict/c.dict
au FileType cpp setlocal dict+=~/.vim/dict/cpp.dict
au FileType scale setlocal dict+=~/.vim/dict/scale.dict
au FileType javascript setlocal dict+=~/.vim/dict/javascript.dict
au FileType html setlocal dict+=~/.vim/dict/javascript.dict
au FileType html setlocal dict+=~/.vim/dict/css.dict

"
"syntastic相关
"execute pathogen#infect()
let g:syntastic_python_checkers=['pylint']
let g:syntastic_php_checkers=['php', 'phpcs', 'phpmd']
"golang
"Processing... % (ctrl+c to stop)
let g:fencview_autodetect=0
set rtp+=$GOROOT/misc/vim
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" 显示相关  
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
syntax on
set cul "高亮光标所在行
set cuc
set shortmess=atI   " 启动的时候不显示那个援助乌干达儿童的提示  
set go=             " 不要图形按钮  
"color desert     " 设置背景主题  
color ron     " 设置背景主题  
"color torte     " 设置背景主题  
"set guifont=Courier_New:h10:cANSI   " 设置字体  
"autocmd InsertLeave * se nocul  " 用浅色高亮当前行  
autocmd InsertEnter * se cul    " 用浅色高亮当前行  
set ruler           " 显示标尺  
set showcmd         " 输入的命令显示出来,看的清楚些  
"set whichwrap+=<,>,h,l   " 允许backspace和光标键跨越行边界(不建议)  
set scrolloff=3     " 光标移动到buffer的顶部和底部时保持3行距离  
set statusline=%F%m%r%h%w\ [FORMAT=%{&ff}]\ [TYPE=%Y]\ [POS=%l,%v][%p%%]\ %{strftime(\"%d/%m/%y\ -\ %H:%M\")}   "状态行显示的内容  
set laststatus=2    " 启动显示状态行(1),总是显示状态行(2)  
"set foldenable      " 允许折叠  
""set foldmethod=manual   " 手动折叠  
set nocompatible  "去掉讨厌的有关vi一致性模式,避免以前版本的一些bug和局限  
" 显示中文帮助
if version >= 603
        set helplang=cn
        set encoding=utf-8
endif
" 自动缩进
set autoindent
set cindent
" Tab键的宽度
set tabstop=4
" 统一缩进为4
set softtabstop=4
set shiftwidth=4
" 使用空格代替制表符
set expandtab
" 在行和段开始处使用制表符
set smarttab
" 显示行号
set number
" 历史记录数
set history=1000
"搜索逐字符高亮
set hlsearch
set incsearch
"语言设置
set langmenu=zh_CN.UTF-8
set helplang=cn
" 总是显示状态行
set cmdheight=2
" 侦测文件类型
filetype on
" 载入文件类型插件
filetype plugin on
" 为特定文件类型载入相关缩进文件
filetype indent on
" 保存全局变量
set viminfo+=!
" 带有如下符号的单词不要被换行分割
set iskeyword+=_,$,@,%,#,-
" 字符间插入的像素行数目

"markdown配置
au BufRead,BufNewFile *.{md,mdown,mkd,mkdn,markdown,mdwn}   set filetype=mkd
au BufRead,BufNewFile *.{go}   set filetype=go
au BufRead,BufNewFile *.{js}   set filetype=javascript
"rkdown to HTML  
nmap md :!~/.vim/markdown.pl % > %.html <CR><CR>
nmap fi :!firefox %.html & <CR><CR>
nmap \ \cc
vmap \ \cc

"将tab替换为空格
nmap tt :%s/\t/    /g<CR>



"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
"""""新文件标题
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
"新建.c,.h,.sh,.java文件,自动插入文件头 
autocmd BufNewFile *.cpp,*.[ch],*.sh,*.rb,*.java,*.py exec ":call SetTitle()" 
""定义函数SetTitle,自动插入文件头 
func SetTitle() 
        "如果文件类型为.sh文件 
        if &filetype == 'sh' 
                call setline(1,"\#!/bin/bash") 
                call append(line("."), "") 
    elseif &filetype == 'python'
        call setline(1,"#!/usr/bin/env python")
        call append(line("."),"# coding=utf-8")
            call append(line(".")+1, "") 

    elseif &filetype == 'ruby'
        call setline(1,"#!/usr/bin/env ruby")
        call append(line("."),"# encoding: utf-8")
            call append(line(".")+1, "")

"    elseif &filetype == 'mkd'
"        call setline(1,"<head><meta charset=\"UTF-8\"></head>")
        else 
                call setline(1, "/*************************************************************************") 
                call append(line("."), "        > File Name: ".expand("%")) 
                call append(line(".")+1, "        > Author: echo") 
                call append(line(".")+2, "        > Mail: big_fw@foxmail.com") 
                call append(line(".")+3, "        > Created Time: ".strftime("%c")) 
                call append(line(".")+4, " ************************************************************************/") 
                call append(line(".")+5, "")
        endif
        if expand("%:e") == 'cpp'
                call append(line(".")+6, "#include <iostream>")
        call append(line(".")+7, "using std::cin;")
        call append(line(".")+8, "using std::cout;")
        call append(line(".")+9, "using std::endl;")
                call append(line(".")+10, "using namespace std;")
                call append(line(".")+11, "")
        endif
        if &filetype == 'c'
                call append(line(".")+6, "#include <stdio.h>")
                call append(line(".")+7, "")
        endif
        if expand("%:e") == 'h'
                call append(line(".")+6, "#ifndef _".toupper(expand("%:r"))."_H")
                call append(line(".")+7, "#define _".toupper(expand("%:r"))."_H")
                call append(line(".")+8, "#endif")
        endif
        if &filetype == 'java'
                call append(line(".")+6,"public class ".expand("%:r"))
                call append(line(".")+7,"")
        endif
        "新建文件后,自动定位到文件末尾
endfunc 
autocmd BufNewFile * normal G
command WQ wq 
command Wq wq 
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
"键盘命令
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
:nmap <silent> <F9> <ESC>:Tlist<RETURN>
" shift tab pages
map <S-Left> :tabp<CR>
map <S-Right> :tabn<CR>
map! <C-Z> <Esc>zzi
map! <C-O> <C-Y>,
map <C-A> ggVG$"+y
map <Esc><Esc> :w<CR>
map <F12> gg=G
map <C-w> <C-w>w
imap <C-k> <C-y>,
imap <C-t> <C-q><TAB>
imap <C-j> <ESC>
" 选中状态下 Ctrl+c 复制
"map <C-v> "*pa
imap <C-v> <Esc>"*pa
imap <C-a> <Esc>^
imap <C-e> <Esc>$
vmap <C-c> "+y
"set mouse=v
"set clipboard=unnamed
"去注释  
nnoremap <F1> :g/^\s*#/d<CR>
"去空行  
nnoremap <F2> :g/^\s*$/d<CR>
"比较文件  
nnoremap <C-F2> :vert diffsplit 
"nnoremap <Leader>fu :CtrlPFunky<Cr>
"nnoremap <C-n> :CtrlPFunky<Cr>
"列出当前目录文件  
map <F3> :NERDTreeToggle<CR>
imap <F3> <ESC> :NERDTreeToggle<CR>
"打开树状文件目录  
map <C-F3> \be  
:autocmd BufRead,BufNewFile *.dot map <F5> :w<CR>:!dot -Tjpg -o %<.jpg % && eog %<.jpg  <CR><CR> && exec "redr!"
"C,C++ 按F5编译运行
map <F5> :call CompileRunGcc()<CR>
func! CompileRunGcc()
        exec "w"
        if &filetype == 'c'
                exec "!g++ % -o %<"
                exec "!time ./%<"
        elseif &filetype == 'cpp'
                exec "!g++ % -std=c++11 -o %<"
                exec "!time ./%<"
        elseif &filetype == 'java' 
                exec "!javac %" 
                exec "!time java %<"
        elseif &filetype == 'sh'
                :!time bash %
        elseif &filetype == 'python'
                exec "!time python2.7 %"
    elseif &filetype == 'html'
        exec "!firefox % &"
    elseif &filetype == 'go'
"        exec "!go build %<"
        exec "!time go run %"
    elseif &filetype == 'mkd'
        exec "!~/.vim/markdown.pl % > %.html &"
        exec "!firefox %.html &"
        endif
endfunc
"C,C++的调试
map <F8> :call Rungdb()<CR>
func! Rungdb()
        exec "w"
        exec "!g++ % -std=c++11 -g -o %<"
        exec "!gdb ./%<"
endfunc


"代码格式优化化

map <F6> :call FormartSrc()<CR><CR>

"定义FormartSrc()
func FormartSrc()
    exec "w"
    if &filetype == 'c'
        exec "!astyle --style=ansi -a --suffix=none %"
    elseif &filetype == 'cpp' || &filetype == 'hpp'
        exec "r !astyle --style=ansi --one-line=keep-statements -a --suffix=none %> /dev/null 2>&1"
    elseif &filetype == 'perl'
        exec "!astyle --style=gnu --suffix=none %"
    elseif &filetype == 'py'||&filetype == 'python'
        exec "r !autopep8 -i --aggressive %"
    elseif &filetype == 'java'
        exec "!astyle --style=java --suffix=none %"
    elseif &filetype == 'jsp'
        exec "!astyle --style=gnu --suffix=none %"
    elseif &filetype == 'xml'
        exec "!astyle --style=gnu --suffix=none %"
    else
        exec "normal gg=G"
        return
    endif
    exec "e! %"
endfunc
"结束定义FormartSrc


""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
""实用设置
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
if has("autocmd")
      autocmd BufReadPost *
          \ if line("'\"") > 0 && line("'\"") <= line("$") |
          \   exe "normal g`\"" |
          \ endif
endif
"当打开vim且没有文件时自动打开NERDTree
autocmd vimenter * if !argc() | NERDTree | endif
" 只剩 NERDTree时自动关闭
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTreeType") && b:NERDTreeType == "primary") | q | endif

" 设置当文件被改动时自动载入
set autoread
" quickfix模式
autocmd FileType c,cpp map <buffer> <leader><space> :w<cr>:make<cr>
"代码补全 
set completeopt=preview,menu 
"允许插件  
"filetype plugin on
"共享剪贴板  
"set clipboard+=unnamed 
"自动保存
set autowrite
"set ruler                   " 打开状态栏标尺
"set cursorline              " 突出显示当前行
set magic                   " 设置魔术
set guioptions-=T           " 隐藏工具栏
set guioptions-=m           " 隐藏菜单栏
""set foldcolumn=0
""set foldmethod=indent 
""set foldlevel=3 
" 不要使用vi的键盘模式,而是vim自己的
set nocompatible
" 去掉输入错误的提示声音
set noeb
" 在处理未保存或只读文件的时候,弹出确认
set confirm
"禁止生成临时文件
set nobackup
set noswapfile
"搜索忽略大小写
set ignorecase




set linespace=0
" 增强模式中的命令行自动完成操作
set wildmenu
" 使回格键(backspace)正常处理indent, eol, start等
set backspace=2
" 允许backspace和光标键跨越行边界
set whichwrap+=<,>,h,l
" 可以在buffer的任何地方使用鼠标(类似office中在工作区双击鼠标定位)
"set mouse=a
set selection=exclusive
set selectmode=mouse,key
" 通过使用: commands命令,告诉我们文件的哪一行被改变过
set report=0
" 在被分割的窗口间显示空白,便于阅读
set fillchars=vert:\ ,stl:\ ,stlnc:\
" 高亮显示匹配的括号
set showmatch
" 匹配括号高亮的时间(单位是十分之一秒)
set matchtime=1
" 光标移动到buffer的顶部和底部时保持3行距离
set scrolloff=3
" 为C程序提供自动缩进
"自动补全
"":inoremap ( ()<ESC>i
"":inoremap ) <c-r>=ClosePair(')')<CR>
":inoremap { {<CR>}<ESC>O
":inoremap } <c-r>=ClosePair('}')<CR>
"":inoremap [ []<ESC>i
"":inoremap ] <c-r>=ClosePair(']')<CR>
"":inoremap " ""<ESC>i
"":inoremap ' ''<ESC>i
""function! ClosePair(char)
""        if getline('.')[col('.') - 1] == a:char
""                return "\<Right>"
""        else
""                return a:char
""        endif
""endfunction
filetype plugin indent on 
"打开文件类型检测, 加了这句才可以用智能补全
set completeopt=longest,menu
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" CTags的设定  
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
let Tlist_Sort_Type = "name"    " 按照名称排序  
let Tlist_Use_Right_Window = 1  " 在右侧显示窗口  
let Tlist_Compart_Format = 1    " 压缩方式  
let Tlist_Exist_OnlyWindow = 1  " 如果只有一个buffer,kill窗口也kill掉buffer  
""let Tlist_File_Fold_Auto_Close = 0  " 不要关闭其他文件的tags  
""let Tlist_Enable_Fold_Column = 0    " 不要显示折叠树  
"let Tlist_Show_One_File=1            "不同时显示多个文件的tag,只显示当前文件的
"设置tags  
set tags=tags;  
"set autochdir 


""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
"其他东东
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
"默认打开Taglist 
let Tlist_Auto_Open=0 
"""""""""""""""""""""""""""""" 
" Tag list (ctags) 
"""""""""""""""""""""""""""""""" 
let Tlist_Ctags_Cmd = '/usr/local/bin/ctags' 
let Tlist_Show_One_File = 1 "不同时显示多个文件的tag,只显示当前文件的 
let Tlist_File_Fold_Auto_Close = 1
let Tlist_Exit_OnlyWindow = 1 "如果taglist窗口是最后一个窗口,则退出vim 
let Tlist_Use_Right_Window = 1 "在右侧窗口中显示taglist窗口
" minibufexpl插件的一般设置
let g:miniBufExplMapWindowNavVim = 1
let g:miniBufExplMapWindowNavArrows = 1
let g:miniBufExplMapCTabSwitchBufs = 1
let g:miniBufExplModSelTarget = 1  
nmap tl :Tlist<cr>

"python补全
let g:pydiction_location = '~/.vim/after/complete-dict'
let g:pydiction_menu_height = 20
let Tlist_Ctags_Cmd='/usr/local/bin/ctags'
let g:miniBufExplMapWindowNavVim = 1
let g:miniBufExplMapWindowNavArrows = 1
let g:miniBufExplMapCTabSwitchBufs = 1
let g:miniBufExplModSelTarget = 1


set iskeyword+=.
set termencoding=utf-8
set encoding=utf8
set fileencodings=utf8,ucs-bom,gbk,cp936,gb2312,gb18030

autocmd FileType python set omnifunc=pythoncomplete#Complete

"set nocompatible               " be iMproved
"filetype off                   " required!

set rtp+=~/.vim/bundle/vundle/
"call vundle#rc()

" let Vundle manage Vundle
" required! 
"Bundle 'gmarik/vundle'

" My Bundles here:
"
" original repos on github
" Bundle 'tpope/vim-fugitive'
" Bundle 'rstacruz/sparkup', {'rtp': 'vim/'}
" Bundle 'Yggdroot/indentLine'
let g:indentLine_char = '┊'
"ndle 'tpope/vim-rails.git'
" vim-scripts repos
" Bundle 'L9'
" Bundle 'FuzzyFinder'
" non github repos
" Bundle 'https://github.com/wincent/command-t.git'
" Bundle 'Auto-Pairs'
" Bundle 'python-imports.vim'
" Bundle 'CaptureClipboard'
" Bundle 'ctrlp-modified.vim'
" Bundle 'last_edit_marker.vim'
" Bundle 'synmark.vim'
"Bundle 'Python-mode-klen'
" Bundle 'SQLComplete.vim'
" Bundle 'Javascript-OmniCompletion-with-YUI-and-j'
"Bundle 'JavaScript-Indent'
"Bundle 'Better-Javascript-Indentation'
"Bundle 'jslint.vim'
"Bundle "pangloss/vim-javascript"
"Bundle 'Vim-Script-Updater'
"Bundle 'ctrlp.vim'
"Bundle 'tacahiroy/ctrlp-funky'
"Bundle 'jsbeautify'
"Bundle 'The-NERD-Commenter'
"django
"Bundle 'django_templates.vim'
"Bundle 'Django-Projects'

"Bundle 'FredKSchott/CoVim'
"Bundle 'djangojump'
" ...
let g:html_indent_inctags = "html,body,head,tbody"
let g:html_indent_script1 = "inc"
let g:html_indent_style1 = "inc"

filetype plugin indent on     " required!
"
"ctrlp设置
"
set wildignore+=*/tmp/*,*.so,*.swp,*.zip,*.pyc,*.png,*.jpg,*.gif     " MacOSX/Linux
set wildignore+=*\\tmp\\*,*.swp,*.zip,*.exe,*.pyc,*.png,*.jpg,*.gif  " Windows

let g:ctrlp_custom_ignore = '\v[\/]\.(git|hg|svn)$'
let g:ctrlp_custom_ignore = '\v\.(exe|so|dll)$'
let g:ctrlp_extensions = ['funky']

let NERDTreeIgnore=['\.pyc']

 

方法1

在登录初始目录新建文件 .vimrc 并且将以上命令复制进去

vim .vimrc

如果 出错/太混乱 可以直接删除

rm -rf .vimrc

 

方法2

1. 代码

以上配置可直接通过命令实现

Centos: wget -qO- https://raw.github.com/ma6174/vim/master/setup.sh | sh -x
Ubuntu: curl -s https://raw.github.com/ma6174/vim/master/setup.sh | sudo sh -x

 

2. 讲解

  1. wget -qO- https://raw.github.com/ma6174/vim/master/setup.sh
    

    它使用wget命令从URL "https://raw.github.com/ma6174/vim/master/setup.sh"下载shell脚本,并将其输出到标准输出流(stdout)。

  2. sh -x
    

    这个部分会将上一步下载的shell脚本作为输入,运行它并将运行过程中的输出打印到标准输出流(stdout)上。-x选项是用来在执行脚本时输出调试信息的。

     

    整个命令的意思是下载shell脚本并立即运行它,输出运行过程中的调试信息。该脚本用于安装和配置Vim编辑器。

    -q选项用于静默下载文件,-O选项用于将下载内容输出到标准输出流,|字符用于将第一部分的输出传递给第二部分作为输入。

     

参考链接

Centos 7系统下的vim配置_Memory逝言的博客-CSDN博客

--> 效果预览废话不多说,先上效果,然后再介绍下Vim基本操作以及快捷键Vim介绍Vim是一种文本编辑器,是Linux和Unix系统中最常用的编辑器之一。它是Vi编辑器的改进版,包含了Vi编辑器的所有功能,并增加了很多新的功能和命令。Vim的特点是可以使用键盘快捷键完成各种操作,非常适合程序员和系统管理员使用。它支持语法高亮、多标签窗口、代码折叠、自动缩进等功能,还可以通过插件扩展功能。Vim也被...

排序

快速排序

归并排序是由下向上的,先处理子数组然后再合并。而快速排序正好相反,它的过程是由上向下的,先分出两个子区间,再对子区间进行排序。归并排是非原地算法,而快排则是原地排序算法

时间复杂度:O(nlogn)

注意:快速选择 O(n)

void quick_sort(int q[], int l, int r)
{
    if (l >= r) return; //必须 l>=r

    int i = l - 1, j = r + 1, x = q[l + r >> 1];
    while (i < j)
    {
        do i ++ ; while (q[i] < x);
        do j -- ; while (q[j] > x);
        if (i < j) swap(q[i], q[j]);
    }
    quick_sort(q, l, j), quick_sort(q, j + 1, r);
}

补:快速选择

给定一个长度为 n 的整数数列,以及一个整数 k,请用快速选择算法求出数列从小到大排序后的第 k 个数。

#include <iostream>

using namespace std;

const int N = 1e5+10;

int n,k;
int q[N];

int quick_sort(int l, int r, int k)
{
    if (l >= r) return q[l];
    
    int x = q[l], i=l-1, j=r+1;
    while (i < j)
    {
        do i++; while (q[i] < x);
        do j--; while (q[j] > x);
        if (i<j) swap(q[i],q[j]);
    }
    int sl = j-l+1;
    if (k <= sl) return quick_sort(l,j,k);
    return quick_sort(j+1,r,k-sl);
}

int main()
{
    cin >> n >> k;
    
    for (int i = 0; i< n; i++) cin >> q[i];
    
    cout << quick_sort(0,n-1,k) << endl;
    
    return 0;
}

 

归并排序

时间复杂度:O(nlogn)

void merge_sort(int q[], int l, int r)
{
    if (l >= r) return;

    int mid = l + r >> 1;
    merge_sort(q, l, mid);
    merge_sort(q, mid + 1, r);
    
    int k = 0, i = l, j = mid + 1;
    while (i <= mid && j <= r)
        if (q[i] <= q[j]) tmp[k ++ ] = q[i ++ ];
        else tmp[k ++ ] = q[j ++ ];
    
    while (i <= mid) tmp[k ++ ] = q[i ++ ];
    while (j <= r) tmp[k ++ ] = q[j ++ ];
    
    for (i = l, j = 0; i <= r; i ++, j ++ ) q[i] = tmp[j];
}

二分

整数二分

bool check(int x) {/* ... */} // 检查x是否满足某种性质

// 区间[l, r]被划分成[l, mid]和[mid + 1, r]时使用:
int bsearch_1(int l, int r)
{
    while (l < r)
    {
        int mid = l + r >> 1;
        if (check(mid)) r = mid;    // check()判断mid是否满足性质
        else l = mid + 1;
    }
    return l;
}
// 区间[l, r]被划分成[l, mid - 1]和[mid, r]时使用:
int bsearch_2(int l, int r)
{
    while (l < r)
    {
        int mid = l + r + 1 >> 1;
        if (check(mid)) l = mid;
        else r = mid - 1;
    }
    return l;
}

浮点数二分

bool check(double x) {/* ... */} // 检查x是否满足某种性质

double bsearch_3(double l, double r)
{
    const double eps = 1e-6;   // eps 表示精度,取决于题目对精度的要求
    while (r - l > eps)
    {
        double mid = (l + r) / 2;
        if (check(mid)) r = mid;
        else l = mid;
    }
    return l;
}

高精度

高精度加法

// C = A + B, A >= 0, B >= 0
vector<int> add(vector<int> &A, vector<int> &B)
{
    if (A.size() < B.size()) return add(B, A);

    vector<int> C;
    int t = 0;
    for (int i = 0; i < A.size(); i ++ )
    {
        t += A[i];
        if (i < B.size()) t += B[i];
        C.push_back(t % 10);
        t /= 10;
    }
    
    if (t) C.push_back(t);
    return C;
}

高精度乘低精度

// C = A * b, A >= 0, b >= 0
vector<int> mul(vector<int> &A, int b)
{
    vector<int> C;

    int t = 0;
    for (int i = 0; i < A.size() || t; i ++ )
    {
        if (i < A.size()) t += A[i] * b;
        C.push_back(t % 10);
        t /= 10;
    }
    
    while (C.size() > 1 && C.back() == 0) C.pop_back();
    
    return C;
}

高精度除以低精度

// A / b = C ... r, A >= 0, b > 0
vector<int> div(vector<int> &A, int b, int &r)
{
    vector<int> C;
    r = 0;
    for (int i = A.size() - 1; i >= 0; i -- )
    {
        r = r * 10 + A[i];
        C.push_back(r / b);
        r %= b;
    }
    reverse(C.begin(), C.end());
    while (C.size() > 1 && C.back() == 0) C.pop_back();
    return C;
}

前缀和、差分

一维前缀和

S[i] = a[1] + a[2] + ... a[i]
a[l] + ... + a[r] = S[r] - S[l - 1]

二维前缀和

S[i, j] = 第i行j列格子左上部分所有元素的和
以(x1, y1)为左上角,(x2, y2)为右下角的子矩阵的和为:
S[x2, y2] - S[x1 - 1, y2] - S[x2, y1 - 1] + S[x1 - 1, y1 - 1]

一维差分

给区间[l, r]中的每个数加上c:B[l] += c, B[r + 1] -= c

二维差分

给以(x1, y1)为左上角,(x2, y2)为右下角的子矩阵中的所有元素加上c:
S[x1, y1] += c, S[x2 + 1, y1] -= c, S[x1, y2 + 1] -= c, S[x2 + 1, y2 + 1] += c

 

位运算

求n的第k位数字: n >> k & 1
返回n的最后一位1:lowbit(n) = n & -n

 

双指针算法

for (int i = 0, j = 0; i < n; i ++ )
{
    while (j < i && check(i, j)) j ++ ;

    // 具体问题的逻辑
}
常见问题分类:
    (1) 对于一个序列,用两个指针维护一段区间
    (2) 对于两个序列,维护某种次序,比如归并排序中合并两个有序序列的操作

 

离散化

vector<int> alls; // 存储所有待离散化的值
sort(alls.begin(), alls.end()); // 将所有值排序
alls.erase(unique(alls.begin(), alls.end()), alls.end());   // 去掉重复元素

// 二分求出x对应的离散化的值
int find(int x) // 找到第一个大于等于x的位置
{
    int l = 0, r = alls.size() - 1;
    while (l < r)
    {
        int mid = l + r >> 1;
        if (alls[mid] >= x) r = mid;
        else l = mid + 1;
    }
    return r + 1; // 映射到1, 2, ...n
}

 

区间合并

// 将所有存在交集的区间合并
void merge(vector<PII> &segs)
{
    vector<PII> res;

    sort(segs.begin(), segs.end());
    
    int st = -2e9, ed = -2e9;
    for (auto seg : segs)
        if (ed < seg.first)
        {
            if (st != -2e9) res.push_back({st, ed});
            st = seg.first, ed = seg.second;
        }
        else ed = max(ed, seg.second);
    
    if (st != -2e9) res.push_back({st, ed});
    
    segs = res;
}

--> 排序快速排序归并排序是由下向上的,先处理子数组然后再合并。而快速排序正好相反,它的过程是由上向下的,先分出两个子区间,再对子区间进行排序。归并排是非原地算法,而快排则是原地排序算法时间复杂度:O(nlogn)注意:快速选择 O(n)void quick_sort(int q[], int l, int r){ if (l >= r) return; //必须 l>=r ...

while(~scanf(“%d%d“,&a,&b))详解

按位取反

1. 原码、反码、补码

原码:符号位加上真值的绝对值, 即用第一位表示符号, 其余位表示值。

反码:正数的反码是其本身;负数的反码是在其原码的基础上, 符号位不变,其余各个位取反。

补码:正数的补码就是其本身;负数的补码是在原码的基础上, 符号位不变, 其余各位取反, 最后+1。 (即在反码的基础上+1)

十进制数原码反码补码
850101 01010101 01010101 0101
-851101 01011010 10101010 1011
90000 10010000 10010000 1001
-91000 10011111 01101111 0111

 

2. 取反符号:~

~ 取反运算,0 则变为 1,1 则变为 0,如

~ 1 0 0 1 1
-----------------------------
  0 1 1 0 0

 

3. 按位取反

按位取反需要涉及以上概念。要弄懂这个运算符的计算方法,首先必须明白二进制数在内存中的存放形式,二进制数在内存中是以补码的形式存放的。

下面以计算正数 9 的按位取反为例,计算步骤如下(注:前四位为符号位):

- 原码   : 0000 1001
- 算反码 : 0000 1001 (正数反码同原码)
- 算补码 : 0000 1001 (正数补码同反码)
- 补取反 : 1111 0110 (全位0变1,1变0)
- 算反码 : 1111 0101 (末位减1)
- 算原码 : 1111 1010 (其他位取反)

 

总结

  1. 所有正整数的按位取反是其本身+1的负数
  2. 所有负整数的按位取反是其本身+1的绝对值
  3. 零的按位取反是 -1(0在数学界既不是正数也不是负数)

 

scanf( ) 的返回值

对于scanf("%d%d%d",&a,&b,&c);

  1. 如果a、b 和c 都被成功读入,则scanf的返回值为3
  2. 如果 a 和 b 被成功读入,那么返回值为2
  3. 如果只有a被成功读入,那么返回值为1
  4. 如果遇到错误或遇到end of file,返回值为EOF

 

其中,EOFEnd Of File 的缩写,在 C 语言标准库中的定义为:#define EOF (-1)

可参考此篇文章:字符输入输出和输入验证 – Echo (liveout.cn)

 

总结

scanf 成功读取至少一个数时,scanf 的返回值是1或2,

1按位取反为-2, 2按位取反为-3,都会进入while循环内部。

当输入读取结束后,scanf的返回值是EOF,EOF即-1,-1按位取反为0,此时会跳出while循环。

//这个意思一样
while(~scanf("%d%d",&a,&b)) 
while(scanf("%d%d",&a,&b) != EOF)

 

--> while(~scanf(“%d%d“,&a,&b))详解按位取反1. 原码、反码、补码原码:符号位加上真值的绝对值, 即用第一位表示符号, 其余位表示值。反码:正数的反码是其本身;负数的反码是在其原码的基础上, 符号位不变,其余各个位取反。补码:正数的补码就是其本身;负数的补码是在原码的基础上, 符号位不变, 其余各位取反, 最后+1。 (即在反码的基础上+1)十进制数原码...

前言

本文为 CSS 基础笔记

上一篇笔记为:HTML基础 – Echo (liveout.cn)

CSS

CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css

基础认知

1. 语法规则

css写在style标签中,style标签一般写在head标签里面,title标签下面

此方法为内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        /* 注释 */
        /* 选择器{css属性} */
        /* 选择器:查找标签 */
        p1{
            /* 文字颜色 */
            color: red;
            /* 字体 px:像素 */
            font-size: 30px;
            /* 背景色 */
            background-color: aqua;
            /* width height */
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
    <p1>p1红色字体标签</p1>
</body>
</html>

 

2. 引入方式

  1. 内嵌式 :css 写在 style标签中

    注意:style标签通常写在head标签中

  2. 外联式:css 写在 一个单独的 .css 的文件中

    注意:需要通过link标签在网页中引入

  3. 行内式:css 写在标签的 style 属性中

    注意:配合js使用

 

引入方式书写位置作用范围使用场景
内嵌式css 写在 style标签中当前页面小案例
外联式css 写在 一个单独的 .css 的文件中多个页面项目中
行内式css 写在标签的 style 属性中当前标签配合js使用

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入式</title>
    <!-- stylesheet:关系为样式表 -->
    <link rel="stylesheet" href="引入式.css">
</head>
<body>
    <!-- 外联式:p1 -->
    <p1>p1标签</p1>
    <!--  行内式-->
    <div style="color: green; font-size: 20px;">div标签</div>
</body>
</html>
/* 选择器 {} */
p1{
    color: red;
}

 

基础选择器

1. 标签选择器

➢结构:标签名 { css属性名 : 属性值; }

➢作用: 通过标签名,找到页面中所有这类标签,设置样式

➢注意点:

  1. 标签选择器选择的是一 类标签, 而不是单独某一个

  2. 标签选择器无论嵌套关系有多深, 都能找到对应的标签

     

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器</title>
    <style>
         /* 定义基础选择器 */
        p {
            color: red;
            font-size: 66px;
        }
    </style>
</head>
<body>
    <p>标签选择器</p>
</body>
</html>

 

2. 类选择器

➢结构: .类名{ css属性名 : 属性值; }

➢作用:通过类名,找到页面中所有带有这个类名的标签,设置样式

➢注意点:

  1. 所有标签上都有class属性, class属性的属性值称为类名(类似于名字)
  2. 类名可以由数字、 字母、下划线、中划线组成,但不能以数字或者中划线开头
  3. 一 个标签可以同时有多个类名, 类名之间以空格隔开
  4. 类名可以重复,一个类选择器可以同时选中多个标签

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器</title>
    <style>
         /* 定义类选择器 */
        .red {
            color: red;
        }

        .size {
            font-size: 66px;
        }
    </style>
</head>
<body>
    <!-- 类: 定义 和 使用 才能生效 -->
    <p>普通p标签</p>
    <!-- 一个标签可以使用多个类名,需要空格隔开 -->
    <div class="red size">类选择器</div>
    <p class="red">加了class</p>
</body>
</html>

 

3. id选择器

➢结构:#id属性值 { css属性名 : 属性值; }

➢作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式,配合js制作动态效果

➢注意点:

  1. 所有标签上都有id属性
  2. id属性值类似于身份证号码, 在一个页面中是唯一的,不可重复的!
  3. 一个标签上只能有一个id属性值
  4. 一个id选择器只能选中一个标签

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        /* 定义id选择器 */
        #blue {
            color: skyblue;
        }
    </style>
</head>
<body>
    <div id="blue">蓝色div</div>
</body>
</html>

 

4.通配符选择器

➢结构: * { css属性名 : 属性值; }

➢作用:找到页面中所有的标签,设置样式

➢注意点:

  1. 开发中使用极少, 只会在极特殊情况下才会用到
  2. 小页面中可能会用于去除标签默认的margin和padding (后续讲解)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符</title>
    <style>
         /* 定义通配符选择器 */
        * {
            color:red;
        }
    </style>
</head>
<body>
    <p>p</p>
    <div>div</div>
    <h1>h1</h1>
    <span>span</span>
</body>
</html>

 

字体和文本样式

1. 字体样式

  1. 字体大小:font-size 谷歌默认16px
  2. 字体粗细:font-weight 正常normal/400 加粗blod/700
  3. 字体样式:font-style 倾斜 italic
  4. 字体类型:font-family
  5. 字体类型:font属性连写

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        p {
            /* font-size: 18px;
            font-weight: 700;
            font-style: italic;
            font-family: 'Lucida Sans', 'Lucida Sans Regular',  sans-serif; */

            /* font: style  weight  size  字体; */
            font: normal 700 66px 宋体;
            /* font: 66px 宋体; 省略style、weight为默认 */
            font-style: italic;


            /* 一个属性冒号后面书写多个值:复合属性 */
        }
    </style>
</head>
<body> 
    <p>Hello World</p>
</body>
</html>

 

2. 文本样式

  1. 文本缩进:text-indent (1)数字+px (2) 数字+em (推荐:1em =当前标签font-size大小)

  2. 文本对齐方式:text-align left左对齐 center居中对齐 right右对齐

  3. 文本修饰:text-decoration


    1. underline:下划线(常用)
    2. line-through:删除线(不常用)
    3. overline:上划线(几乎不用)
    4. none:无装饰线(常用)

    注意:开发中使用 text-decoration : none; 清除a标签默认的下划线

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        p {
            /* text-indent: 50px; */
            /* 首行缩进两个字大小 */
            text-indent: 2em;
            text-decoration: none;
        }

        h1 {
            text-align: left;
            text-align: right;
            text-align: center;
        }

        body {
            text-align: center;
        }

        /* 文本修饰 */
        div {
            text-decoration: underline;
        }

        h2 {
            text-decoration: line-through;
        }

        h3 {
            text-decoration: overline;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>拣爱--Love Choice</h1>

    <img src="https://yy.liveout.cn/article/essay/life/2023/spring/jianai.png" alt="love choice">

    <p>前女友分手的时候告诉我这个游戏的,认识7年,因为不合适分开,无疾而终。 她跟我说”就连游戏我都得重来三次才能正确地爱一个人,不合适是没有办法的。”故事的结局在相遇的时候就定好了所以周芷若就算跟张无忌要结婚了也在不了一起,
所以英梨梨就算十年前就认识伦也一样没有胜算,我们哪里有游戏里重来的机会,每次的选择都会直通早就定好的结局。所以故事的结局远不如过程重要,我宁愿有一个不圆满的结局也希望有足够让人怀念的过程。剩下的,不过时也命也,人各有处,不必自缚。</p>


        <!-- 文本修饰 -->
        <div>div</div>
        <p>ppp</p>
        <h2>h2</h2>
        <h3>上划线</h3>
        <a href="https://www.liveout.cn" target="_blank">我是一个超链接</a>
</body>
</html>

 

3. 行高

line-height:控制一行的上下间距

取值:

  1. 数字+px
  2. 倍数(当前标签font-size的倍数)

 

应用:

  1. 让单行文本垂直居中可以设置line-height :文字父元素高度
  2. 网页精准布局时, 会设置line-height: 1可以取消上下间距

 

行高与font连写的注意点:

  1. 如果同时设置了行高和font连写,注意覆盖问题
  2. font: style weight size/line-height family ;

 

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高</title>
    <style>
        p {
            font-weight: 600;
            font-family: 宋体;
            line-height: 50px;

            /* 60px 宋体 倾斜 加粗 行高2倍 */
            font: italic 700 30px/2 宋体;
        }
    </style>
</head>
<body>
    <p>前女友分手的时候告诉我这个游戏的,认识7年,因为不合适分开,无疾而终。 她跟我说”就连游戏我都得重来三次才能正确地爱一个人,不合适是没有办法的。”故事的结局在相遇的时候就定好了所以周芷若就算跟张无忌要结婚了也在不了一起,
        所以英梨梨就算十年前就认识伦也一样没有胜算,我们哪里有游戏里重来的机会,每次的选择都会直通早就定好的结局。所以故事的结局远不如过程重要,我宁愿有一个不圆满的结局也希望有足够让人怀念的过程。剩下的,不过时也命也,人各有处,不必自缚。</p>
</body>
</html>

 

拓展

1. 颜色取值

颜色表示方式表示含义属性值
关键词预定义的颜色名red、green、 blue、 yello.....
rgb表示法红绿蓝三原色。每项取值范围: 0~255rgb(0,0,0)、rgb(255,255,255)、 r2550....
rgba表示法红绿蓝三原色+a表示透明度,取值范围是0~1rgba(255,255,255,0.5)、rgba(255,0,0,0.3....
十六进制表示法#开头,将数字转换成十六进制表示#000000、#f0000、 #e92322, 简写: #000、 #f00

 

2. 标签水平居中

方法总结:margin : 0 auto

让 div、p、h(大盒子) 水平居中:通过 margin : 0 auto ; 实现,其中 0 为上下间距,auto 为左右间距

注意:

  1. 如果需要让div、 p、h (大盒子) 水平居中,直接给当前元素本身设置即可
  2. margin: 0 auto -般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签水平居中</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

案例

1. 新闻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻</title>
    <style>
        div {
            width: 800px;
            height: 600px;
           margin: 0 auto;
        }

        /* 类选择器 */
        .center {
            text-align: center;
        }

        .color1 {
            color: #808080;
        }

        .color2 {
            color: #87ceeb;
            font-weight: 700;
        }

        a {
            text-decoration: none;
        }

        /* 段落内容首行缩进 */
        .suojin {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="color1">2077年01月28日14:58 </span>
            <span class="color2">新浪科技</span>
            <a href="https://liveout.cn">收藏本文</a>         
        </p>
        <hr>
        <p class="suojin">2019年,事件视界望远镜团队让世界首次看到了黑洞的样子。不过,研究人员公布的这张发光环形物体的图像并不是传统的图片,而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据,研究人员进行了数学转换,最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码,并撰文记录这一发现,其他研究者也可以在此基础上进一步加以分析。</p>
        <p class="suojin">这种模式正变得越来越普遍。从天文学到动物学,在现代每一项重大科学发现的背后,都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖,他指出,今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力,”他说,“问题在于,我们仍然需要思考。”</p>
        <p class="suojin">如果没有能够解决研究问题的软件,以及知道如何编写并使用软件的研究人员,一台计算机无论再强大,也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起,后者已经渗透到研究工作的各个方面。近日,《自然》(Nature)杂志将目光投向了幕后,着眼于过去几十年来改变科学研究的关键计算机代码,并列出了其中10个关键的计算机项目。</p>
        <p class="suojin">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言,允许用户用代码为计算机编程,但这两种语言都需要对计算机的架构有深入的了解,使得许多科学家难以掌握。20世纪50年代,随着符号语言的发展,特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran,这种情况发生了变化。利用Fortran,用户可以用人类可读的指令来编程,例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
    </div>
</body>
</html>

 

2. 产品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品</title>
    <style>
        body {
            background-color: #f5f5f5;
        }

        .goods {
            width: 234px;
            height: 300px;
            background-color: #fff; 
            margin: 0 auto;
            text-align: center;
        }

        img {
            width: 160px;
        }

        .title {
            font-size: 14px;
            line-height: 25px;
        }

        .info {
            font-size: 12px;
            line-height: 30px;
            color: #ccc;
        }

        .price {
            font-size: 14px;
            color: #ffa500;
        }

    </style>
</head>
<body>
    <!-- div 用来网页布局,一个页面可能用无数次 -->
    <!-- 如果使用 div,尽量使用类名控制样式 -->
    <div class="goods"><img src="car.jpg" alt="小米平衡车">
        <div class="title">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="price">1999元</div>
</div>
</body>
</html>

 

 

--> 前言本文为 CSS 基础笔记上一篇笔记为:HTML基础 – Echo (liveout.cn)CSSCSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css基础认知1. 语法规则css写在style标签中,style标签一般写在head标签里面,...

前言

本文为HTML基础标签笔记

HTML

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

 


文本格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- b加粗 u下划线 i倾斜 s删除线 -->
    <h1>腾讯科技高级web前端开发岗位</h1><hr>
    <h3>职位描述</h3>
    <u>负责重点项目的前端技术方案和架构的研发和维护工作</u>;
    <h2>岗位要求</h2>
    <p>5年以上前端开发经验,<b>精通html5/css3/javascript</b>等web开发技术;</p>
    <p>熟悉bootstrap,vue,angularjs,reactjs等框架,熟练掌握一种以上;</p>
    <p>代码⻛格严谨,能⾼保真还原设计稿,能兼容各种浏览器;</p>
    <p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践;</p>
    <p>具备良好的分析解决问题能力,能独立承担任务,有开发进度把控能力;</p>
    <p><s>责任心强,思路路清晰,抗压能力好,具备良好的对外沟通和团队协作能力。</s></p>
    <h2>工作地址</h2>
    <p> <i>上海市-徐汇区-腾云大厦</i></p
    <!-- alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本 -->
    <img src="image/map.jpg" alt="">
     <!-- 空格 &nbsp -->
    HTML文档,学习字符实体,如文字间多三个 &nbsp &nbsp &nbsp空格

</body>
</html>

 

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <!-- 无序列表 unordered lists -->
    <ul>
        <!-- list item -->
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>草莓</li>
        <li>哈密瓜</li>
    </ul>

    <!-- 有序列表 ordered lists -->
    <ol>
        <!-- list item -->
        <li>你:100分</li>
        <li>我:90分</li>
        <li>他:60分</li>
    </ol>

    <!-- 自定义列表 definition lists-->
    <dl>
        <!-- 自定义列表组  definition term-->
        <dt>帮助中心</dt>
            <!-- 自定义列表描述 definition description -->
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
        <dt>服务支持</dt>
            <dd>售后政策</dd>
            <dd>自助服务</dd>
            <dd>相关下载</dd>
    </dl>
    
</body>
</html>

 

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <!-- 表格 包含 tr(行) 包含td(数据) -->
    <!-- css 设置宽高 -->
    <table border="1">
        <!-- caption 表格大标题 -->
        <caption><strong>学生成绩表</strong></caption>
        <!-- 结构标签 thead tbody tfoot    包含th/td -->
        <thead>
                <tr>
                    <!-- 表头信息 th -->
                    <th>姓名</th>
                    <th>成绩</th>
                    <th>评语</th>
                </tr>
        </thead>
        
        <tbody>
            <!-- 只有同一个结构标签单元格才能合并 -->
            <tr>
                <td>你</td>
                <!-- 跨行合并 rowspan -->
                <td rowspan="2">100分</td>
                <td>牛的</td>
            </tr>
            <tr>
                <td>我</td>
                <!-- <td>90分</td> -->
                <td>还行</td>
            </tr>
            <tr>
                <td>他</td>
                <td>60分</td>
                <td>不错呦</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>总结</td>
                <!-- 跨列合并 colspan -->
                <td colspan="2">还不错呦</td>
                <!-- <td>very good</td> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>

 

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="#">
    <!-- text 文本框 -->
    <!-- placeholder 提示 -->
    邮箱:<input type="text" placeholder="邮箱/手机号">
    <br><br>

    <!-- password 密码框 -->
    密码:<input type="password" placeholder="请输入六位密码">
    <br><br>

    <!-- radio 单选框 -->
    <!-- checked 默认选中 -->
    性别:<input type="radio" name="sex" checked>中性

    <!-- label 表单标签(点击文字选中) -->
         <input type="radio" name="sex" id="nan"><label for="nan">男</label> 
        <label><input type="radio" name="sex">女</label> 
    <br><br>
    
    <!-- checkbox 多选框 -->
    爱好:<input type="checkbox">
    <br><br>

    <!-- file 文件 -->
    <!-- multiple 多文件选择 -->
    文件:<input type="file" multiple>
    <br><br>

    协议:<input type="checkbox" checked>默认勾选
    <br><br>

    <!-- button 按钮 -->
    <input type="submit">
    <input type="reset">
    <input type="button" value="普通按钮">
    <br><br>

    <button>按钮</button>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">button按钮,js添加功能</button>
    <br><br>

    <!-- select 下拉菜单 -->
    <select>
        <option>北京</option>
        <option  selected>上海</option>
        <option>深圳</option>
        <option>杭州</option>
    </select>
    <br><br>

    <!-- textarea 文本域 -->
    <!-- CSS 禁用掉右下角拖拽 -->
    <textarea name="#" id="#" cols="30" rows="10"></textarea>

</form>

</body>
</html>

 

综合案例

学生信息表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息表</title>
</head>
<body>
    <table border="1" width="500" height="300">
        <caption><strong>优秀学生信息表</strong></caption>

        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>110</td>
                <td>三年三班</td>
            </tr>

            <tr>
                <td>赵四</td>
                <td>120</td>
                <td>三年三班</td>
            </tr>
        </tbody>

        <tfoot>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>
        </tfoot>
    </table>
</body>
</html>

 

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <h1>青春不常在,抓紧谈恋</h1>
    <hr>
    <form action="">
        昵称:<input type="text" placeholder="请输入昵称">
        <br><br>

        性别:
        <label><input type="radio" name="sex">男</label>
        <label><input type="radio" name="sex">女</label>
        <br><br>

        所在城市:
        <select>
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
            <option value="nanjing" selected>南京</option>
            <option value="shenzhne">深圳</option>
        </select>
        <br><br>

        擅长语言:
        <label><input type="checkbox">C</label>
        <label><input type="checkbox">C++</label>
        <label><input type="checkbox">Java</label>
        <label><input type="checkbox">Python</label>
        <br><br>

        个人介绍:<br>
        <textarea name="#" id="#" cols="60" rows="10"></textarea>
        <br><br>

        <h3>我声明</h3>
        <ul>
            <li>C/C++是最好的语言</li>
            <li>Java是最好的语言</li>
            <li>Python是最好的语言</li>
        </ul>
        <br><br>

        <input type="checkbox">我同意以上条款
        <br><br>

        <input type="submit" value="免费注册">
        <button type="button">登录</button>
        <button type="reset">重置</button>

    </form>
</html>

 

跋文

下一篇笔记为:CSS基础 – Echo (liveout.cn)

--> 前言本文为HTML基础标签笔记HTML超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 文本格式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e...