HTML基础

Posted sauronblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML基础相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于HTML基础的主要内容,如果未能解决你的问题,请参考以下文章

HTML基础

HTML基础

HTML基础学习

HTML基础学习1——标签

HTML基础

HTML5零基础入门之HTML基础语法详解