端午小长假--前端基础学起来01

  • HTML和CSS的关系

1)HTML是网页上面的文字、图片的载体

2)CSS是样式,文字的字体,颜色,边框

3)JavaScript是特效,弹出淡入

  • HTML标签

1)<h1></h1>是标题标签,<p></p>是段落标签,<img src="1.jpg">是图片标签

2)网页中每一部分的内容都要放在标签中才能显示

3)标签不分大小写,一般都是小写

  • HTML文件的结构

<HTML>根标签

< head> .... < /head>定义文档的头部,里面有

< head>

< title>......</title>显示在浏览器的标题栏

< script>......</script>

< style>.......</style>

< link>

<meta>

</head>

<head>标签中一般写的都不会显示在页面上给读者看,

<body> ....</body>里面是网页的主要内容,<h1><p><a><img>

</HTML>

  • HTML的代码注释

<!--注释文字-->

下面的学习中要注意两方面的学习:标签的用途,标签在浏览器中的默认样式

  • <p>标签,段落

语法:<p>段落文本</p>,一段文字用一个<p></p>标签,如果有三段文字,用三个<p></p>标签

  • <hx>标签,标题

用途:为网页添加标题,一共有6个,h1,h2,h3,h4,h5,h6,h1是最高等级

语法:<hx>标题文本<hx> ,x为1-6

样式:<body>

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

</body>

  • < strong>用粗体表示,<em>用斜体表示

语法:<em>要强调的文本</em> < strong>要强调的文本</strong>

  • <span>需要为某个东西单独设一个样式时候用,在head中加入标签,设置样式,在body中使用

<head>
span{
    color:blue;
}
<
/head>
< body>
   < p>为了追寻他的<span>
美国梦</span>,他搬入纽约附近一海湾居住。</p>
< /body>

  • <q>,短文本引用,一句话,一首诗

语法:<q>引用</q>,引用的文本不需要加双引号,浏览器会自动加上双引号

  • <blockquote>,长文本引用,一大段话

语法:<blockquote>引用文本</blockquote>,引用的文本不需要加双引号,浏览器会自动加上双引号

  • <br>分行显示文本,作用相当于回车换行,是一个空标签,只有开始标签,没有结束标签

语法:<br />,在需要回车换行的地方加入

  • &nbsp;

语法:&nbsp;

  • <hr />,添加水平横线,是一个空标签,只有开始标签,没有结束标签

语法:<hr />

  • < address>,邮件地址,文档作者,地址,显示在页面上是斜体

语法:<address>联系地址信息</address>

  • <code>在网页中显示出来编程代码,一段代码

语法:<code>代码语言</code>

  • <pre>为网页加入大段代码

语法:<pre>代码</pre>

  • < ul><li>,添加新闻信息列表内容排列展示,每一项li前都带一个圆点

语法:

<ul>

< li>信息</li>

</ul>

  • <ol>添加图书销售排行榜,默认从1开始

语法:

<ol>

<li>信息</li>

</ol>

  • <div>把独立逻辑的代码分出来

语法:<div>......</div>

  • 给div命名

语法:<div id = "版本名称">....</div>

  • table 标签,四个元素:table,tbody,tr 行,th 表头,td 列
  • caption,为表格添加标题,显示在页面中,summary,为表格添加摘要,不显示出来;

语法:<table
summary="表格简介文本">

eg:

<table
summary="本表格记录2012年到2013年库存记录,记录包括U盘和耳机库存量">
 <
caption>2012年到2013年库存记录</caption>

</table>

  • <a>超链接

语法:

<a href="目标网址"  title= "鼠标滑过显示的文本"> 链接显示的文本</a>

eg:

<a href="www.baidu.com" title =
"百度"> 百度</a>

注:默认在当前浏览器窗口打开,若需要在新窗口中打开,

<a href="目标网址" target=“_blank”>click here!</a>

<a href="目标网址"  title= "鼠标滑过显示的文本"
target=“_blank" >链接显示的文本</a>

  • mailto 在网页中链接Email地址,后面同时有多个参数时,第一个参数以?开头,后面的参数每一个都以& 分隔

语法:

<a href =“mailto:[email protected]?subject=主题&body=邮件内容”>发送</a>

  • img,为网页插入图片

语法:

<img src ="图片地址" alt="下载失败时的替换文件" title = "提示文本">

