HTML保姆级教程——赠予我的粉头哈哈哈哈哈哈哈哈哈哈

网页设计

总流程——

第一部分：HTML/CSS

网页的组成部分：（网页）页面是由内容（结构）、表现、行为三部分组成的！

内容（结构），指的是我们在页面中能看到的数据。一般内容我们一般使用HTML技术来展现.

表现，指的是这些内容在页面上的展示形式。比如说，颜色，布局和大小等等。我们一般使用CSS技术来实现.

行为，指的是页面中元素与输入设备交互的动态响应。一般使用Javascript来实现.

HTML简介

定义：Hyper Text Markup Language (超文本标记语言)

HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身也是一种文本文件！通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，图片如何显示以及画面如何安排等）

HTML文件的创建——

创建一个Web工程（静态）

在工程下创建HTML页面

（点击run-...）

注：Java文件是需要先编译再由Java

选择浏览器（谷歌）显示网页

HTML文件的书写规范（基本框架）——

<html> 表示整个html页面的开始

<head> 头信息

<title>标题</title> 标题

</head>

<body> 是页面的主体内容

页面主体内容（☆）

</body>

</html> 表示整个html页面的结束

HTML的代码注释：（必须英文！！！）这是html注释，可以在页面右键查看源代码中看到.

HTML的标签介绍——

标签的格式： <标签名>封装的数据</标签名>
标签名大小写不敏感
标签拥有自己的属性

分为两种

I.基本属性例：bgcolor=”red” 可以修改简单的样式效果

II.事件属性例：οnclick=”alert(‘你好！’)；” 可以直接设置事件响应后的代码

标签又分为，单标签和双标签

单标签格式为： <标签名 /> 常见的有 br / 换行 hr / 水平线
双标签格式为： <标签名>...封装的数据...</标签名> 常见的有<p>...</p> 表示一个段落
常见的有<p>...</p> 表示一个段落

标签的语法（☆）——

①标签必须正常闭合（关闭）

例：正确的写法： <div> 你好！</div>

错误的写法： <div>你好！

②属性必须有值，属性值必须加引号

例：<font color=”blue”>你好！</font>（√）

<font color=blue>你好！</font> （×）

<font color>你好！</font> （×）

③注释不能嵌套

正确写法——<!-- 注释内容 -- >

错误写法——-->

常用标签介绍

Font： font标签是字体标签，它可以用来修改文本的字体【face】，颜色【color】，大小（尺寸）【size】

实例：<font color=”red”face=”黑体”size=”6”>杀戮！</font> <===>

特殊字符：一般用于把标签换成字符输出（如使得<br />标签不再具有换行功能而是正常的字符）

常用的有： < &lt； （＜） > &gt；（＞）&quot；（“”）

注：可以在<p></p>内嵌套这些双标签；分号包含在上述特殊字符内

最为特殊的字符即为“空格”，对于空格的处理，不能单纯的打下空格就有用处，因为系统会自动地缩减空格个数，即使打了是个十个空格，系统也只会默认输入一个空格！

故需要特殊字符来实现多处空格的效果.

空格的特殊字符为 &nbsp；

标题（body内）标签——

标题只有六种字体的大小，分别为h1、h2、h3、h4、h5、h6（依次递减），形式为<hi> 标题内容 </hi>（i=1,2,3,4,5,6）

{应该将最重要的主标题设为<h1>，其次为<h2>，以此类推}

实例：

对齐属性为align属性

顾名思义，left代表左对齐（默认），center表示居中，right表示右对齐

超链接的设置（☆☆☆☆）

普通的超链接
标签运用的是 <a href=”网址”>文本文字（或img标签下的图片）</a>

例：<a href=”www.baidu.com”>百度</a>
超链接使得新建一个全新的页面
例：<a href=”www.baidu.com” target=”_self”>百度</a>（不跳转，该网页直接刷新到超链接所在的网站，与①相同）

<a href=”www.baidu.com” target=”_blank”>百度</a>（该页面保存不动，跳转到一个新建的超链接页面）

无序列表和有序列表

无序（有序）列表的标准格式：

<ul(ol)>

<li></li>

<li></li>

...

