zoukankan      html  css  js  c++  java

  • HTML超文本标记语言

    目录

    HTML：超文本标记语言

    1.注释

    注释是代码之母！

    在搭建页面时，通常会利用注释来划分区域。

    1.1 单行注释

    <!--注释内容-->

    2.2 多行注释

    其实直接在单行注释里面换行就可以了

    <!--
注释内容
注释内容
注释内容
-->

    2.文档结构

    <html>
	<head></head>  head头不是给人看的，是给浏览器看的
	<body></body>  body内的代码才是给人看的
</html>

    3.标签

    3.1 HTML 标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

    1. HTML 标签是由尖括号包围的关键词，比如
    2. HTML 标签大部分是成对出现的，比如 <b> </b>
    3. 标签对中的第一个标签是开始标签，第二个标签是结束标签
    4. 开始和结束标签也被称为开放标签和闭合标签

    3.2 标签通常应该有的两个属性

    1. id：就类似于是身份证号，每一个标签，都应该有id值，并且在同一个html文档中，标签的id不能重复
    2. class：类属性，有点类似于面向对象的继承，class = 'c1 c2 c3'，你这个标签就会拥有c1 c2 c3的所有样式

    4. 标签的分类

    4.1 双标签和自闭合标签

    1. 双标签即为有头有尾的标签，如
    <h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
    1. 自闭合标签即为只有一个箭头括号的标签，如
    <img src="图片链接，可以是本地地址，也可以是网络地址"/>

    4.2 块级标签和行内标签

    1. 块级标签指在浏览器显示中独占一行的标签，是块级元素
    特点：
	1. 块级标签内可以嵌套其他块级标签和行内标签
	2. p标签虽然是块级标签，但是他的内部不能嵌套任何块级标签，只能嵌套行内标签。
举例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是p标签的效果<s>这是s标签效果</s></p>
<br>
<hr>
<div>这里是div</div>
    1. 行内标签，是内联元素
    特点：
	1. 内部文本多大，标签的位置就占多大
	2. 行内不能嵌套行内和块级标签
举例：
<s>这是s标签效果</s>
<i>这是i标签的效果</i>
<u>这是u标签的效果</u>
<b>这是b标签的效果</b>

    5.常用标签

    5.1 head内常用标签

    1. title：定义网页标题
    2. style：内部支持写css代码
    3. link：引入外部css样式文件
    4. script：内部可以直接写js代码 也可以引入外部js文件
    5. meta：定义网页源信息
    <meta charset="UTF-8">
<title>我的第一个HTML文件</title>
<style>样式代码</style>
<link rel="stylesheet" href="scc文件名">
<script src="js文件名"></script>

    5.2 body内常用标签

    1. h1~h6：标题标签
    2. p：段落标签 一个p就是一行内容
    3. u：下划线
    4. i：斜体
    5. s：删除线
    6. b：加粗
    7. br：换行
    8. hr：一条分割线
    <h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是p段落标签标签的效果<s>这是s标签效果</s></p>
<u>这是u标签的效果下划线</u>
<i>这是i标签的效果斜体</i>
<s>这是s标签效果删除线</s>
<b>这是b标签的效果加粗</b>
<br>
<hr>

    5.3 body内的重要标签

    1. div：一块区域，可用于组合其他HTML元素的容器

    2. span：文本的容器，内联元素

    3. a：连接标签

      • 跳转功能：href参数控制跳转的地址
        • 默认在当前窗口跳转target = "_self"，想在新窗口跳转可设置target = "_blank"
      <a href="https://www.sogo.com" id="1">这里是id=1的标签的位置</a>
      • 锚点功能：给a标签设置id值，然后在href中设置 ‘#+id’ 点击即可跳转到对应的位置。
      <a href="#1">这里可以连接到标签id为1的标签的位置</a>

    4. img：图片标签

      • src属性

        1. 图片地址，网上的地址也可以是你的本地图片地址
        2. url(网址)，自动朝该网址发送get请求 获取图片资源

      • alt属性

        当图片加载不出来的时候 展示的提示信息

      • title属性

        鼠标悬浮上去之后展示的提示信息

      • width和height

        这两个参数你只需要设置一个，就可以默认是等比例缩放，两个都设置的话，图片就会失真

    6.特殊符号

    1. &nbsp;	空格
2. &amp;	&
3. &yen;	￥
4. &gt;		>
5. &lt;		<
6. &copy;	©
7. &reg;	®

    7.列表标签

    7.1无序列表

    ul+li

    type参数：

    1. disc（实心圆点，默认值）
    2. circle（空心圆圈）
    3. square（实心方块）
    4. none（无样式）
    <ul>
    <li>
        what1?
    </li>
    <li>
        what2?
    </li>
