web应用笔记-基础html

不求甚解（？）网课笔记待陆续更新

环境的安装与配置

vscode安装插件
Live server&Auto Rename Tag

MDN

html基础标签

文档结构

html文件都是树形结构下结构：body head
vsc里!直接出基础文档

<head> 规定文档的配置信息文档样式之类的

<body> 文档主体内容

<title> 标题

<meta> meta元素表示那些不能由其它HTML元相关（meta-related）元素（(<base>、<link>, <script>、<style> 或 <title>）之一表示的任何元数据信息。

<icon> 图标
<link rel="icon" href="/images/icon.png">

html多行注释 

文本标签

大部分标签都可以看作是div和span扩展过来的

<div> 每一个部分都放到div里方便处理样式打包 div是块的元素默认带回车

<span> 是行的元素默认不带回车

<h1>-<h6> 标题大小

<p> 一个段落屏蔽所有换行和空格

<pre> 一个段落保留格式但是等宽字体

<br> 换行

<hr> 表现层面上是水平线实际代表代表主题的转换

<i><b><del><ins> 格式

图片

<src> 文件路径

<alt> 可以理解为图片加载不出来显示的文字

<height><width> 默认宽高

音频视频

示例：

<audio
    controls
    src="/audios/bgm.mp3">
        Your browser does not support the
        <code>audio</code> element.
</audio>

<video controls width="800">
    <source src="/videos/video1.mp4"
            type="video/mp4">
    <source src="/videos/video2.mp4"
            type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>

超链接

<a> herf=""
点击链接打开新标签页面时加入属性：target="_blank"

1 2	<a href="https://www.acwing.com/problem/ "target="_blank">一个名字</a> <a href="about.html"> <mark>About</mark> </a>

表单

<form> 文档中的表单区域可以向后端传递数据输入不同数据之后url还会变

<input> <input type="text/number/email/password/radio">
常用属性有 name\id\maxlength\minlength\required\placeholder

<select>与<option>
示例

<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<button> <input type="button" value="点我" />

列表

<!--无序-->
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

<!--有序-->
<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

Ahh's blog