TML知识点梳理
关注“教授学苑”,期待带给你快乐的开发知识!
<html></html>双标签 开头结尾 HTML标签为最大的标签 称为根标签
<head></head> 文档头部标签 且必须设置title
<title></title> 页面标题
<body></body> 文档的主体 包含页面的内容
<h1>-<h6> HTML提供6个等级的页面标题 有大到小
<p></p> p标签用于定义段落 可以将页面分为若干个段落 根据窗口大小自动换行
<br/>单标签 换行标签 (break打断)
加粗 <strong></strong>or<b></b>
斜线 <em></em>or<i></i>
删除线 <del></del>or<s></s>
下划线 <ins></ins>or<u></u>
没有语义 属于一种盒子 来装内容
<div></div> 表示分割分区 用来布局 一行一个 大盒子
<span></span>意为跨度,跨距 一行可以哦有多个 小盒子
<img src="图像路径(url)"/> 定义页面中的图像
图像标签包含多个属性
src 图片路径 必须属性
alt 文本 替换文本 图像不能显示的文字
title 文本 鼠标放到图像上显示文字
width 像素 宽度
height 高度
border 边框
相对路径和绝对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径
分类:下级路径/ 上级路径../
绝对路径:是指目录下的绝对位置,如硬盘中的路径或网路地址
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href用于指定链接目标的url地址(必须属性)
target用于指定链接打卡方式 _self为默认值 _blank为在新窗口打开方式
锚点链接:可以快速到页面某个位置
在链接文本中的href属性中,设置属性值为#名字的形式,如<a href="#two">目标</a>
找到目标位置标签,里面添加一个id属性 = 名字,如:<h3 id="two">目标</h3>
<!-- 注释语句 --> 快捷键CTRL + /
HTML 原代码 | 显示结果 | 描述 |
< | < | 小于号或显示标记 |
> | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | “ | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
半个空白位 | ||
一个空白位 | ||
不断行的空白 |
<table></table> 是用于定义表格的标签
<tr></tr> 标签用于定义表格中的行,必须嵌套在<table></table>标签中
<tb></tb> 用于定义表格的单元格,必须嵌套在<tr></tr>标签中
<td> 元素中的文本通常是普通的左对齐文本。字母td指表格数据(table data),即数据单元格的内容
表头单元格标签:
<th>标签表示HTML表格的表头部分 <th> 元素中的文本通常呈现为粗体并且居中。
表格属性:
align left center right 规定表格相对于周围元素的对齐方式
border 1or"" 规定表格单元是否拥有边框默认为"",表示没有边框
cellpadding 像素值 规定单元边沿与其内容的空白,默认1像素
cellspacing 像素值 规定单元格直接的空白 默认2像素
with 像素值or百分比 规定表格的宽度
合并单元表格方式:
跨行合并:rowspan="合并单元格的个数"
跨列合并:colspan="合并单元格的个数"
<ul>标签表示无序列表 里面只能包含li
<ol>有序标签 里面只能包含li
<li>相当于一个容器定义列表项 与<ui>or<li>嵌套使用 li里面可以包含任何标签
<dl>标签用于定义描述列表(或自定义列表),该标签会与<dt>(定义项目和名字)和<dd>(描述每一个项目名字)一起使用
标签 | 描述 |
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义了 <input> 元素的标签,一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素,并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist> New | 指定一个预先定义的输入控件选项列表 |
<keygen> New | 定义了表单的密钥对生成器字段 |
<output> New | 定义一个计算结果 |
<input>标签用于收集用户信息 包含一个type属性 可以有多种样式
<input type="value">
<input type="属性值" />
属性值:
button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。 |
checkbox | 定义复选框。 |
file | 定义输入字段和 "浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 |
<label> 标签为 input 元素定义标注(标记)。 label是标注的意思
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同
详情可参考
https://www.runoob.com/ 菜鸟教程
https://www.w3school.com.cn/ w3c
家今天好我是小月,为大家介绍一下建站的基础语音,喜欢的建站的朋友要认真阅读,这会对你有一定的帮助!!
DW使用;
搭建 一个站点;
首页文件名称:index.html
文件夹 style js
w3c 是一个组织,制定网页规范标准的组织;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
声明网页的编码格式;
常用的编码格式;utf-8 国际通用标准,支持英文,中文,韩文,越南语
日语等等。。。;
gbk(gb2312)它是国标,支持中文简体繁体;跟后台有关;
字体:编辑, 首选参数 字体
列表 type修改列表符号;
布局,搭建一个网页结构;根据用户体验需求对内容进行合理规划;根据网络营销需求;
怎么布局;
表格布局
表格的最外层标记,<table> </table>
表格里面的行用<tr></tr>表示;一对tr表示一行;
一个单元格用<td></td>来表示;
表格里面有一个属性 边框 border 默认情况下,这个border="0"
ctrl alt a
单元格与单元格的缝 cellspacing 默认情况 不为0
跨行 rowspan 跨行,就是指一个单元格在垂直方向占领多行;
跨列 colspan 在水平方向占领多个单元格;
背景颜色 bgcolor
布局 table布局;现在不是主流, 但是在网页中还是会用到;现在主要用
div+css来进行网页布局;
为什么要用div+css呢?
简单一些;
² 代码相对table而言,div+css涉及到的代码行数更少;
² div+css网页布局有利于seo;做搜索引擎喜欢网站;
² div+css方便后期管理维护(css讲完之后再来理解;)
² 有利于浏览器的向后兼容;新的浏览器不能识别传统的一些布局标签,但是div+css
所涉及的标签浏览器能够很好的识别;
ie 5 6 7 8 9 10 11 12
CSS是什么?
有什么用?
CSS全称是 层叠样式表 Cascading Style Sheets 也叫样式 ,style
修饰,美化网页的;
table 表格,结构
如何在网页中实现CSS;CSS表现形式;
三种常见的表现形式(实现方式);
每一种 行内式,
直接在html开始标签里面写上style="属性:属性值;属性:属性值;"
第二种写法: 内部嵌入式(嵌入式)
在<head></head>内部嵌入
<style>
css代码
html标签{属性:属性值;}
</style>
第三种表现形式;外部链接式(外链式)
把css样式单独放在一个style样式文件夹里面,然后在html页面中来调用这个css文件;
<link rel="stylesheet" type="text/css" href="style/yangshi.css"/>
以后大家都使用第三种表现式,外部链接式;
为什么要用第三种表现形式;
第一,w3c组织推荐使用第三种外链式;
第二,外部链接式实现了表现(html)与样式(css)相分离(有利于简化页面结构),
有利于后期维护修改等(选择器);
第三,有利于搜索引擎优化(seo)
选择器
是什么?
有什么用?
p{color:red;} 它表示把所有的p标签里面的内容都变成红色;
作用:指定样式控制修饰的对象;
常用的基础选择器;
标签选择器;直接把html标签拿到css里面当选择器使用的称之为标签选择器;
类选择器;
给元素取名;
在开始标签里面写上 class="类名" ,注意,类名不要以数字开头;一般用英文小写开头;
在css里面写上 .类名{属性:属性值;属性:属性值;}
background:#09F; 背景颜色 这是在css里面的写法;
bgcolor 这是在html标签里面的写法;
text-align:center; 文字居中;
以上是今天的建站的内容,喜欢的小伙伴关注一下我每天都会更新这方面的知识!谢谢大家!
*请认真填写需求信息,我们会在24小时内与您取得联系。