</ul>

    7.2 有序列表

    ol+li

    type参数：

    1. 1（数字列表，默认值）
    2. A（大写字母）
    3. a（小写字母）
    4. I（大写罗马）
    5. i（小写罗马）
    <ol type="a">
    <li>
        what1?
    </li>
    <li>
        what2?
    </li>
</ol>

    7.3 标题列表（了解）

    dl+dt(小标题)+dd(小章节)

    8.表格标签

    table 常用于展示数据

    属性：

    1. border：表格边框
    2. cellspadding：内边距
    3. cellspacing：外边距
    4. width：像素 百分比（最好通过css来设置长宽）
    5. rowspan：单元格竖跨多少行
    6. colspan：单元格横跨多少列（即合并单元格）
    <table>
    <thead>
        <tr>
            <th>number</th>
            <th>name</th>
            <th>age</th>
        </tr>  一个tr就表示一行
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>tbw</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

    9.form表单

    form表单用于搜集不同类型的用户输入数据，然后打包发给服务器，服务器处理输入数据，返回反馈信息。

    <form action="" accept-charset="UTF-8" method="post" enctype="multipart/form-data">
<!--这里输入表单信息-->
</form>

    9.1 input 元素

    设置一个单行文本框，用来让用户输入信息。

    <p>
    用户名：<input type="text">
    <br>
    密码：<input type="text">
</p>

    9.1.1 input元素的type属性

    input元素可以通过<input type="属性名">的方式来约束在input文本框内输入信息的格式。

    ①text

    输入普通文本信息，任何输入都可以

    <input type="text">

    ②password

    输入的信息会变成小点点，让别人看不到

    password:<input type="password">

    ③date

    data:<input type="date">

    ④radio

    设置几个选择按钮，且只能选择一个

    radio1:<input type="radio" name="r1">
radio2:<input type="radio" name="r2">

    ⑤checkbox

    设置多个按钮，可以多选

    checkbox1:<input type="checkbox" name="c1" value="c1">
checkbox2:<input type="checkbox" name="c2" value="c2">
checkbox3:<input type="checkbox" name="c3" value="c3">

    ⑥file

    设置一个按钮，点击这个按钮可以选择文件上传

    file:<input type="file">

    ⑦hidden

    隐藏文本框，让文本框看不见

    hidden:<input type="hidden">

    ⑧button

    设置一个按钮，点了不出发任何操作

    button:<input type="button" value="按钮">

    ⑨reset

    设置一个重置按钮，点击该按钮会将其他文本框内的信息重置

    reset:<input type="reset" value="重置">

    ⑩submit

    设置一个提交按钮，可以将本页面的信息提交到服务器

    submit:<input type="submit" value="提交">

    9.1.2 输入属性

    1. name：表单提交时的“key”，注意和id的区别
    2. value：表单提交时对应项的值
      • type="button", "reset", "submit"时，为按钮上显示的文本年内容
      • type="text","password","hidden"时，为输入框的初始值
      • type="checkbox", "radio", "file"，为输入相关联的值
    3. checked：radio和checkbox默认被选中的项
    4. readonly：text和password设置只读
    5. disabled：所有input均适用，规定该字段是禁用的，不可点击，不会被提交

    9.2 select 元素

    设置一个下拉列表，可以让用户选择，比如你注册账户，人家让你选择你的省份，是不是就是一个下拉列表？

    <p>想要去哪旅游？
    <select name="country" id="1">
        <!--option即为每一条选项-->
        <option value="泰国">泰国</option>
        <option value="新加坡">新加坡</option>
        <option value="印度尼西亚">印度尼西亚</option>
    </select>
</p>

    9.3 textarea 元素

    设置一个多行文本框，可以让用户输入多行信息。

    <p>请输入身份信息：
    <textarea name="test" id="2" cols="30" rows="10"></textarea>
</p>

    9.4 button 元素

    设置一个按钮，可以点击，并且将点击这个操作获得的信息提交服务端。

    <button>点一下，你的朋友长胖20斤！</button>
  • 相关阅读:
    修改linux下某一个文件夹下所有文件内容
    jenkins对结果进行断言问题
    linux 循环处理文件夹下所有文件脚本
    LR java Vuser 相关依赖JAR包，配置文件处置方法
    Jmeter函数 唯一取值 笔记
    jmeter+java vuser+rmi+dubbo脚本
    eclipse快捷键
    猫狗队列
    用固定长度的数组实现stack queue
    两个单链表相交的问题
  • 原文地址：https://www.cnblogs.com/bowendown/p/11852901.html
Copyright © 2011-2022 走看看