【HTML5】入门级理解前端

1.VSCode快捷键

建议使用VSCode写前端

• ! + 回车快速生成   .html  文件
• 代码格式化：Shift+Alt+F
• 向上或者向下一行：Alt + up/down
• 快速复制一行代码：shift+Alt+up/down
• 快速查找：Ctrl+F
• 快速替换：Ctrl+H

2.标签

1.标题

标题是通过<h1>-<h6>标签来定义的

<h1>定义最大标题，<h6>定义最小标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>

生成h1~h6快捷键：h$*6

在标签中添加属性 align="left|center|right"

<h3 align="center">标题3</h3>

2.段落，换行，水平线

1.段落

段落是通过<p>标签定义的

<p>这是一个段落</p>

2.换行

如果想要在不产生一个新段落的情况下进行换行，可以使用  <br>

<p>这是一个段落<br>换行<br>效果</p>

3.水平线

<hr/>标签可以在HTML页面创建水平线

<hr color="" width="" size="" align=""/>

3.图片

<img>标签定义HTML页面中的图像

<img src="" alt="" title="" width="" height="">

• src：路径（图片地址，名字）
• alt:规定图像的替代文本（当图片无法得到，显示时，会用此文本代替）
• title:鼠标停留在图片上时显示的文字

图片的相对路径：

• 子级关系：/
• 父级关系：../
• 同级关系：./

4.超文本链接

HTML可以使用标签<a>来设置超文本链接

<a href="">链接文本</a>

href属性来描述链接的地址

5.文本

常用文本标签

• <em>：定义着重文字
• <b>：定义粗体文字
• <i>：定义斜体字
• <strong>：加重语气
• <del>：定义删除字
• <span>：元素没有特定含义

    <em>着重文字</em>
    <b>粗体文本</b>
    <i>斜体</i>
    <strong>加重语气</strong>
    <del>删除字</del>
    <span>没有特定含义</span>

6.表格

1.  表格组成特点：行，列，单元格（同行等高，同列等宽）

2. 表格标签：

• <table>表格

• <tr>行

• <td>单元格（列）

<table border="1" width="300px" height="200px">
        <tr>
            <td>ccxhkk</td>
            <td>jj</td>
        </tr>
        <tr>
            <td>cc</td>
            <td>yy</td>
            <td>aa</td>
        </tr>
    </table>

 表格属性

1. border:设置表格边框
2. width：表格宽度
3. height：表格高度

快捷键：table>tr*2>td{单元格}

表格单元格合并

1. 水平合并--colspan(保左删右)
2. 垂直合并--rowspan（保上删下）

<table border="1" width="300px" height="300px">
        <tr>
            <td>1</td>
            <td>2</td>
            <td colspan="2">3</td>
            
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="2">3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            
            <td>4</td>
        </tr>
    </table>

3.列表标签

1.有序列表

有序列表起始于<ol>标签

每一个列表始于<li>标签

 <ol type="i">
        <li>ccc</li>
        <li>xxx</li>
    </ol>

type属性

• 1 表示（1，2，3，4......）
• a 表示（a,b,c.......）
• A 表示（A，B，C，D........）
• i 表示 （i,ii,iii......）
• I 表示（I，II,III........）

有序列表可以嵌套

2.无序列表

无序列表始于<ul>

每一个列表始于<li>

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

1. <ul>的type属性

• disc实心圆
• circle空心圆
• square小方块
• none不显示

无序列表可以嵌套

4.Form表单

概念：表单在网页中用来给用户填写信息，从而能采用户信息，使网页具有交互功能

所有用户输入内容都由表单来写

表单是由容器和控件组成的

<form action="url" method="get|post" name="myform"></form>

属性说明：

• action:服务器地址
• name:表单名称

表单元素

1. 表单标签
2. 表单域
3. 表单按钮

1.文本框

文本域用  <input type="text">   来定义

age:<input type="text" name="年龄">
        <button>确认</button>

2.密码框

密码字段用标签   <input type="password">   来定义

 password:<input type="password" name="pwd">
        <input type="submit" value="登录">

密码字段字符不会明文显示，而是以圆点或者星号替代

3.提交按钮

 <input type="submit" value="登录">

可以通过value 改变按钮名字