<li></li>

</ul(/ol)>

实例：

无序列表（●）为

有序列表（阿拉伯数字）为

Img标签

Img标签主要用于在html标签上显示图片！！！

毋庸置疑，一个网页占比空间最多的元素一定是图片

标签设置： img+tab ==>(自动生成) <img src=”” alt=””>

对于img后的属性，有下述几种：

src（☆☆）属性表示图片路径（地址和名称）

alt属性表示图像的替代文本

（注：当图片无法显示时的文本）

width属性表示图像的宽度

height属性表示图像的高度

单位均为px（像素）

title用于鼠标悬停在图片上给予提示（小标题）

Src属性的图片路径——

分为①绝对路径②相对路径③网络路径
绝对路径
标准格式为 src=”硬盘名（C\D\E...）：/.../.../图片名.图片格式”（☆）

实例：

相对途径：

子级关系（图片位于Vscode的文件的下一级）： /

父级关系（图片位于Vscode的文件的上一级）： ../

同级关系（图片位于Vscode的文件的下一级）： ./（☆推荐）

同级关系

父级关系

子级关系同理

标准格式为 ./同级的总文件名/（处于下一级的）图片名.图片格式

网络途径

输入的内容为网络服务器的网址

例：src=”http://www.baidu.com”

（Table）表格标签（☆☆☆☆）

顾名思义，表格是由单元格、行和列组成的.

对于单元格，它的特点是同行等高和同列等宽.

表格标签分为——
<table>表格标签；
<tr>行；
<td>列（单元格）；

故基本格式大致为：

<table>

<tr>（第一行）

......

</tr>

<tr>（第二行）

......

</tr>

...

</table>

（☆☆）快速生成方法：

table>tr*i(i=1,2,3...)>td{...}

对于表格，我们依旧需要设置各属性来设计其外观——

（应在table标签内，加在table后面）

border：设置表格的边框（通常只需<table border=”1”>即可）
width：设置表格的宽度
height：设置表格的高度

单元格合并（☆☆）

水平合并：colspan

垂直合并：rowspan

如何使用二者？！

在所需要合并的第一个单元格填入属性（colspan或rowspan），再将接下来在代码中被合并的单元格设置删去即可！

其中，单元格属性值为合并的单元格数量；若同时进行两种合并，应该在一个<td>后面输入！

实例：

其原始应当生成的表格为

单元格1	单元格2	单元格3	单元格4	单元格5	单元格6
单元格7	单元格8	单元格9	单元格10	单元格11	单元格12
单元格13	单元格14	单元格15	单元格16	单元格17	单元格18

而通过加工

最终得出的答案为

Form表单

表单在Web网页中用来给用户填写信息，从而能采用户信息，实现使网页与用户具有交互的功能；

所有用户输入内容的地方都用表单来写，如登录注册、搜索框等等，如下图.

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框和按钮就叫做控件；而表单就是容器，它能够容纳各种各样的控件

表单元素——

表单标签

双标签（<form></form>）（下列标签应嵌套于此）

表单域

单标签<input>或者<input type=”text”> 表示输入文本，会显示出相应的输入框

表单按钮

例：<button>提交（任意文本）</button> 【双标签】 <==> <input type=”submit”>【单标签】

现在要求设计一个登陆框：

文本框

由上可知，文本域一般是通过<input type=”text”>标签来设定，当用户要在表单中输入字母、数字等内容时，就会用到文本域

例：

密码框

一般通过<input type=”password”>（单标签）

提交按钮

（*）当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

通常通过标签<input type=”submit” value=”XXX”>实现！

注：由上面表单按钮的相关内容可知，“ input type=”submit” ”的显示为“提交”；而value就是对于“提交”的一个替代文本

实例：

内联元素和块级元素

块级元素	内联（行内）元素
块元素会在页面中独占一行（自上向下垂直排列）	行内元素不会独占页面中的一行，只占自身的大小
能够设置width，height属性	设置width，height属性无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素可以包含内联元素，不包含块级元素

HTML（5）新增标签（☆☆☆）

