• 2 HTML

    第一节、HTML介绍

    html 超文本标签语言，它是一门标签语言，和Java其他的编程语言不同，它完全依靠的是标签来表达含义，所有HTML提供了大量的标签，不通的标签具有不同的作用，学习html 主要任务就是熟悉掌握各种各样的标签。

    第二节、运行原理

    html 编写的是一个网页比如
    image.png

    第三节、版本介绍

    目前主流就是HTML5,往前就是 HTML4.0.1, XHMTL这些版本，目前就是以H5是最主要的，它和其他版本的区别，对于PC端开发HTML4 完全够用，HTML5是以移动端开发为驱动而产生的。一方面提供了比H4更多的标签。二提供了更多的JS操作网页能力。

    第一个程序

    <!DOCTYPE html>  主权声明，告诉浏览器我是要给HTML5的代码
<html lang="en">  网页整体
    <head>        网页头部
        <meta charset="UTF-8">  告诉浏览器用何种编码来解析。
        <title>Title</title>    告诉浏览器网页标题
    </head>
    <body>        网页主体
        code here...... 这这里写自己的代码    
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    第四节、HTML 语法

    1标签语法

    任何内容的出现都是使用标签来包裹的，不同的标签有不同作用

    <a> 我是一个web菜鸡 a>

    • 1
    1. 开始标签
    2. 结束标签
    3. 通常是成对出现，偶尔也有单标签( 没有介素标签 hr br img )
    4. 介于开始和结束间的东西称为标签内容。

    2属性语法

      <a href="http://www.bilibili.com" target="_blank" > 我是一个web菜鸡 a>

    • 1
    1. 写在开始标签中，属性通过 key=value 方式编写
    2. 不同的标签拥有不同的属性，靠记。

    3嵌套语法

    多个或多种标签可以相互包含，一个标签的内容又是其他标签。

    
    <div>
        hello
        <span>worldspan>
    div>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    这里 div 嵌套的 span 标签。

    第五节、HTML 常用标签

    html5全部标签https://www.runoob.com/html/html5-intro.html自学参考。https://www.w3cschool.cn/html/

    标题

    
<h1>刘士祺是Web菜鸡h1>
<h2>刘士祺是Web菜鸡h2>
<h3>刘士祺是Web菜鸡h3>
<h4>刘士祺是Web菜鸡h4>
<h5>刘士祺是Web菜鸡h5>
<h6>刘士祺是Web菜鸡h6>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    image.png

    h1-h6 随着数字越大 字体就越小。显示标题

    段落

    <p>刘士祺学习Web前端非常的认真，结果写不来网页，他说一听就会，一写就废，梁老师安慰他说没事，你就是个菜鸡，没关系,刘士祺学习Web前端非常的认真，
    结果写不来网页，他说一听就会，一写就废，梁老师安慰他说没事，你就是个菜鸡，没关系刘士祺学习Web前端非常的认真，结果写不来网页，他说一听就会，一写就废，梁老师安慰他说没事，
    你就是个菜鸡，没关系p>

    • 1
    • 2
    • 3

    每个段落会自动换行。显示一段段落

    文本控制

    <p>刘士祺学习Web前端非常的认真，结果写不来网页，他说一听就会，一写就   
  <font color="red">废font> ，梁老师安慰他说没事，你就是个菜鸡，没关系,刘士祺学习Web前端非常的认真，
    结果写不来网页，他说一听就会，一写就废，梁老师安慰他说没事，
  你就是个<font color="#8a2be2" size="40">菜鸡font>，没关系刘士祺学习Web前端非常的认真，结果写不来网页，他说一听就会，一写就废，梁老师安慰他说没事，
    你就是个<font color="red" size="30" face="楷体">菜鸡font>，没关系p>

    • 1
    • 2
    • 3
    • 4
    • 5
    <p>IPhone12Pro Max  
  <del><font color="gray"><em>价格:1998.00em>font>del>  
  <font color="red"><strong>现价:9.8包邮strong>font> 
