html基础知识

第一章html简单介绍

1.1 html定义

html:超文本标记语言 (Hyper Text Markup Language) ;它的作用是控制页面的结构,页面的内容。
1.2 web最基本
html:用于对网页元素进行整理和分类
css:用于设置网页元素的版式、颜色、大小等外观样式
javascript:网页模型的定义及交互的编写

第二章html常见标签

2.1排版标签

排版标签有标题,段落,横线,换行等标签,可以对页面的文字标题段落进行合理的排版。
h1-h6
p 文本内容
hr 横线
br 换行

2.2 字体的修饰标签

编写网页时,经常需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的字体的修饰标签,使文字以特殊的方式显示。

在这里插入图片描述

<body>
    <strong>加粗</strong>
    <em>斜体</em>
    <del>过时</del>
    <ins>下划线</ins>
</body>

2.3 图像标签

调用图片的两个方法

<body>
    <!-- 相对路径 -->
    <img src="../imgs/1.jpg" />
    <!-- 绝对路径 -->
    <img src="D:\java\web-workspace\day01-html\imgs\1.jpg" />
</body>

这样建文件夹,比较好看
请添加图片描述

2.4超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。
**target:**用于指定链接页面的打开方式,其取值有_self和_blank两种,其中self在本窗口打开,blank为在新窗口中打开方式。

<body>
    <!--本地相对路径-->
   	<!--_self在本窗口-->
    <a href="./1.排版标签.html" target="_self">html入门</a>
    <!--_blank在新窗口-->
    <!--网络路径-->
    <a href="http://www.baidu.com" target="_blank">百度</a>
</body>

2.5列表标签

列表标签分为

1、 有序列表 (ol li)
2、 无序列表 (ul li)
3、 自定义列表 (dl dt dd)

<body>
    <!--无序列表-->
    <ul>
        <li>洗衣机</li>
        <li>电视</li>
        <li>空调</li>
        <li>冰箱</li>
    </ul>
    <!--有序列表-->
    <ol type="a">
        <li>洗衣机</li>
        <li>电视</li>
        <li>空调</li>
        <li>冰箱</li>
    </ol>
    <!--自定义列表-->
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>
    <dl>
        <dt>服务支持</dt><!--dt为标题行-->
        <dd>售后政策</dd>
        <dd>自助服务</dd>
        <dd>相关下载</dd>
    </dl>
</body>

2.6 表格标签

表格标签是个比较复杂的标签,分为三层嵌套结构table表示一个表格,tr代表行,td代表列,th是标题列
在这里插入图片描述
Visual Studio Code这个软件中就有
table>(tr>td*3)*3可以快速打出三行三列
colspan 跨列 rowspan跨行

table>(tr>td*3)*3 快捷方式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>

<body>
    <!--table入门-->
    <table border="1px">
        <tr>
            <th>姓名</th>//头部
            <th>性别</th>
            <th>年龄</th>
        </tr>

        <tr>
            <td>爱丽丝</td>
            <td></td>
            <td>30</td>
        </tr>

        <tr>
            <td>路西法</td>
            <td></td>
            <td>29</td>
        </tr>

        <tr>
            <td>莱恩</td>
            <td></td>
            <td>29</td>
        </tr>
    </table>
    <hr />
    <!--table加入样式-->
    <table border="1px" cellspacing="0" width="800px" align="center" cellpadding="7px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>

        <tr>
            <td>爱丽丝</td>
            <td></td>
            <td>30</td>
        </tr>

        <tr>
            <td>路西法</td>
            <td></td>
            <td>29</td>
        </tr>

        <tr>
            <td>莱恩</td>
            <td></td>
            <td>29</td>
        </tr>
    </table>
    <hr />
    <table border="1px" cellspacing="0" width="800px" align="center" cellpadding="7px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>

        <tr>
            <td>爱丽丝</td>
            <td></td>
            <td>30</td>
        </tr>

        <tr>
            <td>路西法</td>
            <td></td>
            <td>29</td>
        </tr>

        <tr>
            <td>莱恩</td>
            <td></td>
            <td>29</td>
        </tr>
        <tr>
            <td colspan="3" align="center">首页 上一页 下一页 末页 当前2/5页,总共123条记录</td>
        </tr>
    </table>
</body>

</html>

效果图
在这里插入图片描述

2.7表单标签

