我的学习笔记
<html> </html> 后面的叫做闭合标签
<head> 头标签,声明一些信息,给搜素引擎看的
<title> 标题标签,给搜索引擎看的,便于搜索引擎分类,排序
<body> 上下文标签
<br>单标签,没有闭合标签
<hr>水平线标签 属性 align:对齐方式 size:线的粗细 color:颜色
<div> 块标签 能自动换行 <span> 块标签 不能自动换行
蓝色字体代表的是标签 黄色代表属性 浅绿色代表属性的值
HTML 书写规范
1.不区分大小写
2.内容必须写在尖括号里
3.标签分两种,单标签,双标签
4.标签属性的书写规范:属性值可以使用“”(双引号)‘’(单引号)还可以不用 开发推荐使用双引号,因为看起来清晰
<!DOCTYPE>声明使用HTML的版本,DOCTYPE是第五版 HTML简称H5
utf-8 国际编码
gbk国内编码
gb2312 国内编码
字体标签:
<h1>-----<h6>
其中<h1>字体最大 <h6>字体最小
<i></i> 斜体标签
<b></b> 加粗标签
<u></u>下划线标签
注释格式: <!--注释内容-->
字体标签:<font size="5" color="red"></font>
地址标签:<address>
加粗标签:<strong> 在开发中能用<b>标签就用<b>标签,因为浏览器对<b>标签友好
图像标签:<img></img> 或者<img />
属性:src:图片的路径(图片的相对路径或者图片的绝对路径)
width:图片的宽度(可以是百分比,也可以是像素,下同)
height:图片的高度
alt:描述图片的属性
相对路径:D:/123/1.jpg 相对于你的电脑,图片在这个地址,在不同的地址上,这个图片的地址都不相同
绝对路径:<img src="img.1.jpg"/>无论在那一台电脑上,图片都在这个地址上
链接标签:<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="blank">百度</a> target="blank"为新窗口打开
<a href="登录页面.html">跳转到登录页面</a> 本项目中实现跳转
清单标签
有序清单:
<ol>
<li></li>
<li></li>
</ol>
无序清单:
<ul>
<li></li>
<li></li>
</ul>
表格标签:
<table border="1" bgcolor="red" width="300" height="300'>
<tr>
<td></td>
<td></td>
</tr>
<th>:居中并加粗
表单标签:<input type="text" name=username>
submit type 的选项值 代表提交,把表单数据提交到后台
form 表单标签 input: 表单的子标签
action:请求后端URL地址
radio:单选按钮
checkbox:多选按钮
submit:提交
reset:重置
老师的笔记如下:
软件分为两种
1.b/s 模式 b代表browers浏览器 s : server服务器 例如京东 天猫 12306 特点: 无需下载客户端 只需要在浏览器中输入对应域名
2.c/s 模式 c代表client客户端 s : server服务器 例如:qq 金山打字 飞秋 特点 :需要下载客户端
区别:从开发成本的角度讲 b/s的开发成本更低
1 什么是html hyper text markyp language: 超文本标记性语言
超文本:本文本功能更强大
标记性语言:通过一组标签对内容进行描述和展示的一门语言
2 为什么要使用HTML
因为我们设计软件的时候需要使用HTML语言来设计页面
HTML语法: 包含两个部分 1.标签(标记) 2.属性
1.文件标签:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<html>:申明它是一个HTML文件
<head> :头标签
<title>:标题标签
<body> :上下文标签 作用: 展示内容
后缀名有两种 .html .htm 而且这两种后缀名完全一样
html是通过浏览器解析来运行的
html的开发工具:Dreamweaver Webstorm Hbuider
2.排版标签:
<p> 段落标签 属性 align 对齐方式 选项值:left right center
<br> 换行标签
<hr> 水平线标签
① 属性 align对齐方式 选项值:left right center
② 属性 size:线的粗细 选项值 1到7 值越大线越粗
③ 属性 color :线的颜色
④ 属性 width :线的宽度 选项值 1.像素 2.百分比
<div> 块标签 可以自动换行
<span> 块标签 不能自动换行
总结 书写html规范:
1.不区分大小写
2.标签必须写在 <>
3.标签有两种 一种双标签例如<p></p> 另一种就是单标签 例如<br> <hr>
标签属性的值的规范:
1.属性值可以使用单引号,也可以使用双引号,也可以不写,但是开发中推荐使用双引号,因为双引号框起来看起来比较清晰一点
2.引号为英文状态下的
字体标签:
1.标题标签:<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> h1的字体最大
2.斜体标签<i></i>
3.加粗标签<b></b> <strong></strong> 开发中不推荐使用<strong>
3.下划线标签:<u></u>
HTML的注释格式 <!--注释内容-->
字体标签 <font></font> 属性 size 字体的大小 color 字体的颜色
图像标签:
<img></img> 或者 <img /> 属性 src值 图片的路径 width 图片的宽度 可以是百分比也可以是像素 height 图片的高度
属性: alt 描述的属性 总用 :给搜索引擎看的 例如: <img src="img/1.jpg" width="300" height="150" alt="这里是人民大会堂"/>
相对路径:有参照物 例: D:/img/aa.jpg 在你的电脑上,是这个地址,在别的电脑上,可能就不是这个地址了,所以为相对地址
绝对路径:具体的地址 例如 img/1.jpg 无论在哪一台电脑上,这个图片都在这个地址上,所以为绝对地址
标签链接: <a href="www.baidu.com">百度</a> href : 具体的地址值 target 值 "_blank" 新窗口
项目内页面如何实现跳转: <a href="登录页面.html">跳转到登录页面</a>
清单标签:清单标签有两种形式 1 有序清单 2 无序清单
1.有序清单 <ol>
<li></li>
<li></li>
</ol>
2.无序清单<ul>
<li></li>
<li></li>
</ul>
表格标签:
<table> 表格标签 属性 border:表格的线条 width:线条 的宽度 height 高度
<tr> 表格的行
<td> 表格的列
<caption> 标题标签
<th>表格的同一行 居中并加粗
表单标签:
<form>表单标签 属性 action 请求后端URL地址 method:get/post
<input> 表单的子标签 属性的值 text 代表文本 radio 单选按钮 checkbox 复选框 date 日期 file文件 reset 重置 submit 提交
选择标签 <select>
<option>陕西省</option>
<option>山西省</option>
</select>
颜色 azure
合并行 rowspan 合并列 colspan 单元格填充 cellspacing
CSS cascading Style Sheet 中文名 层叠样式表
作用: 使用CSS来控制元素(标签)的样式,美化网页