Web前端——html 基本标签

基本标签

文件标签

构成html最基本的标签

html:html文档的根标签

head:头标签,用于指定文档的一些属性,引入外部资源

title:标题标签

body:体标签

!DOCTYPE html :html5中定义该文档是html文档

文本标签

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<br>
    <!-- 标题标签 -->
    <h4>定风波</h4>
    <h4>苏轼</h4>
    <!--换行-->
<i>三月七日,沙湖道中遇。雨具先去,同行皆狼,余独不觉,已而遂,故作此。</i></br><!-- i->斜体-->
    莫听穿林打叶声,何妨吟啸且徐行。竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。</br>
料峭春风吹酒醒,微冷,山头斜照却相迎。回首向来萧瑟处,归去,<b>也无风雨也无晴</b><!-- b->黑体-->
    <!--显示一条水平线-->
    <hr color="red" size="10" align="left" >
    <!--段落标签-->
    <p>看过这样一个故事:一对小夫妻开了个小店卖馒头,就一张红纸写了店名贴在门口。一个电蒸锅,一天也蒸不出几屉馒头。邻居都替他们发愁,这日子可咋过呢?</p>
  <p>谁知过了几个月,来买馒头的人越来越多,红纸上便添了几个字,开始卖花卷、糖三角和发糕。又过了几个月,又添了煮黏苞米、
    自制大酱、咸鸭蛋和咸菜……</p>
 <p>作者写到,这家人“就像雨后抖动的一株草”。是的,这株草虽然柔弱,但却有一种令人感动的生命力。一对普通的小夫妻,通过一天天踏实的努力,生活越来越好。然而,也有一些人, 感觉自己没有握住一手好牌,便早早放弃了。</p>
   <hr color="green" size="5" align="center" width="50%">
    <!--字体标签-->
    <center>   <!--居中标签-->
        <font color="black" size="20" face="宋体"> 加油!</font>
    </center>
</body>
</html>

属性定义 color:1.英文单词:red、green等;

2.rgb(值1,值2,值3):值的范围:0~225(rgb为三原色的缩写)

3.#值1值2值3:值的范围:00~FF之间(取色器)

width:1.数值:例如:width=“20”,默认单位是像素;

2.数值%:占比相对于父元素的比例

 

 

图片标签

<!--展示一张图片-->
<img  src="图片路径.jpg"  alt="图片没有正确展示" width="50" height="50"/>
<!--
相对路径
    *以.开头的目录
        ./代表当前目录
        ../代表上一级目录
-->

列表标签

<!-- 有序列表 -->
<ol type="A" start="3">
    <li>睡觉</li>
    <li>吃饭</li>
    <li>学习</li>
</ol>
<!-- 无序列表 -->
<ul type="circle/square/disk" >
    <li>睡觉</li>
    <li>吃饭</li>
    <li>学习</li>
</ul>

链接标签

<!--超链接 a-->
<a href="http://www.baidu.com">百度</a><br>
<a href="http://www.baidu.com" target="_blank">百度2</a>
</br><a href="./Demo2.html">图片标签</a></br>
<a href="http://www.baidu.com"><img src="为图片设置超链接.img"></a></br>

属性:href:指定访问资源的URL(统一资源定位符)
    target:-self(默认):在当前界面打开;
            -blank:在空白页面打开

表格标签

table:定义表格 caption::定义表格名

tr:定义行 thead:定义表格的头部分

tb:定义单元格 tbody:定义表格的体部分

th:定义表头单元格 tfoot:定义表格的脚部分

<table border="1" width="30%">
    <caption>学生信息表</caption>
    <!--
    border:边框;width:宽度 cellspacing:定义单元格之间的距离
    cellpadding:定义内容和单元格之间的距离 bgcolor:定义背景色-->
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>小明</td>
        </tr>
        <tr>
        <td>02</td>
        <td>小红</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td >colspan="2"备注</td>
           <!-- 属性:该单元格占两列(rowspan=“2”,单元格占两列)-->
        </tr>

<td >colspan="2"备注</td>
<!-- 属性:该单元格占两列(rowspan=“2”,单元格占两列)-->
</tr>
</tfoot>
</table>

 

表单标签

表单:用于采集用户输入数据的,用语和服务器进行交互。

标签:form

<!--
from:用于定义表单,可以定义一个范围,范围代表采集数据的范围
属性:action:指定提交数据的URL
      method:指定提交方式
      分类:共有七种,常用两种
      get:1.请求参数在地址栏中显示
           2.请求参数有大小限制
           3.不太安全
      post:1.请求参数在不会地址栏中显示,会封装在请求体中
            2.请求参数没有大小限制
            3.比较安全
 表单项中的数据要想被提交,必须指定其name属性
-->

表单项标签

input:可以通过type属性值改变元素的展示样式

select:下拉列表 textarea:文本域

<form action="#" method="post">
    <lable for="usernaem"> 用户名:</lable><input type="text"  name="username" placeholder="请输入用户名" id="usernaem"><br>
    //label标签for后的内容与输入内容的id相同,可以定位光标
    密码:<input tupe="password" name="password" placeholder="请输入密码"><br>
    //type为密码类型可以隐藏输入
    性别:<input type="radio" name="gender" value="male" checked><input type="radio" name="gender" value="female"><br>
    //type为radio单选框,应保证name后面的内容相同
    爱好:<input type="checkbox" name="hobby"  value="game">游戏
    <input type="checkbox" name="hobby"  value="ball">篮球
    <input type="checkbox" name="hobby"  value="chess" checked>象棋<br>
    //type为checkbox复选框,应保证name后面的内容相同
    上传图片:<input type="file" name="file"><br>
    隐藏域:<input type="hidden" name="cc" value="aa"><br>
    取色器:<input type="color" name="color"><br>
    日期:<input type="date" name="data1"><br>
        <input type="datetime-local" name="data2"><br>
    邮箱:<input type="email" name="email"><br>
    定义数字:<input type="number" name="number"><br>
    按钮:
    提交按钮:<input type="submit" value="登录">
    按钮效果:<input type="button" value="这是一个按钮">
   图片提交:<input type="img" src="图片路径">
    下拉框:<select name="select">
                <option value=""> 请选择</option>
                <option value="1"> 1</option>
                <option value="2"> 2</option>
            </select><br>
    文本域:<textarea cols="10" rows="20" name="text"></textarea>

 

posted @ 2021-03-17 19:54  素色学习  阅读(208)  评论(0编辑  收藏  举报