序言：HTML5是HTML最新的修订版本；在其出现之前，我们一般采用的是“DIV+CSS”来布局我们的页面。但是，这样的布局方式不仅使我们的文档结构不够鲜明清晰，而且很大程度上不利于搜索引擎爬虫对我们的页面的爬取。为了解决上述缺点，HTML5新增了许多新的语义化标签

div容器元素，也是页面中见到的最多的元素

（☆☆）div的实现

原始写法：

而如今通过新增标签，我们能够进行极大的优化.

<header></header> 头部
<nav></nav> 导航
<section></section> 定义文档
<aside></aside> 侧边栏
<footer></footer> 脚部
<article></article> 代表一个独立且完整的相关内容块，例如一篇完整的论坛帖子，一遍博客文章，一个用户评论等

对于上述的版块设计，若采用原始的DIV元素，则：

而对于新增的HTML5，则可用下图来代替：

HTML保姆级教程——赠予我的粉头哈哈哈哈哈哈哈哈哈哈相关推荐

macOS使用C/C++万能头文件保姆级教程
macOS使用C/C++万能头文件保姆级教程 Windows上面用万能头文件为我们省去了不少记头文件的麻烦,切换到macOS上来发现C/C++环境中没有自带这个头文件.不行,今天无论如何都要用到万能头 ...
自媒体人平台运营保姆级教程！速看！
自媒体人平台运营保姆级教程!速看! 一.三大媒体发布平台分析微博:微博是指一种基于用户关系信息分享.传播以及获取的通过关注机制分享简短实时信息的广播式的社交媒体.网络平台,允许用户通过Web.Wap ...
满满干货！红书运营保姆级教程
**满满干货!红书运营保姆级教程** 1. 同类三种媒体发布平台的优劣势今日头条: 今日头条的用户基础雄厚,活跃的用户比较多,所能带来的流量是比较大的,这也就导致了今日头条的推荐量雄厚,是不可多得的 ...
判断是不是链接正则_Python 正则表达式保姆级教程，小学生都看得懂！！
~点击蓝字关注,获取更多资源~ 0 前言上一篇文章,2020,还不会正则???,和小伙伴们一起学习了 Python 中的正则表达式,读完之后,总感觉少了点什么东西,无法尽兴?就好像爱你们的心少了 ...
参考文献顺序不对_Endnote插入参考文献的保姆级教程
作者:白鹤(baihe@iphy.ac.cn) 审核:蔡建旺各位同学看过来,最近由于疫情严重,小伙伴们都憋在家里写论文.这倒不是什么难事,最烦人的是参考文献的插入.一篇博士论文下来,参考论文不说30 ...
SpringBoot 配置 generator代码生成+knife4j接口文档（2种模板设置、逻辑删除、字段填充含代码粘贴可用）保姆级教程（注意事项+建表SQL+代码生成类封装+测试类）
保姆级教程,逻辑删除及字段自动填充设置,特别要说明的是本次用的是MySQL数据库,如果使用Oracle数据库是,数据库配置需要改变,数据库表一定要大写,否则无法生成代码. 数据库表 CREATE TA ...
【NLP保姆级教程】手把手带你RNN文本分类(附代码)
写在前面这是NLP保姆级教程的第二篇----基于RNN的文本分类实现(Text RNN) 参考的的论文是来自2016年复旦大学IJCAI上的发表的关于循环神经网络在多任务文本分类上的应用:Recur ...
图片适应窗口_毕业论文排版保姆级教程——图片和公式排版
[小技巧]Origin作图过程中如何让图看起来更生动 2020-05-30 [小技巧]简单设置让你origin导出的图片不在有大白边 2020-05-29 [干货放送]萤火科研资源免费赠送第一期--必 ...
保姆级教程 CSS 知识点梳理大全，超详细！！！
保姆级教程 CSS 知识点梳理大全,超详细!!! ✴️大家好,我是王同学,好久不见,趁着假期王同学把CSS 知识点梳理了一遍 ✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了 ✴️星光不负赶路人 ...

HTML保姆级教程——赠予我的粉头哈哈哈哈哈哈哈哈哈哈

HTML保姆级教程——赠予我的粉头哈哈哈哈哈哈哈哈哈哈相关推荐

最新文章

热门文章