前端三件套之HTML的基本学习 | 青训营

一、HTML标签

大多数 HTML 元素都是由开始标签和结束标签组成的；

1. <h1>-<h6>标签--创建标题，字体依次减小；
2. <p> 标签--表示段落；
3. <a> 标签--定义链接;
4. <img> 标签--表示图片；
5. <div> 标签--分割文档；
6. <!--表示注释的开始，-->表示注释的结束；

二、表单元素

1. <input>标签--创建输入框，type属性指定input元素的类型。

• type="text"，表示普通文本的输入；

• type="password"，表示密码的输入；

• type="radio"，表示单选框；

1.  男：<input type="radio" name="sex"/>

2.  女：<input type="radio" name="sex"/>

男：

女：

• type="checkbox"，表示多选框；

1.  <input type="checkbox" name="hobby" />选项A  < br>

2.  <input type="checkbox" name="hobby"/>选项B   < br>

3.  <input type="checkbox" name="hobby"/>选项C

  选项A 

  选项B  

  选项C

上图<br>标签--表示换行

2. <label>标签--点击文本也能选择表单元素；

代码如下

1.  <label for="secret">保密：</label>   

2.  <input type="radio" id="secret" name="state"  /> <br>

3.  <label for="open">公开：</label>

4.  <input type="radio" id="open" name="state"  />

3. <select> 标签--创建下拉列表；<option> 标签--定义列表选项

1.  <select>

2.      <option value="apple">苹果</option>

3.      <option value="banana">香蕉</option>

4.      <option value="pear">梨</option>

5.      <option value="apple">菠萝</option>

6.  </select>

4.<textarea> 标签--定义多行文本输入框；

width和height--定义输入框大小；

maxlength--定义文本区域最大能输入的字符数；

1.  <style>

2.  textarea{

3.    width:160px;

4.    height:100px;

5.  }

6.  </style>

7.   <textarea maxlength="10">< /textarea>

5.< input type="submit"/>创建提交按钮

1.  < input type="submit" value="提交按钮"/>

三、表格元素

1.<table>标签--创建表格；

<tr>标签--创建行；<td>标签--创建列；

border属性--表格边框，2 表示边框的宽度为2px

1.  <table border="2">

2.      <tr>

3.          <td>姓名</td>

4.          <td>年龄</td>

5.      </tr>

6.      <tr>

7.          <td>小明</td>

8.          <td>18</td>

9.      </tr>

10. </table>

                                                                     

姓名	年龄
张三	18

2.width和height--表格宽和高，单位是px，可省略；

3.cellpadding--单元边沿与其内容之间的空白；

4.cellspacing--单元格之间的空间；

5.<caption>标签--创建表格标题；

6.<td>标签的rowspan属性--单元格可横跨的行数

<td>标签的colspan属性--单元格可横跨的列数

<table border="2" cellspacing="0" cellpadding="10">

      <caption>班级成绩</caption>

      <tr>

          <td>姓名</td>

          <td>年龄</td>

      <td colspan="3" >科目 </td>

      </tr>

      <tr>

          <td rowspan="2">张三</td>

          <td rowspan="2">18</td>

      <td>语文</td>

      <td>数学</td>

      <td>英语</td>

     </tr>

   <tr>

       <td>80</td>

       <td>85</td>

       <td>75</td>

   </tr>

 </table>

                                                                            

班级成绩

姓名	年龄	科目
张三	18	语文	数学	英语
		80	85	75

写在最后

目前这只是整理的最基本的HTML知识点，包括基本的标签，表单和表格。后期也会整理前端三件套相关的CSS和JS的基础知识点及代码。打好基础接下来的路才好走一些，后期如果有相关的知识点或案例以及我认为较为重要的地方会再单独整理相关学习笔记。最后，希望自己能在字节青训营里学到更多！