src是标识图像的位置,alt 指定图像的描述性文件,当图像不可见时显示的文本,title鼠标滑过图片显示的文字,图像支持gif、png、jpeg

  1. 认识标签告一段落。
时间: 2024-08-05 10:51:42

端午小长假--前端基础学起来01的相关文章

端午小长假--前端基础学起来04CSS选择器

定义: 选择器{ 样式: } 选择器指明{}中的样式的作用对象,即作用于网页中的哪些元素 <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>选择器</title><style type="text/css">body{ font-size:12px; color:red; }&l

端午小长假--前端基础学起来03CSS为网页添加样式

定义:用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体 设置样式:将要设置样式的内容用<span></span>样式括起来,然后再head中设置span <head><style type="text/css">span{ color:red;}</style></head> <body> <p>慕课网,<span>超酷的互联网</span>.IT技术

端午小长假--前端基础学起来02与浏览器交互,表单标签

form  与用户进行交互,将浏览者的数据传到服务器端,相当于一个容器 语法:<form method = "传送方式"  action = "服务器文件"> 解释:method:数据传送的方式(get/post),action:浏览者输入的数据被传送到的地方,比如一个页面 文本/密码输入框 语法:<form> <input type="text" name="名称" value="文本

零基础学UI小白锐变之路全能UI/UE设计师

课程简介:UI设计入学门槛较低,其所见即所得,大大增强了学习中的趣味性.而“互联网+”与O2O模式的大趋势,使之前景广阔超乎想象.行业内人才供不应求,设计人才缺口高达上千万,就业无忧.因人才的供不应求致使平均薪资水涨船高,最高的可达月薪30000+,可谓钱途无量.选择我,将您打造成会代码的全能设计师,领略前所未有的高薪体验. 学完后可选择从事4A广告公司平面设计工作,品牌形象设计工作及高端印前设计.电商美工.电商装修设计.网页设计.网页美工.网页制作.移动应用界面设计师.图形界面设计师.UI设计

零基础学Python,这是阿里Python8年开发经验写给你的学习路线图

今天给大家分享一位前辈整理的一个Python web学习路线.这位前辈由于有编程基础,所以采用了自学Python的方式.学完后主要做后端开发.希望对你有所启发. 整理的一个 python web 学习路线,这基本就是笔者自学后做后端的学习路线.创一个小群,供大家学习交流聊天如果有对学python方面有什么疑惑问题的,或者有什么想说的想聊的大家可以一起交流学习一起进步呀.也希望大家对学python能够持之以恒python爱好群,如果你想要学好python最好加入一个组织,这样大家学习的话就比较方便

零基础学python-2.17 文件、open()、file()

今天我们来说说文件,以及跟文件有关的内建函数open和file 首先我们在python的根目录下建一个名为"123"的txt文本文件 文件里面我们输入一些文本 我们把新建文件与源代码都放到python根目录下面 下面我们来看看代码: handler=open("123.txt")#由于把文件跟源代码建立在python的根目录, #所以这里的路径只需打名字即可 for eachLine in handler: print(eachLine,end='') handle

百度前端技术学院任务-01

这两天发现了一个很不错的学习前端的地方:百度前端技术学院. 里面有不同类型的任务,任务之间的难度是递增的,很适合作为练习. 下面是任务-01的代码(并没有涉及到CSS): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度前端技术学院任务-01</title> </head> <bod

前端基础知识

1.了解web前端基础 (1) 网页介绍 组成: 文字,图片,按钮,输入框,视频等等元素组成的 (2)web标准 :制作网页的规范 a.结构标准(HTML) b.表现标准(CSS) c.行为标准(JavaScript) 2.浏览器 谷歌    内核 :blink IE(高版本) 内核:trident 苹果浏览器: 内核webkit 欧鹏  内核: Presto  现在用的是webkit 火狐  内核: gecko 3.HEML(Hyper Text markup Language) 超级文本标记

html css 前端基础 学习方法及经验分享

前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于基础语法 对于基础语法,此处不做讲解,有需要的同学可以在w3cschool.w3school.慕课网等等进行学习.如果是刚开始接触前端,不建议通过书籍进行学习,第一是因为书籍里面有的知识可能过于陈旧,已经在新版本中被废弃,第二是因为书籍里面知识体系十分全面,很多知识可能比较难理解,且平时做项目会很少