web特殊記号
来源:互联网 发布:算法工程师jd 编辑:程序博客网 时间:2024/06/15 01:31
1.文本标记
1.特殊字符
1. 空格2.< <
3.> >
4.© ©
5.¥ ¥
2.标题元素
语法:<hn></hn> n:1-6<h1>内容</h1> 一级标题
<h2>内容</h2> 二级标题
...
<h6>内容</h6> 六级标题
特点:
1.改变字体大小
2.加粗
3.上下文之间有垂直空白间距
3.段落元素
语法:<p>内容</p>特点:上下文之间有垂直空白间距
4.换行
语法:<br>或<br/>5.水平线
语法:<hr>或<hr/>6.文本样式
<b></b> 加粗<u></u> 下划线
<i></i> 斜体
7.分区元素
1.块分区元素:<div></div>作用:布局
2.行分区元素:<span></span>
作用:包裹文本,对一行中的某些文本进行样式的自定义
补充:
1.块级元素:默认情况下,块级元素会独自成行, 即元素前后都会自动换行
ex:<p></p>,<div></div>,<hn></hn>
2.行内元素:多个元素在一行中显示
ex:<u></u>,<b></b>,<i></i>,<span></span>
2.图像和链接
1.url
url:uniform resource locator统一资源定位器,俗称路径。1.绝对路径
完整的路径,给你这个路径你就可以找到你想要找的资源。1.网络资源:
通信协议:http://域名(ip地址):img10.360buyimg.com
文件目录结构:images/img/
文件名称:a.jpg
2.本机资源
从最高盘符处开始查找D:\1704\其他\练习\img\flower.jpg
2.相对路径
相对于文件(.html)所在位置处开始查找资源的路径,主要依托于位置关系来查找1.同目录
直接引用文件flower1.jpg
2.子目录
先进入文件夹,然后再引用images/flower.jpg
3.父目录
先返回上一级(返回父级目录),然后再引用../flower2.jpg
3.根相对路径
从web站点的根目录处开始查找/jd.com/images/flower.jpg
2.图像
1.格式
jpg:压缩比率大png:背景透明
gif:动画
2.语法
标记:<img>属性:
src:图像所在的路径(url)
title:鼠标移入停留时显示的文字内容
alt:图片出错时显示的文字
width:宽度
height:高度
练习:将三张图片分别用同级目录,子级目录,父级目录的相对路径去添加图片到网页中。
3.链接
1.语法:<a>内容</a>
属性:href:链接的路径(url)
target:目标,打开新的页面的方式
取值:
_self:自身的页面中打开
_blank:新的标签页中打开
title:鼠标放到链接上的提示内容
2.其他表现形式
1.目标为下载资源href="*.zip/*.rar"
2.电子邮件
href="mailto:g-yangyan@tedu.cn"
3.返回页面顶部
href="#"
4.链接到JS文件
href="javascript:"
练习:用链接打开网站:http://www.tmooc.cn
要求从新的标签页中打开
4.结构标记
div布局存在一些问题:1.布局复杂时,会出现大量的div元素
2.元素相互嵌套,页面会难以处理和维护
解决以上问题,提出结构标记
常用的结构标记:header/nav/section/aside/footer/article
1.header元素
语法:<header>内容</header>作用:定义整个网页或者某个区域的“页眉”,定义页面的顶部信息。
2.nav元素
语法:<nav>内容</nav>作用:定义网页的导航内容
3.section元素
语法:<section>内容</section>作用:表示网页的主体内容
4.aside元素
语法:<aside>内容</aside>作用:定义网页的边栏(左右两边的侧边栏)
5.footer元素
语法:<footer>内容</footer>作用:表示网页偏底部的信息:比如网站的备案号,解释说明等
6.article元素
语法:<article>内容</article>作用:表示论坛中的帖子,报纸中的文章,微博条目,用户评论等。
5.列表
1.列表的作用
将具有相似特征或者具有先后顺序的内容按照从上到下(从左到右)的顺序排列。2.列表分类
1.有序列表:<ol>
列表项:<li>2.无序列表:<ul>
列表项:<li>3.有序列表
语法:<ol>
<li>内容</li>
<li>内容</li>
<li>内容</li>
...
</ol>
属性:
1.type:有序列表的类型
取值:
1:数字(默认值)
a:小写英文字母
A:大写英文字母
i:小写罗马数字
I:大写罗马数字
2.start 定义起始编号
取值:数字
4.无序列表
语法:<ul><li>内容</li>
...
</ul>
属性:type
取值:
disc:实心圆
circle:空心圆
square:实心方块
none:不显示标识
5.列表的嵌套
列表项中去嵌套另一个列表语法:
<ol>
<li>内容
<ul>
<li>内容</li>
</ul>
</li>
</ol>
阅读全文
0 0
- web特殊記号
- 特殊WEB服务的配置
- Web.Config 特殊字符转义
- Web.config中的特殊字符
- Web.config中的特殊字符
- web开发中的特殊字符
- web测试中的特殊字符
- web.字符串.特殊字符处理
- Web特殊字符处理(SQL URL HTML)
- Web特殊字符处理(SQL URL)
- web.config文件中的特殊字符处理
- web.config文件中的特殊字符处理
- Web开发中特殊字符的转义
- Web.Config如何输入特殊字符
- Web开发中特殊字符的处理
- web网页中的特殊字体/字符
- 特殊
- SSH中转义特殊字符串以及非Web项目中的特殊字符转换
- python 常用模块介绍
- 集合list
- 顺序表应用7:最大子段和之分治递归法
- Quartz定时任务删除冗余操作日志
- 服务器发送事件SSE和web sockets实时通信
- web特殊記号
- 半数集问题(转)
- [agc011e]Increasing Numbers
- 栈和递归解决迷宫问题
- 观察者模式
- 64.Scala中隐式对象代码实战详解
- C++命名空间
- python 批量修改JPG为jpg后缀
- 第二章 Sprin Framework的核心:IOC容器的实现