标签之间的文字内容是网页的标题消息

Web前端开辟基础手艺三徘徊花:HTML、CSS、JavaScript。

语法

随手笔记而已--比较乱


  1. HTML 网页内容的载体,内容及用户浏览的音信,包蕴文字 、图片、摄像等。
  2. CSS 网页内容的展现,像网页的门面,用来退换内容的外观。
  3. JavaScript 用来落到实处网页上的特效效果,像有的卡通和互动行为。

一. 主导构造

  • <html></html>:
    根标签,全数的网页标签都在<html></html>

  • <head></head>:用于定义文书档案的尾部,它是具备尾部元素的容器.

  • <body></body>:标签之间的始末是网页的关键内容.


HTML

平凡大家上网浏览的有滋有味的网页都是有html标签组成的,网页中的每贰个剧情在浏览器中显示都要存放在各个标签之中。

  1. 标签语法
  • 由英文尖括号<>括起来。如<html>
  • 貌似成对出现,分开头标签和终结标签,结束标签比起来标签多三个/。如“
  • 标签直接能够嵌套,但先后顺序需保持一致。如<p>内容文本测试文字没字了</p>
  • 不区分轻重缓急写,但提出小写。
  1. 文件中央结构

<html>
    <head>... ...</head>
    <body>... ...</body>
</html>
  • <html>为根标签,全体网页标签都在中间。
  • <head>用于定义文书档案的头顶成分新闻。描述文档的种种品质和消息,包罗文书档案的标题等。那里包涵的数据都不会真的作为内容展示给浏览者。如<title>网页标题</title>标签,设置网页的标题音讯,将会产出在浏览器的标题栏中。
  • <body>网页的严重性内容,在此地的价签中的内容会在浏览器中呈现。

html的代码注释,“

  1. 语义化标签

语义化标签,正是的竹签的本人意义用途。使用语义化标签能够更易于被搜寻引擎收音和录音,更便于让显示屏阅读器读出网页内容。

  1. 标签成分分类

标签成分大要可分为两种分化的花色,块级元素、内联成分、内联块级成分。三连串型可由此上边形式转换:

display:block; 设置将元素显示为块级元素
display:inline; 设置将元素显示为内联元素
display:inline-block; 设置将元素显示为内联块级元素

块级元素各样成分都从新的一行起首,而且其后的因素也另起1行,高度、宽度、行高以及顶和底部距都得以安装,高度在不设置的气象下,是作者父容器的百分百。常见块级成分有:

<div> , <p> , <h1>~<h6> , <ol> , <ul> , <dl> , <table> , 
<form> , <blockquote> , <address>

内联元素和其他因素都在一行上,中度、宽度、行高以及顶和底部距都不行设置,成分的大幅是它所包括的文字或图表的增长幅度,不可退换。常见的内联成分有:

<a> ,  , <br> , <i> , <em> , <strong> , <label> , <code>

内联块级成分和任何因素都在1行上,中度、宽度、行高以及顶和后面部分距都得以设置。<img> , <input>

《慕课网_HTML+CSS基础课程》学习整理

二. 标签详解

1. head 标签

文书档案的头顶描述了文书档案的种种质量和音讯,包涵文档的标题等.一般不会真正作为内容显示给读者看.

<head>   
<meta charset="UTF-8">    
<title>勇气</title>    
<link>    
<style></style>    
<script></script>
</head>

<title>标签:
在<title>和</title>标签之间的文字内容是网页的标题消息,它会出现在浏览器的标题栏中.网页的title标签用于告诉用户和查找引擎这一个网页的显要内容是什么,搜索引擎能够通过网页标题,快速的判别出网页的大旨。每一种网页的剧情都是见仁见智的,每种网页都有绝代的
title

贰. 代码注释

