HTML第二篇

2021-09-30 10:59:19 作者：互联网

列表

什么是列表：
用于显示并列关系的点
比如现在就是一个列表
1 2 3 显示的是有序列表
. . . . 显示是是无序列表
列表可以嵌套使用
列表嵌套：
Java 课程：

Java 语法基础
1. 变量和数量类型
2. 运算符
3. 流程控制
Java SE 核心API
1. 字符串
2. 集合
WEB 全栈
1. HTML
2. CSS
框架和互联网架构
就业冲刺
列表原理：

<h1>无序列表 List</h1>
<ul>
<li>用于显示并列关系</li>
<li>现在就是一个列表</li>
<li>1 2 3 开头是有序列表</li>
<li>. . . 开头是无序列表</li>
<li>列表可以嵌套</li>
</ul>
<h1>有序列表 </h1>
<ol>
<li>Java基础</li>
<li>Java核心API</li>
<li>Web 全栈</li>
<li>框架和互联网架构</li>
</ol>

嵌套列表原理：
在这里插入图片描述

<h1>列表嵌套</h1>
<ol>
<li>Java基础
<ol>
<li>变量数据类型</li>
<li>运算符</li>
<li>流程控制</li>
</ol>
</li>
<li>Java API
<ol>
<li>字符串</li>
<li>集合</li>
</ol>
</li>
<li>Web
</li>
</ol>

图片

img 标签用来显示图片
src属性用于指定图片来源：
- 绝对路径, 例如：http://tmooc.cn/img/logo.png
- 相对路径：
  - 与当前网页在同一个目录下：直接写文件名
  - 当前网页同级目录里面：目录名/文件名
  - 上级目录 …/文件名
  - 混合上述情况
alt属性，没有照片时候显示的文字，很少用了
title属性，鼠标在图片上显示的文字
设置宽高
- width: 设置图片宽度
- height：设置图片的高度
- 单位：像素点/百分比
- 设置一个属性，另外一个按比例缩放。当前容器宽度
- 设置两个属性，图片被拉伸

<h1>显示照片</h1>
  <img alt="图片" src="http://cdn.tmooc.cn/bsfile//imgad///f2ad3cd50c47404b96dd7e7cc758f455.png">
  <h2>显示当前目录中的照片</h2>
  <img alt="" src="image.png">
  <h2>显示子目录中的照片</h2>
  <img alt="" src="img/qrcode.jpg">

在这里插入图片描述

<h1>显示照片</h1>
  <h2>显示上层目录中的照片</h2>
  <img alt="" src="../image.png">
  <h2>显示上层目录中子目录的照片</h2>
  <img alt="" src="../img/qrcode.jpg"> 
  <h2>设置宽度</h2>
  <img alt="" src="../img/qrcode.jpg" width="100"> 
  <img alt="" src="../img/qrcode.jpg" width="10%"> 
  <h2>同时设置宽高</h2>
  <img alt="" src="../img/qrcode.jpg" 
    width="100" height="50" >

a网页链接

在这里插入图片描述 - href 链接目标

绝对路径： http://tmooc.cn
如果是自己的网站，就使用相对路径 : table2.html
如果没有这个属性，显示纯文本效果
可以配合img，实现照片链接
target="_blank" 在新空白（blank）窗口中打开页面

 <h1>超链接</h1>
  <a href="hello.html">Hello World!</a>
  <a href="table2.html">Table Demo</a>
  <a href="img.html"><img title="点击看大图" 
    src="image.png" width="50"></a>
  <a href="img.html" target="_blank">
    <img title="新窗口中看大图" 
    src="image.png" width="50"></a>
  <a href="http://doc.canglaoshi.org" 
    target="_blank">打开文档</a>

网页内部锚点功能
在这里插入图片描述

 <h1>锚点演示</h1>
  <a href="#Java">Java文档</a>
  <a href="#Spring">Spring文档</a>
  <p> Hello </p>
   ... ...
  <p> Hello </p>
  <h2 id="Java">Java文档</h2>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
  <p> Hello Java </p>
    ... ...
  <p> Hello Java </p>
 
  <h2 id="Spring">Spring文档</h2>
  <a href="#">Top</a>
  <p> Hello Spring</p> 
    ... ...
  <p> Hello Spring </p>

表单

在这里插入图片描述

表单用于将用户数据发送到服务器
- 常见的表单：登录表单，注册表单 …
表单标签 form，一般都有form标签
文本框
密码框
按钮
单选按钮
同一组单选按钮，其name属性值要一样
多选按钮
同一组多选按钮，其name属性值要一样
下拉列表
多行文本
按钮/提交按钮

<h1>表单演示</h1>
  <form action="">
    <label>用户名：<input placeholder="手机号" type="text"></label><br>
    <label>密码：<input placeholder="6～20位" type="password"></label><br>
    <label>验证码：<input type="text"></label>
    <input type="button" value="发送验证码"><br>
    <label>记着用户名: <input type="checkbox"></label> <br>
    <label>爱好：</label>
      <label>电影<input type="checkbox" name="hobby"></label>
      <label>健身<input type="checkbox" name="hobby"></label>
      <label>骑行<input type="checkbox" name="hobby"></label>
      <label>跑步<input type="checkbox" name="hobby"></label><br>
    <label>性别:</label>
      <label>男：<input type="radio" name="gender"></label>
      <label>女：<input type="radio" name="gender"></label>
      <label>保密：<input type="radio" name="gender"></label><br>
    <label>登录时间:</label>
    <select>
      <option>每天早晨</option>
      <option>每天晚上</option>
      <option>后半夜</option>
      <option>凌晨</option>
    </select> <br>
    <label>个人简介</label><br>
    <textarea rows="5" cols="20"
     placeholder="说出你的心里话"></textarea>
    <input type="submit" value="保存">
  </form>

`<div>`和`<span>`标签

<div>和<span>标签并没有特别的意义，在设计网页时，通常用作其他网页元素或者文字的容器，可以使用CSS样式灵活地定义它们的位置，或者使用JavaScript来动态地修改其中的内容。

`<div>`

是分区或分节的意思。<div>标签是一个块级标签，该标签中的内容会独占一段，其基本语法为<div id="" class="" style="">div中的其他网页元素</div>和其他HTML标签一样，也可以为<div>标签指定id、class和style属性，<div>标签的这几个属性通常用于设置其样式。<div>标签中不仅可以包含文字、图像、音视频等HTML元素，也可以包含<div>，这样就形成了图层之间的嵌套，以实现复杂的网页布局设计。

`<span>`

<span>标签是行内标签（行内元素），<span></span>标签之间的内容不会单独占用一行，也就是说，标签的前后不会自动换行。通常用<span>标签来实现动态显示的效果。
<span>标签的基本语法格式如下：

<span id="" class="" style=""></span>

设计网页时，我们可以把一个标签的display的样式设置为none,实现隐藏，在需要显示的时候，再把display设置为inline,即可实现动态显示标签之间内容的效果。

标签：...,Java,标签,列表,HTML,网页,第二篇,Hello
来源： https://blog.csdn.net/sinat_38326464/article/details/120561280

HTML第二篇

列表

图片

a网页链接

表单

<div>和<span>标签

<div>

<span>

`<div>`和`<span>`标签

`<div>`

`<span>`