html的理解二

最新推荐文章于 2024-06-04 08:13:24 发布

SPIRT00

最新推荐文章于 2024-06-04 08:13:24 发布

阅读量85

点赞数

分类专栏：前端基础学习文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_51884452/article/details/128061434

版权

前端基础学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

一、HTML

1.html表格

表格由table标签定义,表格中有行和列其中行用tr表示，每行被分割为若干个单元格由标签td表示。


<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

1.html表格和边框属性
不定义边框属性，表格不会显示出边框。

<table border="1">
<tr>
	<td>ni,hao</td>
	<td>hello,word</td>
</tr>

2.html表格表头
表格表头用th定义，大多数表头显示粗体居中的文字。


<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在这里插入图片描述 2.带有标题的标签用caption

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>

在这里插入图片描述 3.单元格边距cell padding
单元格内容与边框之间的距离

<h4>有单元格边距:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

在这里插入图片描述 4.单元格间距
是单元格之间的距离cellspacing



    <h4>单元格间距="0":</h4>
    <table border="1" cellspacing="0">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

    <h4>单元格间距="10":</h4>
    <table border="1" cellspacing="10">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

在这里插入图片描述

2.html列表

html支持有序，无序，自定义列表。
1.无序列表
无序列表用ul标签

<ul>
	<li>apple</li>
	<li>banana</li>
</ul>

2.有序列表
用ol

<ol>
	<li>cloth</li>
	<li>shift</li>
</ol>

3.自定义列表
自定义列表是项目和注释的组合。dl标签开始，自定义列表项dt，项的解释用dd

<dl>
 <dt>coffee</dt>
 <dd>-咖啡</dd>
 </dl>

3.html区块

html通过div和span元素组合起来。
1.div是块级元素相当于一个容器。

<p>这是一些文本。</p>

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

<p>这是一些文本。</p>

在这里插入图片描述 2.span是内联元素，可用作文本的容器。
与css一起使用时，可为部分文本设置属性。

  <p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

在这里插入图片描述

4.html布局

网站布局时推荐使用div标签。
1.使用div元素

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
</head>

<body>

    <div id="container" style="width:500px">

        <div id="header" style="background-color:#FFA500;">
            <h1 style="margin-bottom:0;">主要的网页标题</h1>
        </div>

        <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
            <b>菜单</b><br> HTML
            <br> CSS
            <br> JavaScript
        </div>

        
    </div>

</body>

</html>

在这里插入图片描述也可以使用表格布局，一般使用css放在外边便于更好的维护等。
2.span元素常用来组合文内的元素

5.html表单

//表单用来收集用户的信息，将收集的信息传输到web服务器。
1.html表单
表单是包含表单元素的区域。
允许用户在表单中输入信息。如：文本域textarea,下拉列表（select）,单选框（radio-buttons）,复选框（checkbox）等。
使用form标签来创建表单。

<form>
.
input 元素
.
</form>

html中input输入标签，输入类型由type定义。
2.文本域text fields

<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>

在这里插入图片描述

//当输入字母，数字等内容时，可能用到文本域。
<form>
first name:<input type="text" name="first name"><br>
last name:<input type="text" name="first name">
</from>

大多数浏览器中，文本的默认长度是20字符
3.密码字段input type=“password”
//密码字符不会明文显示
4.单选按钮radio

<from action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女<br>
</from>

5.复选框checkbox
type=“checkbox”
6.提交按钮submit
当用户点击按钮时，表单内的元素会被传输到服务器。
//其中还有个method方法，指的是get或post属性

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

7.下拉表select

 <form action="">
        <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
    </form>

8.带边框的表单

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>