HTML基础

Posted 2022-09-17 sauronblog

1.IP地址

ip地址是用来定位网络中的终端设备 个人PC 移动端设备等...

127.0.0.1 是每个人的电脑的私有IP，只会显示个人电脑

192.168.102.130 是局域网的个人PC的地址，每个人的都不一样

 

2.列表标签

1.无序列表

结构如下：

<ul>
    <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ul>

注意：ul里面只能放li标签,不允许放别的标签，如果有其它的标签结构，可以放在li标签中。

 

2.有序列表

结构如下：

<ol>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ol>

注意：ol里面只能放li标签,不允许放别的标签，如果有其它的标签结构，可以放在li标签中。

 

3.自定义列表

结构如下:

<dl>
    <dt>标题或是术语</dt>
  <dd>对下面的一种描述</dd>
  <dd>对下面的一种描述</dd>
  <dd>对下面的一种描述</dd>
  <dd>对下面的一种描述</dd>
</dl>

 

3.常用特殊符号

 

4.table表格

4.1基本样式设置

<table border="1" width="600" height="300">
    <tr>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
      <td>家庭住址</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>20</td>
      <td>天河区津安创意园</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>男</td>
      <td>18</td>
      <td>越秀区20号</td>
    </tr>
  </table>

 

4.2加入表头和表体

<table border="1" width="600" height="300">
    <thead>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>家庭住址</th>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>20</td>
        <td>天河区津安创意园</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>18</td>
        <td>越秀区20号</td>
      </tr>
      <tr>
        <td>TOM</td>
        <td>男</td>
        <td>19</td>
        <td>白云区</td>
      </tr>
    </tbody>
  </table>

 

4.3设置表格在网页中的水平对齐方式 align

align的取值有三个： left center right

 

4.4表格中的单元格设置

width: 可以用来设置表格的宽度

height:是用来设置表格的调试

cellspacing: 是用来设置单元格和单元格之间的距离

cellpadding: 是用来设置单元格内容与单元格之间的距离

 

4.5合并单元格

colspan:跨列合并

rowspan:跨行合并

 

4.6 给表格加一个字幕信息

caption

 

5.表单

在网页中，用于收集用户信息，一般使用表单控件，表单控件是放在表单域里面

5.1表单域 结构如下：

<form action="后端服务器地址" method="get/post">
  用户名: <input type="text" name="userName"><br/>
  密码: <input type="password" name="userPwd"><br/>
  <input type="submit" value="发送">
  <!-- value属性可以用来改变input标签原来的值 -->
</form>

 

5.2表单控件

 

 

 

 5.3设置默认选中项

input标签中type为checkbox或radio标签的时候，设置默认选项荐皆用checked属性

select标签中设置默认选中项，则用属性selected,是给select标签的子标签中的option标签设置此属性。

当属性名和属性值一样的时候，可以只写一个属性名

性　别: <input type="radio" name="gender" checked> 男 <input type="radio" name="gender">女<br />
爱　好: <input type="checkbox" name="hobby"> 吃饭
             <input type="checkbox" name="hobby" checked> 睡觉
         <input type="checkbox" name="hobby"> 滑雪
       <input type="checkbox" name="hobby"> 游泳
       <input type="checkbox" name="hobby" checked> 打豆豆<br /><br />

 

5.4文本域

普通文本框<input type="text"> 用来收集少量的数据

文本域<textarea cols="30" rows="10"></textarea>是用来收集大量的数据内容

 

5.5下拉菜单

<select name="province">
      <option value="0001">北京市</option>
      <option value="0002">上海市</option>
      <option value="0003" selected="selected" >广东省</option>
      <option value="0004">广西壮族自治区</option>
      <option value="0005">湖南省</option>
      <option value="0006">湖北省</option>
      <option value="0007">山东省</option>
    </select>

 

6.多媒体标签

6.1 audio 标签主要是用来播放音频文件

<!-- <audio src="./audio/yinyue.mp3" controls></audio> -->
  <audio controls>
    <source src="./audio/yinyue.mp3">
    <source src="./audio/yinyue.ogg">
    您的浏览器不支持此格式
  </audio>

 

6.2 video 主要是用来播放视频

 

7.元素的嵌套

块级元素可以嵌套其它元素

行内元素不可以嵌套块级元素 ,a标签可以嵌套其它元素

 

Emmet语法

div > span > 是包裹，包含的意思

 

<div>
  <span></span>
</div>

 

ul > li *3 >是包裹，包含的意思 * 是乘的意思

<ul>
  <li>123</li>
  <li>456</li>
  <li>789</li>
</ul>

dl > dt + dd    + 是同级并列的意思

<dl>
    <dt>购物指南</dt>
    <dd>购物流程</dd>
    <dd>会员介绍</dd>
    <dd>生活旅行</dd>
    <dd>常见问题</dd>
    <dd>大家电</dd>
    <dd>联系客服</dd>
</dl>