Web第一季基础

仰望璀璨星空

已于 2024-05-07 14:33:46 修改

阅读量909

点赞数 18

分类专栏： Web 文章标签： Web

于 2024-05-07 14:33:27 首次发布

本文链接：https://blog.csdn.net/asdwzx142/article/details/104184892

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

1-为什么学习Web前端

Web前端包括 HTML/CSS/JS

静态网页/动态网页

不是编程

JavaEE后端

基本了解

Web前端工程师

JavaEE工程师

PHP Web工程师

Python Web工程师

.net Web工程师

Web前端Html/Css/Js->Web前端工程师

以了解Java基础->JavaEE/Web

2-什么是HTML

超文本标记语言

标记语言不是编程语言

超文本页面可以包含图片，视频，音乐等

HTML/XHTML /HTML5

可以使用记事本/notepad++/sublime/dreamweaver

3-安装工具和学习方法

4-创建第一个网页文件

5-网页的基本结构（标签的基本语法）

<html>
<head>
    <title>我是标题</title>
</head>
<body>
Hello world!
1.html语法不区分大小写
2.又开始，必须有结束
3.单个标记
<hr/>
</body>
</html>

body内容全部显示在一行上了

<hr/>下划线

6-设置文档类型和网页编码

添加文档类型

<!DOCTYPE html> 说明所用语法，编译类型

说明文档编码模式/utf-8,gbk,gb2321

注释：. 右键快捷键

<!DOCTYPE html>

<html>
<head>
    <title>我是标题</title>
    <meta http-equiv="Content-Type" content="text/html;charse=utf-8"/>
</head>
<body>
Hello world!
1.html语法不区分大小写
2.又开始，必须有结束
3.单个标记
<hr/>
</body>
</html>

7-段落标签和标题标签

其内文本内容无任何格式，空格没有作用

换行标签：

标题：<h1></h1>

段落：

<!DOCTYPE html>

<html>
<head>
    <title>我是标题</title>
    <meta http-equiv="Content-Type" content="text/html;charse=utf-8"/>
</head>
<body>
Hello world!<br/>
1.html语法不区分大小写<br/>
2.又开始，必须有结束<br/>
3.单个标记
<hr/>
<!--加粗，独占一行 -->
<h1>《我的奋斗》</h1>
<h2>《我的奋斗》</h2>
<h3>《我的奋斗》</h3>
<h4>《我的奋斗》</h4>
<h5>《我的奋斗》</h5>
大家好HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1] 
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。 [1] 
</body>
</html>

8-标签的属性和段落的对齐属性

百度搜索 W3C school 搜索段落不需要记住标签

属性名，属性值

align：对齐

两端对齐

9-预格式标签和字体标签

预格式标签:<pre></pre> 编辑器是什么样的网页就会呈现什么样

字体标签：大家好 size:1～7 字体在记事本选择字体查看电脑有什么字体

10-修饰标签

加粗： 我

加粗：我

倾斜： hi

上标：22=4

下标：Hi[1]

11-html中的特殊符号

工具测试

W3School HTML教程

HTML实例可以直接测试

如何显示标签 需要使用实体名称：&lt； p &gt；

显示空格：&nbsp；

<html>
<head>
    <title>特殊符号</title>
</head>
<body>
&nbsp;&nbsp;段落&lt;p&gt;
</body>
</html>

12-显示图片

显示图片标签：<img/>

这个是我的课程<img src="Img/01.jpg" align="top/middle/bottom" width="200px" height="50px/50%"

alt="这个图片是xx"/>。

对齐方式与文字默认底部. 50%相对于网页变化

alt:如果无法显示图片就会用文本代替

13-图片路径中的相对路径和绝对路径

绝对路径:项目都不可以移动

<!DOCTYPE html>
<html>
<head>  
    <title>绝对路径</title>
    <meta http-equiv="Content-Type" content="text/html;character=utf-8"/>
</head>

<body>
This is my course <img src="E:\WebStudent\Java\FirstClass\Img\01.jpg" align="bottom" width="20%" alt="FirstClass"/>

</body>
</html>

相对路径：该网页所在位置

../代表上一级

<!DOCTYPE html>
<html>
<head>  
    <title>绝对路径</title>
    <meta http-equiv="Content-Type" content="text/html;character=utf-8"/>
</head>

<body>
This is my first course <img src="Img\01.jpg" align="bottom" width="20%" alt="FirstClass"/>

This is my second course <img src="..\02.jpg" align="bottom" width="20%" alt="SecondClass"/>

</body>
</html>

14-无序列表和有序列表

无序列表：<ul type="disc/circle/square"> <li></li><li></li><ul>

有序列表：<ol start="10" type="a"> <li></li></ol>

罗马数字 type="I" 大写i 小写罗马数字小写i

15-自定义列表

16-超级链接

可以链接视频，音乐，其他网页

进入到其他网页

进入到本地网页

<a href="02段落和标题.html">进入段落那个网页</a>

空链接

文字图片链接：

