6月11号笔记

最新推荐文章于 2023-08-14 21:41:15 发布

Dashen__Daiwo

最新推荐文章于 2023-08-14 21:41:15 发布

阅读量148

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/Dashen__Daiwo/article/details/106695666

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇笔记介绍了HTML的基本结构和常用标签，包括段落、标题、换行、列表、文字居中、文字缩进、图片、超链接、表格、表单以及块级元素的使用，是Web前端开发的基础知识总结。

摘要由CSDN通过智能技术生成

6月11号
web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。

2.HTML结构:
标记放在 HTML 文件的开头，是一个形式上的标记；标记称为主体标记，网页所要显示的内容都放在这个标记内，它是 HTML 文件的重要所在；标记称为头标记，起的作用是放置关于此 HTML 文件的信息，如提供索引、定义 CSS 样式等；标记称为标题标记，起的作用是设定网页标题；
HTML文本排版标识:
段落标签:

换行标签:
标题标签:

~

文字居中标签: 文字段落缩进标签:

设置文字列表:文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来；
无序列表 ul 有序列表 ol
示例:

标签

段落标签这里面放需要的第一个段落,每放一个段落都需要这样的格式

如上所述放第二段

换行标签在所需要换行的每一个据此后面加上
这是一句话
这是第二行的一句话
标题标签 h1-h6 每一种都有着不同的风格

<<是这样>>

这里放标题文字居中标签将文字居中这里面放所需要文字并且把文字调整为居中文字段落缩进标签

缩进标签类似于前面空几格

正常的一个段落用于与上面的作为比较,未作任何缩进处理

HTML标记和HTML属性: 在大多数 HTML 标记中都可以对属性控制，属性的作用是帮助 HTML 标记进一步控制 HTML 文件的内容，比如内容的对齐方式（如本例），文字的大小、字体、颜色，网页的背景样式，图片的插入，等等。其基本语法为：用 align 属性控制段落的水平位置用 bgcolor 属性设置背景颜色示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字特殊样式</title>
</head>
<body>

默认文字样式<br/>
<b>文字以粗体方式显示</b><br/>
<i>文字以斜体方式显示</i><br/>
<u>文字以加下划线方式显示</u><br/>
<s>文字以加下删除方式显示</s><br/>
<big>文字以放大方式显示</big><br/>
<small>文字以缩小方式显示</small><br/>
<strong>文字以加强强调方式显示</strong><br/>
<em>文字以强调方式显示</em><br/>
<address>126.com</address><br/>
<code>abc</code><br/>
</body>
</html>

3.网页图片认识大小设置
示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片尺寸</title>
</head>
<body>
<img width="150" height="200" src="liu.jpg"/>
</body>
</html>

相对路径 VS 绝对路径:
示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对路径VS绝对路径</title>
</head>
<body>
<img src="liu.jpg"/>
<img src="../yan.jpg">

<img src="https://p1.ssl.qhimg.com/t0151320b1d0fc50be8.png"/>
<img src="G://liu.jpg"/>
</body>
</html>

用 alt 属性为图像设置替换文
示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用alt属性为图像设置替换文本</title>
</head>
<body>
<img width="150" height="200" alt="这是刘亦菲" src="liu.jpg"/>
</body>
</html>

用 title 属性为图像设置标题
示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用title属性为图片设置标题</title>
</head>
<body>
<img width="150" height="200" title="这是刘亦菲" alt="这是刘亦菲" src="liu.jpg"/>
</body>
</html>

4.设置基本文字超链接,图片的超链接,以新窗口显示链接页面,电子邮件链接
示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片超链接</title>
</head>
<body>
<a href="http://www.java1234.com"><img src="java1234.jpg"></a>
</body>
</html>

框架之间的链接:框架是一种常用的网页布局工具。它的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。
用 cols 属性将窗口分为左右两部分,2 用 rows 属性将窗口分为上中下三部分,用 src 属性在框架中插入网页,框架之间嵌套和建立链接.
示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用src属性在框架中插入网页</title>
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frameset rows="50%,*">
<frame src="b.html">
<frame src="c.html">
<frameset>
</frameset>
</html>

