• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

01 HTML 和 CSS

开发技术 开发技术 3小时前 1次浏览

HTML 和 CSS

1.1 B/S 软件的结构

01 HTML 和 CSS

2.1 前端的开发流程

01 HTML 和 CSS

3.1 网页的组成部分

页面内容由三部分内容组成!
分别是内容(结构)、表现、行为。
内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容,我们使用html技术来展示
表现,指的是这些内容在页面上的展示形式。比如说。布局,颜色,大小等等。一般使用CSS 技术实现
行为,指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。

4.1 HTML简介

Hyper Text Markup Language (超文本标记语言) 简写:HTML
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,
通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)
注:Java 文件是需要先编译,再由 java 虚拟机跑起来。但 HTML 文件它不需要编译,直接由浏览器进行解析执行。

5.1 HTML 文件的书写规范

01 HTML 和 CSS
01 HTML 和 CSS

6.1 HTML标签介绍

1.标签的格式: <标签名>封装的数据 </ 标签名>
2.标签名大小写不敏感。
3.标签拥有自己的属性。
i. 分为基本属性: bgcolor=”red” 可以修改简单的样式效果
ii. 事件属性: o nclick=”alert(‘你好!’);” 可以直接设置事件响应后的代码。
4.标签又分为,单标签和双标签。
i. 单标签格式: <标签名 /> br 换行 hr 水平线
ii. 双标签格式: <标签名> …封装的数据…
01 HTML 和 CSS

标签的语法:
语法上错误 但是在浏览器上显示正确,由于浏览器会修改部分错误

<body>

	<!-- ①标签不能交叉嵌套 -->
	正确:<div><span>早安,尚硅谷</span></div>
	错误:<div><span>早安,尚硅谷</div></span>
	<hr />

	<!-- ②标签必须正确关闭 -->
	<!-- i.有文本内容的标签: -->
	正确:<div>早安,尚硅谷</div>
	错误:<div>早安,尚硅谷
	<hr />
	
	<!-- ii.没有文本内容的标签: -->
	正确:<br />
	错误:<br>
	<hr />
	
	<!-- ③属性必须有值,属性值必须加引号 -->
	正确:<font color="blue">早安,尚硅谷</font>
	错误:<font color=blue>早安,尚硅谷</font>
	错误:<font color>早安,尚硅谷</font>
	<hr />
		
	<!-- ④注释不能嵌套 -->
	正确:<!-- 注释内容 --> <br/>
	错误:<!-- 注释内容 <!-- 注释内容 -->-->
	<hr />
</body>

7.1 常用标签介绍

文档:w3cschool.CHM

7.1.1 font 字体标签

需求 1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。

<body>
	
	<!-- 字体标签
	需求 1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。

	font标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
		color属性修改颜色
		face属性修改字体
		size属性修改文本大小

	-->

	<font color="red"face="宋体"size="7">字体样式</font>
	
</body>

7.1.2 特殊字符

一些字符在 HTML 中拥有特殊的含义,比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符,我们必须在
HTML 源码中插入字符实体
空格是 HTML 中最普通的字符实体。
通常情况下,HTML 会裁掉文档中的空格。假如你在文档中连续输入 10 个空格,那么 HTML 会去掉其中的9个。如果使用  ,就可以在文档中增加空格。
01 HTML 和 CSS
01 HTML 和 CSS

<body>
	
	<!-- 特殊字符
	 需求 1:把 <br> 换行标签 变成文本 转换成字符显示在页面上

	<  ====> &lt;
	>  ====> &gt;
	空格 ====> &nbsp;
	-->

	你好&lt;br&gt; 哈哈哈
	呜呼呜呼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ggg
	
</body>

7.1.3 标题标签

标题标签是 h1 到 h6
需求 1:演示标题 1 到 标题 6 的

<body>
	
	<!-- 标题标签
	需求 1:演示标题 1 到 标题 6

	h1 - h6 都是标题标签
	h1最大  h6最小
		align 属性是对齐属性
		left  左对齐(默认)
		right  右对齐
		center 居中
	-->

	<h1 align="left">标题1</h1>
	<h2 align="right">标题2</h2>
	<h3 align="center">标题3 </h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
	
</body>

7.1.4 超链接(重点)

在网页中所有点击之后可以跳转的内容都是超连接
需求 1:普通的 超连接

<body>

	<!-- 超链接
	 需求 1:普通的 超连接
	 href属性设置连接的地址
	 target属性设置哪个目标进行跳转
	 	_self  表示当前页
	 	_blank 表示打开新页面进行跳转

	 -->

	<a href="http://localhost:8080" target="_self">百度</a><br/>
	<a href="http://localhost:8080" target="_blank">百度</a>

</body>

7.1.5 列表标签

无序列表 、 有序列表
需求 1:使用无序,列表方式,把东北 F4,赵四,刘能,小沈阳,宋小宝,展示出来

<body>

    <!-- 需求 1:使用无序,列表方式,把东北 F4,赵四,刘能,小沈阳,宋小宝,展示出来
    nl 是无序列表
        type属性可以修改列表项前面的符号
        li是列表项
    ol 是有序列表

    -->
<ul type="none">
  <li>赵四</li>
  <li>刘能</li>
  <li>宋小宝</li>
  <li>小沈阳</li>

</ul>
</body>

7.1.6 img标签

img 标签可以在 html 页面上显示图片。
需求 1:使用 img 标签显示一张美女的照片。并修改宽高,和边框属性

<body>

    <!--
    需求 1:使用 img 标签显示一张美女的照片。并修改宽高,和边框属性
    img标签是图片标签,用来显示图片
        src属性可以设置图片的路径
        width属性设置图片的宽度
        height属性设置图片的高度
        border属性设置图片的边框
        alt属性设置当前路径找不到图片时,用来代替显示的文本内容

        在web中分为相对路径和决定路径
        相对路径:
            .          表示当前文件所在的目录
            ..         表示当前文件所在的上一级目录
            文件名       表示当前文件所在目录的文件,相当于 ./文件名

       绝对路径:
            正确格式 http://ip:port/工程名/资源路径
            错误个数:盘符:/目录/文件名


    -->
    <img src="../imgs/1.jpg" width="200" height="200" border="1" alt="找不到图片"/>
    <img src="../imgs/2.jpg" width="200" height="200" border="1"/>
    <img src="../imgs/3.jpg" width="200" height="200" border="1"/>
</body>

7.1.7 表格标签(重点)

需求 1:做一个 带表头的 ,三行,三列的表格,并显示边框
需求 2:修改表格的宽度,高度,表格的对齐方式,单元格间距

<body>
		<!--
		需求 1:做一个 带表头的 ,三行,三列的表格,并显示边框
		需求 2:修改表格的宽度,高度,表格的对齐方式,单元格间距。

		table标签是表格标签
			border 设置表格边框
			width 设置表格宽度
			height 设置表格长度
			align设表格对齐方式

		tr 是行标签
		th 是表头标签
		td 是单元格标签
			align设置单元格对齐方式

		b是加粗标签
		-->
<table align="center" border="1" width="200" height="200" cellpadding="0">
	<tr>
		<th>1.1</th>
		<th>1.2</th>
		<th>1.3</th>
	</tr>
	<tr>
		<th>2.1</th>
		<th>2.2</th>
		<th>2.1</th>
	</tr>
	<tr>
		<th>3.1</th>
		<th>3.2</th>
		<th>3.3</th>
	</tr>
</table>	
</body>

程序员灯塔
转载请注明原文链接:01 HTML 和 CSS
喜欢 (0)