您的位置: 首页  >  IT文章  >  web前端(一)——html html文档基本结构 标签的的使用方法： 无序列表标签 html表单 表格元素及相关样式

web前端(一)——html html文档基本结构 标签的的使用方法： 无序列表标签 html表单 表格元素及相关样式

分类: IT文章 • 2025-01-22 23:00:43 
<!DOCTYPE html>//第一行是文档声明
<html>//定义html文档的整体
    <head>  //负责对网页进行一些设置          
        <meta charset="UTF-8">
        <title>网页标题</title>//定义网页标题
    </head>
    <body>//编写网页上显示的内容
          网页显示内容
    </body>
</html>

标签的的使用方法：

<!-- 1、成对出现的标签：-->
<h1>h1标题</h1>

<div>这是一个div标签</div>

<p>这个一个段落标签</p>

<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>

<!--强调语意-->
<strong>加粗</strong>
<ins>倾斜</ins>
<del>删除</del>

<!-- 2、单个出现的标签： -->
<br>

<img src="images/pic.jpg" alt="图片失效时显示的文字" title="提示文本">


<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">

<a href="http://www.baidu.com">百度网</a>


<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

块元素：在布局中默认会独占一行，块元素后的元素需换行排列。
行内元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开

在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp; 

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体&lt; 和 &gt;

无序列表标签

 无序列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单

<ul>
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

列表的内容一般是可以链接的，点击链接到新闻或者文章的具体内容

<ul>
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ul>

 

html表单

1、<form>标签 定义整体的表单区域

  • action属性 定义表单数据提交地址
  • method属性 定义表单提交的方式，一般有“get”方式和“post”方式

2、<label>标签 为表单元素定义文字标注

3、<input>标签 定义通用的表单元素

  • type属性
    • type="text" 定义单行文本输入框
    • type="password" 定义密码输入框
    • type="radio" 定义单选框
    • type="checkbox" 定义复选框
    • type="file" 定义上传文件
    • type="submit" 定义提交按钮
    • type="reset" 定义重置按钮
    • type="button" 定义一个普通按钮
  • value属性 定义表单元素的值
  • name属性 定义表单元素的名称，此名称是提交数据时的键名

4、<textarea>标签 定义多行文本输入框

5、<select>标签 定义下拉表单元素

6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项

<form action="http://www..." method="get">

　　<label>姓名：</label><input type="text" name="username" />

　　<label>密码：</label><input type="password" name="password" />

　　<label>性别：</label>
　　<input type="radio" name="gender" value="0" /> 男
　　<input type="radio" name="gender" value="1" /> 女

　　<label>爱好：</label>
　　<input type="checkbox" name="like" value="sing" /> 唱歌
　　<input type="checkbox" name="like" value="run" /> 跑步
　　<input type="checkbox" name="like" value="swiming" /> 游泳

　　<label>照片：</label>
　　<input type="file" name="person_pic">

　　<label>个人描述：</label>
　　<textarea name="about"></textarea>

　　<label>籍贯：</label>
　　<select name="site">
   　　 <option value="0">北京</option>
    　　<option value="1">上海</option>
　　</select>

　　<input type="submit" name="" value="提交">
　　<input type="reset" name="" value="重置">

</form>

单行文本框文字提示:placeholder 设置input输入框的默认提示文字

表格元素及相关样式

1、<table>标签：声明一个表格

2、<tr>标签：定义表格中的一行

3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

  • colspan 设置单元格水平合并，设置值是数值
  • rowspan 设置单元格垂直合并，设置值是数值

表格相关样式属性

  • border-collapse 设置表格的边线合并，如：border-collapse:collapse;

相关推荐