p>

    • 1
    • 2
    • 3
    • 4

    font 控制 字体颜色 大小 样式
    del 删除线
    strong 加粗
    em 倾斜

    水平线

    <hr color="red" size="1" width="300" align="center">


    • 1
    • 2

    color 颜色
    size： 粗细
    width: 宽度
    align: 对齐 left | center | right

    换行

    <span> hello  <br>
    world  span>

    • 1
    • 2

    网页中元素是否换行不是由代码排列决定的，而是有元素的性格决定的。

    图片

    <img src="image/jt.jpg" width="200" height="300" alt="景甜"  >

    • 1

    src 图片位置，相对路径
    width 宽度
    height 高度
    alt 图片加载失败的提示信息

    超链接

    <a href="http://www.bilibili.com" target="_blank" >我是一个连接a>


    • 1
    • 2

    href ： 调整页面地址
    target： 控制页面打开方式 _slef(默认，覆盖当前页面） _blank(新开一个页面)

    列表

    无序列表
<ul type="circle">
   <li>景甜li>
   <li>杨幂li>
   <li>杨颖li>
   <li>白百何li>
ul>
有序列表
<ol type="a">
    <li>景甜 <img align="middle" src="images/jt.jpg" width="60" height="60">li>
    <li>杨幂 <img align="middle" src="images/jt.jpg" width="60" height="60">li>
    <li>杨颖 <img align="middle" src="images/jt.jpg" width="60" height="60">li>
    <li>白百何 <img align="middle" src="images/jt.jpg" width="60" height="60">li>
    <li>马蓉 <img align="middle" src="images/jt.jpg" width="60" height="60">li>
ol>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    表格

    <table width="1000" height="600" border="1" cellspacing="0" cellpadding="10">
   <tr>
         <td>姓名td>
         <td>性别td>
         <td>年龄td>
         <td align="center" valign="middle"  bgcolor="red" >血型td>
         <td>身高(cm)td>
         <td>收入(亿)td>
   tr>
    <tr bgcolor="orange">
        <td>陈奕迅td>
        <td>男td>
        <td>40td>
        <td>Otd>
        <td>177td>
        <td>1.5td>
    tr>

    <tr>
        <td>陈奕迅td>
        <td>男td>
        <td>40td>
        <td>Otd>
        <td>177td>
        <td>1.5td>
    tr>

    <tr>
        <td>陈奕迅td>
        <td>男td>
        <td>40td>
        <td>Otd>
        <td>177td>
        <td>1.5td>
    tr>

    <tr>
        <td>陈奕迅td>
        <td>男td>
        <td>40td>
        <td>Otd>
        <td>177td>
        <td>1.5td>
    tr>

table>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    table[表格] > tr[行] -> td[列]

    • table

            width="1000"  宽 
                  height="600" 高
                  border="1"    边框显示 0 不显示
                  cellspacing="0"     单元格间距
                  cellpadding="10"  单元格内边距。

      • 1

    • td

            algin: 水平   left | center | right
                  valgin: 垂直    top | middle | bottom
                  bgcolor：背景色
                  colspan ： 合并列
                  rowspan： 合并行
                 

      • 1

    文本

    <span>我是测试文字1span><span>我是测试文字2span>

    • 1

    span 是典型的行内元素，就是他不会主动换行，除非一行已经占满。

    块

    <div>
  
    我是div 1
  
div>  
<div>
  
    我是div 2
  
div>  

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    div 是典型的块元素，就是它会主动换行,哪怕一行并未占满。

    表单

    表单就是用于用户填写或者选择的标签，用于收集用户数据。比如你要登录，填写账号密码，比如你要报账，填写报销信息的表单。

     
<form action="服务端接受地址" method="get"  enctype="application/x-www-form-urlencoded" >

    <input name="username" type="text" placeholder="输入账号/手机号"  >
    <input name="pwd" type="password" placeholder="输入秘密" >

    <hr>
    <input id="a" name="xx" type="radio" value="man" >  <label for="a" >男label>
    <input id="b" name="xx" type="radio" value="woman" > <label for="b">女label>

    <hr/>
    <input id="c" name="hobby" type="checkbox" value="game"> <label for="c">游戏label>
    <input id="d" name="hobby" type="checkbox" value="live"><label for="d">直播label>
    <input id="e" name="hobby" type="checkbox" value="wash"><label for="e">洗浴label>
    <input id="f" name="hobby" type="checkbox" value="ball"><label for="f">球label>

    <select name="city">
         <optgroup label="西南地区">
             <option value="CQ">重庆option>
             <option value="GZ">贵州option>
             <option value="YL">云南option>
         optgroup>
        <optgroup label="东北地区">
            <option value="HLJ">黑龙江option>
            <option value="LN">辽宁option>
            <option value="JL">吉林option>
        optgroup>
    select>

    <hr>
    <textarea name="info" cols="100" rows="10" placeholder="请填写信息" >textarea>
    <hr>

   
    <input type="submit" value="注册">
    <input type="reset" value="重置">
form>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    状态: 对应radio checkbox 默认选中 在需要选中的标签添加 checked属性；
    对于 select 默认选中 在需要选中的标签总添加 **selected **属性。
    其他: disable 表示禁用，禁用后不可操作，更不会发送数据个后台
    readonly 表示只读， 不可修改。 但是数据会发送给后台。

    效果
    image.png

    ====表单练习=
    image.png

    页面框架

    
<a href="2_语法.html" target="show">首页a>
<a href="https://www.bilibili.com" target="show">公司介绍a>
<a>产品a>
<a>招聘a>
<a>联系我们a>
<hr>
<iframe name="show" width="1000" height="500" src="">

iframe>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    image.png

  • 相关阅读:
    Linux零基础入门（一）初识Linux
    广州市车联网先导区车联网先导区路侧感知技术规范
    MongoDB使用及命令大全(一）
    Vue——vue3中的ref和reactive数据理解以及父子组件之间props传递的数据
    LVS-群集架构介绍(linux 虚拟服务)
    沃通CA荣获多项国际ISO体系认证证书
    使用 Spring Cloud Loadbalancer 实现客户端负载均衡
    【项目实战】自主实现 HTTP 项目（四）——处理请求和构建相应
    多主架构：VLDB技术论文《Taurus MM: bringing multi-master to the cloud》解读
    Springboot漫画网站j846u计算机毕业设计-课程设计-期末作业-毕设程序代做
  • 原文地址：https://blog.csdn.net/yc_Cabbage/article/details/126295335