<a href="http://www.sikiedu.com/my/course/203">beginGo<img src="Img/01.jpg"/></a>

17-超级链接的属性

target="_blank" 打开一个新标签页面

target="_self" 将自身页面重载

title="XXX" 鼠标触碰到显示文字

name="baidu" 锚点命名

<a href="02段落和标题.html" target="_self">进入到段落那个网页</a>

<html>
...

<body>
<a href="#chapter1">第一章</a> 
<a href="#chapter2">第二章</a> 
<a href="#chapter3">第三章</a>
<a href="#" name="chapter1"><h1>第一章</h1></a>
XXX

<!-- 隐形锚点 -->
<a href="#" name="chapter2"></a><h2>第二章</h2>. 
YYY

</body>
</html>

18-超级链接的其他内容

<html>
...

<body>
<a href="#chapter1">第一章</a> 
<a href="#chapter2">第二章</a> 
<a href="#chapter3">第三章</a>
<a href="#" name="chapter1"><h1>第一章</h1></a>
XXX

<!-- 隐形锚点 -->
<a href="#" name="chapter2"></a><h2>第二章</h2>. 
YYY


<!-- 超链接实现跳转页面加定位 -->
<a href="doupo.html#chapter2">《斗破苍穹》第二章</a><br/>

<a href="Img.zip">下载图片</a>.      <!--下载文件-->
<a href="mailto:2222222@qq.com">联系我们</a>  <!-- 发送图片-->

</body>
</html>

第二章：表格


<DOCTYPE html>
<html>
<head>
    <title>XX</title>
</head>

<body>
<table border="10px">

<tr>
    <td>XXX</td>
    <td>XXX</td>
    <td>XXX</td>
</tr>

<tr>
    <td>XXX</td>
    <td>XXX</td>
    <td>XXX</td>
</tr>
</table>
</body>
</html>

1-创建表格


<DOCTYPE html>
<html>
<head>
    <title>XX</title>
</head>

<body>
<table border="10px" width="500px" height="400px" align="center" bgcolor="red" cellspacing="10px" cellpadding="10px">
<!-- align="right" "left" cgcolor="#f0f0f0"-->

<tr>
    <td>XXX</td>
    <td>XXX</td>
    <td>XXX</td>
</tr>

<tr>
    <td>XXX</td>
    <td>XXX</td>
    <td>XXX</td>
</tr>
</table>
</body>
</html>

2-表格常用属性


<DOCTYPE html>
<html>
<head>
    <title>XX</title>
</head>

<body>
<table border="10px" width="500px" height="400px" align="center" bgcolor="red" cellspacing="10px" cellpadding="10px">
<!-- align="right" "left" cgcolor="#f0f0f0"-->

<tr height="200px" align="right" valign="bottom" bgcolor="#FFDAB9">
    <td wight="200px" bgcolor="#FFC0CB" align="left" >XXX</td>
    <td>XXX</td>
    <td>XXX</td>
</tr>

<tr>
    <td>XXX</td>
    <td>XXX</td>
    <td>XXX</td>
</tr>
</table>
</body>
</html>

3-表格中行和列的常用属性

4-表格中多行多列合并


<DOCTYPE html>
<html>
<head>
    <title>XX</title>
</head>

<body>

<!--col=column colspan  -->
<table border="1" width="500px" align="center" height="200px">
<tr>
    <td colspan="2">XX</td><!--删除后面一个-->  <td>XX</td> <td>XX</td> <td>XX</td> 
</tr>
<tr>
    <td rowspan="2">XX</td> <td>XX</td> <td>XX</td> <td>XX</td> <td>XX</td> 
</tr>
<tr>
     <!--删除-->  <td>XX</td> <td>XX</td> <td colspan="2" rowspan="2">XX</td> <td>XX</td> 
</tr>
<tr>
    <td>XX</td> <td>XX</td> <td>XX</td> 
</tr>

</table>

</body>
</html>

5-销售表格的制作

6-表格的嵌套和高宽的百分比设置方法

7-表格的表头和标题

8-表格布局实战一整体布局控制

9-表格布局实战二控制页头部和页面尾部

10-表格布局实战三控制课程介绍的布局

第三章：表单

1-什么是表单

2-文本和密码输入框

3-文本输入控件的一些属性

4-单选按钮

5-多选按钮

6-提交按钮、重置按钮和普通按钮

7-图片提交按钮和隐藏控件

8-下拉列表

9-文本域完成大段文本的输入

10-表单属性

11-文件上传

第4章：框架Frame

1-使用框架切分网页

2-框架的多种切分方法

3-使用框架实现后台管理系统的布局

4-总结

108

仰望璀璨星空

关注

18
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
Web第一季基础

HTML1-为什么学习Web前端Web前端包括 HTML/CSS/JS静态网页/动态网页不是编程JavaEE后端基本了解Web前端工程师JavaEE工程师PHP Web工程师Python Web工程师.net Web工程师Web前端Html/Css/Js->Web前端工程师以了解Java基础->JavaEE/Web2-...
复制链接

扫一扫

专栏目录