前端——html入门

张謹礧

已于 2023-05-28 09:45:28 修改

阅读量89

点赞数

分类专栏： html案例文章标签： html 前端 java

于 2023-05-26 22:29:57 首次发布

本文链接：https://blog.csdn.net/weixin_66547608/article/details/130894867

版权

html案例专栏收录该内容

7 篇文章 1 订阅

订阅专栏

html:HyperText Markup Languge 超文本标记（标签构成）语言
java是一门逻辑语言，HTML是一门标记语言
HTML的结构：
    1.在网页的第一行必须只能存在一个HTML声明
    2.在声明的下方来组成网页的代码部分
 体部分：存放的是组成html代码部分
 头部分：存放的是html优先加载的资源

html语法：
    1.html标签不区分大小写
    2.html标签可以有起始和结束标签组成 ----<html></html>
    3.html的标签还可以书写成一个自闭标签形式
    4.html资源中多个回车、制表符、空格都会在显示的时候合成一个空格来显示

<!DOCTYPE html>
<!--声明-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
    体部分：存放的是组成html代码部分
</head>

<BODY>
    <!--
    html:HyperText Markup Languge 超文本标记（标签构成）语言
    java是一门逻辑语言，HTML是一门标记语言
    HTML的结构：
        1.在网页的第一行必须只能存在一个HTML声明
        2.在声明的下方来组成网页的代码部分
     体部分：存放的是组成html代码部分
     头部分：存放的是html优先加载的资源
    -->
    体部分：存放的是组成html代码部分
    <br />
    <hr />
    <!-- 自闭标签   -->
    信阳农林学院

            是个好学校
    <!--
        html语法：
            1.html标签不区分大小写
            2.html标签可以有起始和结束标签组成 ----<html></html>
            3.html的标签还可以书写成一个自闭标签形式
            4.html资源中多个回车、制表符、空格都会在显示的时候合成一个空格来显示
     -->
</BODY>
</html>

1.font标签
    color：字体颜色
      1.颜色英文直接用
      2.6位16进制的颜色
    size:字体大小
      取值范围：1-7 默认值为3
2.标签体标签
3.列表标签
      有序列表
      无序列表
          1.sqare:实心方块
          2.circle:空心圆
          3.disc:实心圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签-01</title>
</head>
<body>
      <!--
          1.font标签
              color：字体颜色
                1.颜色英文直接用
                2.6位16进制的颜色
              size:字体大小
                取值范围：1-7 默认值为3
          2.标签体标签
          3.列表标签
                有序列表
                无序列表
                    1.sqare:实心方块
                    2.circle:空心圆
                    3.disc:实心圆

      -->
      <font size="8" color="#123abc">字体标签</font>
      <h1 align="center">我是一级标题</h1>
      <h2 align="right">我是二级标题</h2>
      <h3>我是三级标题</h3>
      <h4>我是四级标签</h4>
      <ol>
        <!--  li代表是项  -->
          <li>刘备</li>
          <li>刘备</li>
          <li>刘备</li>
      </ol>
      <ul type="disc">
          <li>spring</li>
          <li>summer</li>
          <li>automn</li>
          <li>winter</li>
      </ul>
</body>
</html>

表格标签
    table:表示的是表格标签
    tr：表示表格中的行标签
    td：表格中的单元格
    th:行中的标签单元格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签</title>
</head>
<body>
      <!--
          表格标签
              table:表示的是表格标签
              tr：表示表格中的行标签
              td：表格中的单元格
              th:行中的标签单元格标签
      -->
  <table border="2px" bordercolor="pink" bgcolor="#FF3456" width="200px" align="center">
      <tr align="center" bgcolor="#5566DD">
          <td align="center" bgcolor="#abc123" width="400px" height="400px">java</td>
          <td>Python</td>
          <td>Scala</td>
      </tr>
      <tr>
          <th>Go</th>
          <th>R</th>
          <th>C++</th>
      </tr>
  </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签</title>
</head>
<body>
    <!--
        form标签
    -->
    <form action="http://www.jd.com">
          姓名:<input type="text" name="username" value="王默认" readonly="readonly" /><br />
          密码:<input type="password" name="password" /><br />
          性别:<input type="radio" name="gender" value="female" />男
              <input type="radio" name="gender" value="female" />女<br />
          爱好:<input type="checkbox" name="like" value="sing" />唱歌
              <input type="checkbox" name="like" value="dance" />跳舞
              <input type="checkbox" name="like" value="sing" />打篮球<br />
          上传文件:<input type="file" /><br />
          按钮:<input type="button" value="点击提交" /><br />
          隐藏框:<input type="hidden" value="3" /><br />
          城市信息:
                <!--  multiple="multiple" 可以选中多个值      -->
                <select name="city" multiple="multiple" >
                    <option value="xy" >信阳</option>
                    <option value="ay" >安阳</option>
                    <!--selected="selected" 默认展示 -->
                    <option  value="ny" selected="selected">南阳</option>
                    <option value="by" >濮阳</option>
                    <option value="ly" >洛阳</option>
                </select><br />
          自我介绍:
                <textarea cols="50" rows="20">这是一个文本域</textarea><br />
            提交：<input type="submit" /><br />
            重置：<input type="reset" /><br />
    </form>

</body>
</html>

1.图片标签
    作用：可以在网页中引入一张图片
    1.src:图表所在路径
    2.alt:如果图片没有正常展示则代替图片出现的解释文字
    3.width:宽度 heigth:高度
2.超链接(锚链接)
    超链接有两种使用方式
        1.第一张使用方式：跳转界面
             href：跳转的一个目标地址
             target：
                   1._self：在当前界面覆盖打开新的页面
                   2._target：在新的窗口打开新的界面
        2.第二种：作为书签使用
              1.先创建一个隐形的点作为书签（不希望用户看见）
              2.在创建一个超链接标签当作是返回会上一层的按钮使用
                    name：a标签的名称
                    href：表示的是挑战的目标地址，如果添加”#“则代表在当前页面中寻找对应名称的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <!--
        1.图片标签
            作用：可以在网页中引入一张图片
            1.src:图表所在路径
            2.alt:如果图片没有正常展示则代替图片出现的解释文字
            3.width:宽度 heigth:高度
        2.超链接(锚链接)
            超链接有两种使用方式
                1.第一张使用方式：跳转界面
                     href：跳转的一个目标地址
                     target：
                           1._self：在当前界面覆盖打开新的页面
                           2._target：在新的窗口打开新的界面
                2.第二种：作为书签使用
                      1.先创建一个隐形的点作为书签（不希望用户看见）
                      2.在创建一个超链接标签当作是返回会上一层的按钮使用
                            name：a标签的名称
                            href：表示的是挑战的目标地址，如果添加”#“则代表在当前页面中寻找对应名称的标签


      -->
    <img src="a.gif.jpg" alt="这是一张美女的照片" width="50%" height="50%" >
    <a href="http://www.baidu.com" target="_target">百度一下</a>
    <a name="tag" ></a>
    <h1>王衡历险记</h1>
    <p>
        王衡潜入荒岛，找吃的
        找啊找<br/>
         找啊找<br/>
         找啊找<br/>
         找啊找<br/>
         找啊找<br/>
         找啊找<br/>
         找啊找<br/>
         找啊找<br/>
         找啊找<br/>
         找啊找<br/>
         找啊找<br/>
         找啊找<br/>
        找啊找<br/>
         找啊找<br/>
         找啊找<br/>
         找啊找<br/>
        饿死了<br />
        故事群居终
    </p>
    <a href="#tag">点击返回上一层</a>
</body>
</html>