叁. 别的标签
  • <hx></hx>: 标题,h1-h2-h3-h4-h5-h6

  • <p></p>: 段落

  • <strong></strong>: 加粗

  • <em></em>: 斜体

  • <q></q>: 短文本引用,引用的局地不供给加双引号

  • <blockquote></blockquote>: 长文本引用,引用的1对不须要加双引号

  • <br/>: 换行,也就是回车键

  • “: 空格

  • <hr/>: 分割线

  • <address></address>: 地址

  • <code></code>: 代码(单行),多行用<pre></pre>

  • <ul></ul>: 冬天列表, <li></li>包在里面表示每条消息

  • <ol></ol>: 有序表,<li></li>包在里面表示每条音信,从一早先

  • <div id="name"></div>:
    分块,将相关联的要素封装成一块放在贰个器皿中使其独立…个中,用 id
    给模块命名,给定四个唯一标示符常用

  • 表格

  • <table></table>: 整个表格的开始和了结

  • <tbody></tbody>:
    当表格内容拾贰分多时,表格会下载一点展现一点,但假如加上<tbody>标签后,那一个表格就要等表格内容全方位下载完才会来得

  • <tr><tr>:表格的1行,有多少个<tr>就有几行

  • <td></td>:
    表格的三个单元格,一行中隐含几对<td>…</td>,说贝拉米(Bellamy)行中就有几列

  • <th></th>:
    表格的底部的3个单元格,表格表头..与<tr>同级,th标签中的文本默感觉粗体并且居中显示

  • <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>:
    超链接(在本窗口展开网页).title属性的功能,鼠标滑过链接文字时会呈现那个性子的文本内容。这么些天性在其实网页开拓中效果异常的大,主要方便寻觅引擎了然链接地址的始末(语义化更温馨).
    在新窗口张开目标网站<a href=”目的网址”
    title=”鼠标滑过呈现的文本”
    target=”_blank”>链接显示的文本</a>`

  • mailto::
    使用mailto在网页中链接Email地址.格式<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有&body=你好,对此评论有些想法">对此影评有何感想,发送邮件给我</a>.注意:借使mailto后边同时有多少个参数的话,第二个参数必须以“?”开始,前面包车型大巴参数每三个都以“&”分隔。

365体育网站 1

mailto.png

  • <img>: 为网页插入图片.
    ![电影介绍](http://upload-images.jianshu.io/upload_images/565029-8358b9d56aca6b0a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  • 壹、src:标记图像的地点;

  • 2、alt:钦定图像的描述性文本,当图像不可知时(下载不成事时),可观看该属性钦赐的文本;

  • 三、title:提供在图像可见时对图像的叙说(鼠标滑过图片时体现的文本);

  • 肆、图像能够是GIF,PNG,JPEG格式的图像文件。

4. 表单

网站怎么样与用户举行相互?答案是应用HTML表单(form)。表单是能够把浏览者输入的数码传送到劳动器端,那样服务器端程序就足以管理表单传过来的多少。

  • 语法: <form method=”传送方式” action=”服务器文件”>

    • 1.<form>
      :<form>标签是成对出现的,以<form>起先,以</form>结束。
  • 2.action
    :浏览者输入的数目被传送到的地点,比如2个PHP页面(save.php)。

  • 3.method : 数据传送的措施(get/post)。

  • 肆.颇具表单控件(文本框、文本域、按钮、单选框、复选框等)都无法不放在<form></form>标签之间

5. 控件
  • 输入框: <input type="" name="" value=""/>,

  • type="text"代表文本输入框,type="password"意味着密码输入框

  • name 为文本框命名,以备后台程序ASP 、PHP使用

  • value 为文本输入框设置暗中同意值。(一般起到升迁效用)

  • 文本域:
    <textarea rows="行数" cols="列数">默认值</textarea>,当用户供给在表单中输入大段文字时,需求选拔文本输入域。
    只顾那八个属性可用css样式的width和height来代替:col用width、row用height来代替。

  • 选择框

  • 单选框:
    <input type="radio" value="值" name="名称" checked="checked"/>
    :当设置 checked=”checked” 时,该选取被私下认可选中
    :同1组的单选按键,name
    取值一定要1如既往,那样平等组的单选按键才能够起到单选的效劳

  • 复选框:
    <input type="radio" value="值" name="名称" checked="checked"/>

  • 下拉列表框: value
    是向服务器交由的值;看书是展现的值;设置selected=”selected”属性,则该采纳就被暗许选中

<label>爱好:</label>
<select>    
  <option value="看书">看书</option>    
  <option value="旅游" selected="selected">旅游</option>    
  <option value="运动">运动</option>    
  <option value="购物">购物</option>
</select>

下拉框多选添加multiple="multiple"属性. mac 计算机中按住 command
键同时单击举行多选操作

<form method="post" action="first.html">   
 <label>nnn:</label>    
<select multiple="multiple">     
    <option value="看书">看书</option>    
    <option value="旅游" selected="selected">旅游</option>      
    <option value="运动">运动</option>   
    <option value="购物">购物</option> 
    </select>
</form>
  • 按钮

  • 提交开关: <input type="submit" value="提交">

  • 重新载入参数开关: <input type="reset" value="重置">

  • label 标签:
    label标签不会向用户展现任何特殊效果,它的效率是为鼠标用户革新了可用性。如若您在
    label
    标签内点击文本,就会触发此控件。正是说,当用户单击选中该label标签时,浏览器就会自行将刀口转到和标签相关的表单控件上(就活动选花潮该label标签相关连的表单控件上)。
    <label for="控件id名称">标签的 for 属性中的值应该与连锁控件的 id
    属性值一定要一如既往。

<form>
  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

三. CSS 样式 (层叠样式表 (Cascading Style Sheets))

重在用来定义 HTML
内容在浏览器内的显得样式,举个例子文字大小、颜色、字体加粗等.

<style type="text/css">  
  table tr,td,th{border: 1px solid #000;}    
 span{         
          color: green;    
 }
</style>

<div>   
 <p>我最帅!!你特么服不服?!!不服弄死你一群傻吊</p>
</div>

要素分类
  1. 常用的块级成分:
    <div> <p> <h1>...<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

块级成分特点:
1.每一种块级元素都从新的1行起头,并且其后的元素也另起一行
二.成分的小幅度中度行高以及顶和尾部距都可安装
三.成分的肥瘦在不设置的图景下,是她的本人容器的百分百(和父成分的大幅度壹致),除非设定2个开间
内联元素转块级成分:a{display:block;}

  1. 常用的内联成分(行内元素):
    <a> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>

内联成分特点:
一.和任何因素都在一行上
二.成分的上升的幅度高度以及顶部和顶部边距不可设置
三.成分的大幅正是它蕴含的文字或图片的惊人,不可更动
块级成分转内联成分: div{dipaly:inline;}

  1. 常用的内联块榜眼素: <img> <input>

inline-block成分特点:
一.和其它因素都在1行

二.成分的莫斯中国科学技术大学学大幅度行高以及顶和尾巴部分距都可安装
转内联块状成分:a{display:inline-block;}

CSS 布局模型

三种为主布局模型:

  • 流动模型(Flow)
  • 转移模型(Float)
  • 层模型(Layer)

详解:

  1. Flow: 默许的网页布局模型.

    (一) 块状成分都会在所处的 饱含成分
    内自动而下的按顺序垂直延伸布满,因为在私下认可状态下,块状成分的宽窄都为百分之百.
    (2) 在 Flow模型下, 365体育网站,内联成分
    都会在所处的含有成分内从左到右水平布满显示.

  2. Float:
    能够让八个(more)块状成分并排展现.任何因素在暗中同意情状下都以不能够扭转的

  3. Layer:

三种样式 :

  • 绝对定位(position: absolute):
    假使想为成分设置层模型中的绝对定位,必要安装position:absolute(表示相对定位),那条语句的意义将元素从文书档案流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的三个兼有原则性属性的父包罗块举行绝对定位。借使不存在那样的包蕴块,则相对于body成分,即相对于浏览器窗口
    下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px

div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;}<div id="div1"></div>
  • 相对固定(position: relative):
    纵然想为元素设置层模型中的绝对稳固,供给安装position:relative(表示相对固化),它经过left、right、top、bottom属性分明因素在正规文书档案流中的偏移地方。相对固定完毕的进度是首先按static(float)情势变通3个要素(并且元素像层同样改造了起来),然后相对于以前的地方移动,运动的来头和增幅由left、right、top、bottom属性鲜明,偏移前的地方保留不动。
    为div设置相对定位,(相对于以前位置**左上角**)向右移动100象素,向下移动50象素。

#div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;  
}
</style>
</head>
<body>
    <div id="div1"></div>偏移前的位置还保留不动,覆盖不了前面的div没有偏移前的位置
</body>
  • 恒定定位(position:
    fixed):表示固定定位,与absolute定位类型类似,但它的争辩移动的坐标是视图(显示器内的网页窗口)本人。由于视图本身是原则性的,它不会随浏览器窗口的滚动条滚动而更改,除非你在显示屏中活动浏览器窗口的显示屏地方,或转移浏览器窗口的展现大小,因而一定定位的要素会始终放在浏览器窗口内视图的某些地点,不会受文书档案流动影响,那与background-attachment:fixed;属性功效雷同。
    以下代码可以实现相对于**浏览器视图**向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....