表单由三部分组成,表单域、表单控件、表单提示信息三部分组成
**1、**表单控件:包含了具体的表单功能项,如单行文本输入框(text)、密码输入框(password)、单选框(radio)、复选框(checkbox)、提交按钮(submit)、重置按钮(reset)、普通按钮(button)、下拉式(select)等。
2、提示信息: 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
3、表单域: 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器

<body>
   <!-- **form是表单标签**,一对表单标签代表单作用域
    1.action 停缴的服务器路径
    2.method 提交方式
                **1.get 明文
                2.post 暗文提交**
    3.input 标签
                1.url?key=value
                2.type 属性 输入类型 text 文本类型
                3.name 提交参数的key
                3.value 是提交参数的value,输入的参数会自动赋值给value属性值-->
    <form action="http://www.baidu.com" method="get">
        姓名<input type="text" name="username" value=""><br/> 
        手机号<input type="text" name="mobile" value=""><br/> 
        密码<input type="password" name="password" value=""><br/>
        性别 男
        <!-- name属性值要相同 -->
        <input type="radio" name="sex" value="nan"><input type="radio" name="sex" value="nv">
        <br/> 爱好: 
        抽烟 <input type="checkbox" name="hobby" value="抽烟"> 
        喝酒 <input type="checkbox" name="hobby" value="喝酒"> 
        烫头:<input type="checkbox" name="hobby" value="烫头"/><br>
        <!-- 没有value属性 提交的value值是标签内的内容 -->
        <br/> 个人描述:
        <textarea name="description"></textarea><br/> 地址:
        <!-- 下拉选
        将name作为key选中的option项的value作为value提交给服务器
        -->
        <select name="address">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
        <br>
        <input type="button" value="普通按钮">
        <input type="submit" value="提交">
    </form>
</body>

2.8 浮动框架

html 提供**** 浮动框架标签,该标签的作用是提供一个局部的窗口,该局部窗口可以显示一个完整的页面;一般通过a标签链接一个页面,并通过target属性指定在局部窗口打开;
标签的 target 属性规定在何处打开链接文档

2.9 特殊符号

在这里插入图片描述

第三章 总结

  1. 1. web三要素是什么?

html css js

  1. 常见排版标签有哪些?

       h1 h2 h3 h4 h5 h6标题标签
       <p>文本标签</p>
       <hr/>横线标签
       <br/>换行标签
       div和 span标签 是没有语义的
       <b></b>加粗
       <strong></strong>加粗
       <i></i>倾斜
       <em></em>倾斜
       删除<s></s>
       <del></del>
       下滑线<u></u>
       <ins></ins>
    
  2. 字体修饰标签有哪些?

       加粗<b></b>
       <strong></strong>
       倾斜<i></i>
       <em></em>
       删除<s></s>
       <del></del>
       下滑线<u></u>
       <ins></ins>
    
  3. 如何表示一个图像?

       <img src="">
    
  4. 如何表示一个超链接?

       <a href="跳转目标" target="目标窗口的弹出方式"></a>
       target:
       _self在本窗口打开
       _blank在新窗口打开
    
  5. 列表标签有哪些?

       无序标签ul li
       有序标签ol li 
       自定义列表dt dd
    
  6. 表格标签应用注意什么?

       三层嵌套结构table表示一个表格,tr代表行,td代表列
       创建表格的时候,必须先指定table标签,再在table标签中指定tr表示一个表格的行数,然后在每个tr标签中嵌套td表示每行的列数。 th是标题列 
    
  7. 表单标签应用注意什么?

       表单由三部分组成,表单域、表单控件、表单提示信息三部分组成。
      表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
      提示信息: 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
      表单域:  他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
    
  8. 表单项类型有哪些?

      text 普通文本框
      password 密码框
      email 邮箱框,简单验证
      radio 单选框 选项必须有相同的Name属性值,value属性设置实际提交的值。checked属性代表默认选中
      checkbox 复选框,选项必须有相同的name属性值,value属性设置实际提交的值,checked属性代表默认选中
      date 日期框
      time 时间框
      datetime-local 时间日期框
      number 数字框
      range 滚动条数值框 min 最小值 max最大值 step步进值
      search 可清除文本框
      tel 电话框
      url 网址框
      file 文件上传框
      hidden 隐藏域 value属性设置实际提交的值
    
  9. 什么是浮动框架?

       html 提供<iframe></iframe> 浮动框架标签,该标签的作用是提供一个局部的窗口,该局部窗口可以显示一个完整的页面;一般通过a标签链接一个页面,并通过target属性指定在局部窗口打开
    
  • 14
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值