5.HTML中的表格
：表格的基本结构
合并单元格: 用 colspan 属性左右合并单元格,用 rowspan 属性上下合并单元格.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用 rowspan 属性上下合并单元格</title>
</head>
<body>
<table border="1">
<tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
</tr>
<tr>//tr表示行 td表示列  border="1"给表格加边框  th加表头    一行一二列合并  二行二列三行二列合并
   <td colspan="2">1-1-2</td>
   <td>1-3</td>
   <td>1-4</td>
</tr>
<tr>
   <td>2-1</td>
   <td rowspan="2">3-2-2</td>
   <td>2-3</td>
   <td>2-4</td>
</tr>
<tr>
   <td>3-1</td>
   <td>3-3</td>
   <td>3-4</td>
</tr>
</table>
</body>
</html>

用 align 属性设置对齐方式 ,用 bgcolor 属性设置表格背景色和边框颜色,用 cellpadding 属性和 cellspacing 属性设定边距(cellspadding 属性设定表格单元格中的内容距离格线的距离, cellspacing 属性设定表格相邻单元格边线之间的距离。)
示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用 cellpadding 属性和 cellspacing 属性设定边距</title>
</head>
<body>设置边距 内容到边框距离  设置单元格距离
<table border="1" width="400" bgcolor="red" cellpadding="20px" cellspacing="20px">
<tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
</tr>
<tr align="center">设置居中
   <td colspan="2">1-1-2</td>
   <td>1-3</td>
   <td>1-4</td>
</tr>
<tr>
   <td>2-1</td>设置居中 设置某一列背景颜色
   <td rowspan="2" align="center" bgcolor="green" >3-2-2</td>
   <td>2-3</td>
   <td>2-4</td>
</tr>
<tr bgcolor="yellow">设置某一行背景颜色
   <td>3-1</td>
   <td>3-3</td>
   <td>3-4</td>
</tr>
</table>
</body>
</html>

6.HTML表单
Form 表单:表单是一个包含表单元素的区域。主要作用就是向服务器提交数据。
文本表单包括:文本框 ,密码框 ,文本域
示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本域</title>
</head>
<body>
<from action="a.jsp" method="get">
<table>
<tr>
  <td>
     用户名:
     </td>
  <td>
  <input type="text" id="userName" name="userName"/>
  </td>
</tr>
<tr>
  <td>
      密    码:
  </td>
  <td>
  <input type="password" id="password" name="pwd"/>
  </td>
</tr>
<tr>
<td colspan="2">
       <textarea id="desc" name="desc" row="10" cols="30"></textarea>
</td>
</tr>
</table>
<br/>
</from>
</body>
</html>

按钮:普通按钮,提交按钮.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
</head>
<body>
<from action="a.jsp" method="get">
<table>
<tr>
  <td>
     用户名:
     </td>
  <td>
  <input type="text" id="userName" name="userName"/>
  </td>
</tr>
<tr>
  <td>
      密    码:
  </td>
  <td>
  <input type="password" id="password" name="pwd"/>
  </td>
  <tr/>
  <tr>
  <td>
    <input type="submit" value="登录"/>
  </td>
  <td>
    <input type="Button" value="重置"/>
  </td>
</tr>
</table>
<br/>
</from>
</body>
</html>

文件上传
示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<input type="file" id="f" name="f"/>
</body>
</html>

7.HTML中的块:用于网页中内容的填充.
DIV:HTML:元素是块级元素，它是可用于组合其他 HTML 元素的容器。
SPAN:HTML 元素是内联元素，可用作文本的容器。
示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV块元素</title>
</head>
<body> id 加个边框 红色的
<div id="d1" style="border: 1px red solid">
  <h1>是这样</h1>
  <h2>是这样</h2>
  <p>是这样</p>
</div>>
<div id="d2" style="border: 1px yellow solid">
  <h1>哦，是这样</h1>
  <h2>是这样的呢</h2>
  <p>是这样的呢>>
</body>
</html>

1.什么是Web
2设置按钮：

s_y button{
    width:78px;
    height:41px
    background:none;
    border:0;
    cursor:pointer;
}

Dashen__Daiwo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

6月11号笔记

~

文字居中标签: 文字段落缩进标签: 设置文字列表:文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来； 无序列表 ul 有序列表 ol 示例:

<<是这样>>

<<是这样>>

<<是这样>>

<<是这样>>

<<是这样>>

<<是这样>>

文字居中标签: 文字段落缩进标签:

设置文字列表:文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来；
无序列表 ul 有序列表 ol
示例: