打开VSCode

1.输入 !+TAB(Enter)

<title> 是网页标题,可以进行修改

2.Ctrl+s 保存,并且刷新网页

3.注释  <!-- -->

4.在网页可以查看源代码,修改当前网页内容

5.快速生成注释  Ctrl+/   按一下出现,再按一下消失


6.标题标签:h1,h2,h3,h4,h5,h6

一共六个

数字越小,越大越粗,数字越大,越小越细

7.段落标签 :p

段落标签之间会有换行,并且有明显的段落间距

lorem是用来生成随机字符串

8.换行标签:br

在html里面,直接进行换行是没用的,用<br>放在段尾进行换行

【br是单标签】

<p>
        这是一个段落. Lorem ipsum dolor sit amet, consectetur <br>
        adipisicing elit. Ipsa necessitatibus laboriosam debitis? <br>
        Et temporibus aut vitae facere, inventore, <br>
        voluptatum dolore harum fugiat repellat similique debitis numquam, ea amet mollitia nemo.
    </p>
    <p>
        这是一个段落. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa necessitatibus laboriosam debitis? Et temporibus aut vitae facere, inventore, voluptatum dolore harum fugiat repellat similique debitis numquam, ea amet mollitia nemo.
    </p>
    <p>
        这是一个段落. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa necessitatibus laboriosam debitis? Et temporibus aut vitae facere, inventore, voluptatum dolore harum fugiat repellat similique debitis numquam, ea amet mollitia nemo.
    </p>
    <p>
        这是一个段落. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa necessitatibus laboriosam debitis? Et temporibus aut vitae facere, inventore, voluptatum dolore harum fugiat repellat similique debitis numquam, ea amet mollitia nemo.
    </p>

9.格式化标签

加粗:strong / b

倾斜:em / i                                  

删除线:del / s

下划线:ins / u

以上不独占一行

独占一行的标签:块级元素

不独占一行的标签:行内元素

块级和行内之间可以转换

<strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>

 10.图片标签:img

Img必须带有一共src属性,通过这个属性来指定你要显示的图片的路径

<img src="" alt="">

这个路径可以写绝对路径,相对路径(基准目录就是html所在目录),也可以写网络路径

atl调图片大小

atl=""height……

如果网图错误,调用网图的alt就是图片文字描述

也可以传动图gif

11.超链接:a

通过链接就可以找到另外一个资源

超链接的资源可来自外部网站

(1)网页之间的跳转

(2)点击图片,文字跳转

12.表格标签

这是一组标签

table标签:表示整个表格

tr:表示表格的一行

td:表示一个单元格

th:表示表格单元格,会居中加粗

给表格加上属性,才会好看

(1)width,height,border

(2)让文字水平居中,用CSS

<!-- 表格标签 -->
    <style>
        td{
            text-align: center;
        }
    </style>
    <table width="500px" height="300px" border="1px">
        <tr>
            <th>姓名</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>1101</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>2202</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>3303</td>
        </tr>
    </table>

13.列表标签

有序列表:ol

无序列表:ul

列表项:li

li标签里面可以放其他元素

<ol>
        <a href="http://www.baidu.com"><li>这是a链接文字</li></a>
        <li>烂番茄</li>
        <li>咬人猫</li>
        <li>东尼ok</li>
    </ol>
    <ul>
        <li>笠原君</li>
        <li>大漠</li>
        <li>张三</li>
        <a href="http://www.baidu.com"><li>这也是a链接文字</li></a>
    </ul>

14.表单标签:为了和用户交互

form标签:进行前后端交互,功能是构造一共HTTP请求

input标签

有很多形态

(1)”text“ 单行输入包

(2)”password“ 密码(查看密码,改type改成text)

(3)单选框 ”radio“

使用单选框,要设置相同的name属性,此时才会有互斥效果

扩大点击范围

checkd默认选中一个值

<input type="radio" name="gender" id="male"> <label for="male">男</label>
    <input type="radio" name="gender" id="female" checked="checked"> <label for="female">女</label>

(4)复选框:checkbox(lable+checked)

<input type="checkbox" name="action" id="eat"><label for="eat">吃饭</label>
    <input type="checkbox" name="action" id="sleep" checked="checked"><label for="sleep">睡觉</label>
    <input type="checkbox" name="action" id="play"><label for="play">打游戏</label>

 (5)botton设置按钮,submit提交按钮

<!-- <input type="button" value="这是按钮" onclick="alert('hello')"> -->

    <!-- <input type="submit" value="提交"> -->

(6)file:选择文件

<!-- <input type="file" name="" id=""> -->

15.下拉菜单:select

里面的每一个选项是一个option

<select>
        <option>北京</option>
        <option selected="selected">海南</option>
        <option>重庆</option>
        <option>云南</option>
    </select>

16.textarea 多行文本框

<textarea cols="30" rows="10"></textarea>

input只能写一行