web开发之HTML入门

Web学习

HTML ——用于表示你的网页内容是应该被理解为段落、列表、头部、链接、图像、多媒体播放器、表单或是其他众多可用的元素之一亦或是你定义的新元素。

安装文本编辑器

有记事本,TextEdit
web开发选用IDEA或者vscode

安装网页浏览器

用于测试

安装web测试服务器

如何设置一个本地测试服务器
点次跳转设置一个本地测试服务器文档

设计网站外观

做出计划

• 网站的主题是什么？
• 基于所选主题要展示哪些信息？
• 网站采用怎样的外观？用高阶术语说就是，选什么背景色？什么字体（正式的还卡通的，粗体还是细体）？

绘制草图

选定内容

• 文本
• 主题颜色
• 图片
• 字体

网站使用的结构

最基本、最常见的结构是：一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹：

• index.html ：这个文件一般包含主页内容，即用户第一次访问站点时看到的文本和图像。使用文本编辑器在 test-site 文件夹中新建 index.html。
• images 文件夹 ：这个文件夹包含站点中的所有图像。在 test-site 文件夹中新建 images 文件夹。
• styles 文件夹 ：这个文件夹包含站点所需样式表（比如，设置文本颜色和背景颜色）。在 test-site 文件夹中新建一个 styles 文件夹。
• scripts 文件夹 ：这个文件夹包含提供站点交互功能的 JavaScript 代码（比如读取数据的按钮）。在 test-site 文件夹中新建一个 scripts 文件夹。

HTML(超文本标记语言)

HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

元素

• 段落（paragraph）

<p>我的猫非常脾气暴躁</p>

• 元素属性
  
  class 是属性名称，editor-note 是属性的值 。
• 嵌套元素
  将一个元素置于其他元素之中 —— 称作嵌套。

<p>我的猫咪脾气<strong>暴躁</strong>:)</p>

本例中“暴躁”二字就被突出显示

• 空元素
  不包含任何内容的元素称为空元素。比如<img>元素：

<img src="images/firefox-icon.png" alt="测试图片">

图像

<img>元素
src:图片地址

相对地址(推荐使用)…/是上一级目录
绝对地址 从盘符下开始的

<img src="images/firefox-icon.png" alt="测试图片">

该元素还包括一个替换文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示
title:表示鼠标悬停显示文字

<img src="../resources/image/9u.jpg" alt="篮球夕阳" title="坚持你的梦想">

标题（Heading）

标题元素可用于指定内容的标题和子标题。

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

列表（List）

Web 上的许多内容都是列表，HTML 有一些特别的列表元素。

• 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 <ul> 元素包围。

<p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的</p>

<ul>
  <li>技术人员</li>
  <li>思考者</li>
  <li>建造者</li>
</ul>

<p>我们致力于……</p>

• 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个 <ol> 元素包围。

<ol>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
    <li>go</li>
</ol>

• 自定义列表

<dl>
    <dt>编程语言</dt>

    <dd>java</dd>
    <dd>python</dd>
    <dd>c++</dd>
    <dd>go</dd>
</dl>

链接

1. 选择文本（例：菜鸟教程）
2. 将文本包含在<a>中

<a>菜鸟教程</a>

3.为<a>元素添加一个href属性

<a href=" ">菜鸟教程</a>

4.把属性的值设置为所需网址

<a href="https://www.runoob.com/html/html-tutorial.html">菜鸟教程</a>

Tips: 将“菜鸟教程”换成img部分则可以实现点击图片实现跳转

href:表示要跳转到哪个页面去

target:表示窗口在哪里打开

     _blank:表示在新标签页打开

      _self:表示在自己的网页中打开

<a href="https://www.csdn.net/" target="_blank">点击进入CSDN</a>

注释

快捷键ctrl+/

<!–注释 -->

<!-- DOCTYPE 告诉浏览器我们要使用的规范,这里的是html规范，默认html规范–>

特殊符号

  空格
>大于
<小于

表格

表格(table)

行：tr
列：td
border:加边框
colspan:跨列
rowspan:跨行

<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">阿坤</td>
        <td>语文</td>
        <td>60</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>89</td>
    </tr>

媒体元素

音频和视频

src:资源路径
controls：控制条
autoplay:设置自动播放的

<video src="../resources/video/果果.mp4" controls autoplay width="300" height="500"></video>

<audio src="../resources/audio/风起词%20-%20Chance%20(纯音治愈版).mp3" controls ></audio>

页面结构分析

header:标记头部区域内容
footer:标记脚部区域内容
nav:导航类辅助内容
section:web页面中的一块独立区域

表单(*)

表单form (所有的表单元素都需要有name)

注册登录

action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:get,post 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全
    post方式提交：比较安全，可以传输大文件

<form action="媒体元素.html" method="post">
    <!--  文本输入框input type="text"  -->
    <p>用户名:<input type="text" name="username"></p>
    <!--  密码输入框input type="password"  -->
    <p>密码:<input type="password" name="pwd"></p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

表单元素格式 （请看img）

单选框

input type="radio"
value:单选框的值
name:表示组，组不一样则可以同时选择

<p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

多选框

input type="checkbox"

<p>爱好：
        <input type="checkbox" value="game" name="hobby">玩游戏
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="sleep" name="hobby">睡觉
    </p>

按钮

input type="button" 普通按钮
input type="image"  图像按钮
input type="submit" 提交按钮
input type="reset"  重置按钮

<p>按钮：
        <input type="button" value="点击" name="bt1">
        <input type="image" src="../resources/image/9u.jpg">
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

下拉框

select name="列表名称"
selected:默认选择该项

<p>国家：
    <select name="列表名称" >
        <option value="China">中国</option>
        <option value="USA">美国</option>
        <option value="France">法国</option>
        <option value="India">印度</option>
    </select>
    </p>

文本域

cols="50" rows="10" 列跟行

<p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容aaaaaaaaccccccccc</textarea>
    </p>

文件域

input type="file" name="files"

 <p>
        <input type="file" name="files">
</p>

简单验证

input type="email" name="email" 邮箱验证
input type="url" name="url"   URL验证
input type="number" name="num" max="50" min="0" step="1" 数字验证

<p>邮箱：
        <input type="email" name="email">
    </p>
    <p>URL:
        <input type="url" name="url">
    </p>
    <p>商品数量：
        <input type="number" name="num" max="50" min="0" step="1">
</p>

滑块

input type="range" name="voice"  

<p>音量:
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>

搜索框

input type="search" name="search"

<p>搜索：
        <input type="search" name="search">
    </p>

增强鼠标可用性

点击文本框前的文字也会锁定到框内

 <p>
        <label for="sky">点我试试</label>
        <input type="text" id="sky">
    </p>

自定义邮箱

input type="text" name="diyemail" pattern="" 去搜索需要的正则表达式

 <p>自定义邮箱:
        <input type="text" name="diyemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

                                                                             ©果力成