最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

《HTML5+CSS3网页布局和样式精粹》前端书籍下载

XAMPP下载 admin 767浏览 0评论

首先html5和css3是关于前端布局的一些样式定义,html5相当于结构,你现在脱光光了,css3就是穿漂亮衣服吧,之后还会学让她 拥有各种技能,表情之后再说。JavaScript就是类似于python的前端语言程序。话不多说,开始吧。

  • 首先准备:下载vscode,下载里面需要得“环境吧”,例如中英文切换的包,例如你输入字母a,他会根据你的字母提示你之后的字母的包,我这里安装的主要是auto rename tag ; chinese ; open in browser ; eslint ;在应用商店里搜索即可,方便以后运作。
  • 新建一个文件,必须以html为后缀,然后在第一行输入!进入环境。在这个环境里你会发现head,body,我们之后用的html 5在body中运作,css3在head运行。JavaScript在body写。

ev0065

  • 在这里,当你下载了中文转换包之后,按照像word一样新建文件,新建文件夹啊种种操作很简单。标签都是一对一对出现。
  1. html5规则要记
  • head标签中的title标签:定义网页题目
  • style标签:定义元素样式,用于css3
  • script标签:定义脚本,jQuery中用
  • 以上这几个刚开始不用太了解,先熟悉熟悉就行了
  • body标签才是我们刚开始学html5的基地
  • 如果你想注释一行代码,ctrl+?这个键
  • 如果你想注释一堆代码,ctrl+shift+?这个键
  • 注释就是写的东西不其效果了,但是同时也可以让你记住注意一些东西
  1. 段落与文字
  • 标题标签:<h1>~<h6>,比如随便在网页上打开一篇文章,文章肯定有大标题,小标题,这种粗细大小不同的设定其实就是标题标签给的,从1到6,重要性在减退,h1最重要。字体最大。

ev00065

  • 段落标签:<p>,用来定义一段文字,段落标签会自动换行。段落之间有一定的空隙。
  • 换行标签:<br>,随意换行,但是换行之后没有空隙。换行标签单独出现
  • 文本格式化标签:<strong>,加粗文字/<em>斜体标签/<sub>下标标签/<sup>上标标签/<s>删除标签/<u>下划线标签
  • 水平线标签:<hr>单标签
  • div标签:块元素,可以囊括很多
  • &nbsp标签:空格。一般p标签不会空格
  • 单独出现的标签:<br>.<input>.<img>.<hr>.<base>etc,他们单独出现,只能定义自己的属性,没办法插入其他标签
  • 现在对这些标签(元素)进行分类,会发现有些在浏览器显示的时候,是自己独占一行的,而有些事可以出现在同一行的,自己霸占独自一行的是块元素,比如div,h1-h6 ,p,hr ,ul,ol等。他们可以包容其他元素,但是必须自己独自占一行。行内元素与之相反,可以共存,strong,em,span,img,input等
  1. 图像
  • 在存图片时,会用到相对路径,绝对路径。一般我们都是用相对路径。在同一级即可显示,在同一个文件夹之下,直接写图片命名。如果不在同一个文件,根据在文件夹的顺序写下去。但是偶尔也用到绝对路径,一般的网络地址就是绝对路径。可以直接拖拽图片,生成路径
  • 图像标签:img。标签的常用属性有三个:src,alt,title。src通常用来说明图像地址,alt,图片显示不出来时提示的文字。title,鼠标移到图片上显示的文字。
  • <img src="图片地址" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">JPG可以很好处理大面积色调的图像,如相片、网页一般的图片。PNG格式图片体积小,而且无损压缩,能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。GIF格式图片图像效果很差,但是可以制作动画。
  • PG可以很好处理大面积色调的图像,如相片、网页一般的图片。PNG格式图片体积小,而且无损压缩,能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。GIF格式图片图像效果很差,但是可以制作动画。
  1. 超链接:
  • 网页之间的相互联系,通过连接的方式。主要分为外部,内部,空,下载,锚点链接。
  • (外部标签)a标签表示一个超链接的标签,点击一下,就到了地址
<a href="链接地址">超链接文字</a
  •  a标签的属性,target:打开这个链接的方式,主要用到是_self和_blank。self在当前窗口打开,blank在另一个空白网页打开。
  •  内部链接的链接对象在同一个网站内,几个网站都在同一个网站内
  • 锚点链接:点击某个链接可以快速定位到页面中某个位置,方便查看。目标地址写:id=“小土豆”。超链接的那部分写:<a href =”#小土豆”>,这样就形成一个体系。一一对应。
  1. 列表
  • 列表是数据排列方式,分为有序列表,无序列表,自定义列表
  • 有序列表:预览效果是按照1,2,3…排序。实际用的特别少
<ol>
    <li>有序列表项</li>
    <li>有序列表项</li>
    <li>有序列表项</li>
</ol>
  •  无序列表:默认效果是黑点。ul中元素的子元素只能是li,ul内部的文本也只能在li元素添加,不能再li元素外部添加。要不直接加在最外部。超级重要。
<ul>
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>
  • 自定义列表:是用来解释说明某个名词。
<dl>
    <dt>定义名词</dt>
    <dd>定义描述</dd>
    ……
</dl>
  • 我们学习HTML不是仅仅看自己学了多少标签,更重要的是在你需要的地方能不能用到对的语义化标签。把标签用在对的地方。不能说都用div就可以解决问题。
  1. 表格(用的很少)
  • <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
    </table>
  • 以上的是最基本的结构,默认情况下表格没有边框。表头如果需要加粗的话,把第一行的td换成th。
  • <thead>、<tbody>和<tfoot>这三个标签也是表格中非常重要的标签,它在语义上区分了表头、表身、表脚。用来予以划分,逻辑更加清晰。
表格结构
标签 说明
table 表格
caption 标题
thead 表头(语义划分)
tbody 表身(语义划分)
tfoot 表尾(语义划分)
tr
th 表头单元格
td 表格单元格
  • 合并单元格:先确定跨行还是跨列?确定目标单元格;删除多余单元格
  • 跨行是rowspan,跨列是colspan。确定目标的时候,靠上,靠左。
  1. 表单
  • 表单是进行动态交互的第一步,比如说问卷调查之类的,用户往进去输信息。表单最大标签<form>,中间装着表单里所有的相关元素。form的属性有action,后面跟着的是相连接的后台地址;method,以什么的方式,其中包含get和post,get传送到指定URL,post会隐藏数据信息,安全性好;name,提交的名字。
  • 表单对象就是form里包含的内部标签。分为input,textarea,select,option
  • input中的type的属性值:

ev0000065

  • text文本框自带的属性:
<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>
  • password密码自带属性
<input type="password" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>
  • radio自带属性(同一个问题的不同选项必须设置相同的name值,不然不能实现选一个)
<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值"/>
  • checkbox是复选框,可以实现多选。
<input type="checkbox" value="复选框取值" checked="checked"/>
  • checked属性表示该选项在默认情况下已经被选中。不像单选按钮,对于复选框,一个选项列表中可以有多个复选框被选中。复选框是没有文本的,需要加入label标签,并且用label标签的for属性指向复选框的id。复选框是checkbox必须和label标签配合使用的。
  • 按钮:普通按钮button、提交按钮submit、重置按钮reset
  • 普通按钮:button
<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
  • 提交按钮:submit 
<input type="submit" value="提交按钮的取值"/>
  • 重置按钮:reset
<input type="reset" value="重置按钮的取值"/>
  • 重置按钮只能清除“当前所在form标签”内的表单元素内容,对当前所在form标签之外的表单元素无效。
  • 图片域image(不用)
<input type="image" src="图像的路径"/>
  • 多行文本框textarea
<textarea rows="行数" cols="列数">多行文本框内容</textarea>
  • 文本框有3种形式:单行文本框text、密码文本框password和多行文本框textarea。单行文本框和密码文本框使用的是input标签,而多行文本框使用的是textarea标签
  • 下拉列表相当于无序列表一样。由<select>和<option>这2个标签配合使用。select标签属性:multiple和size。默认下拉列表只能选一项。通过这两个属性值改变。
<select>
    <option>选项显示的内容</option>
    ……
    <option>选项显示的内容</option>
</select>
  • 表单按钮和button标签的区别。表单按钮使用的是<input>标签,而<input>标签是自闭合标签,这是因为它没有结束符号。从自闭合标签的特点我们知道,表单按钮是没有办法插入其他内容的。<button>标签可以插入文本或者其他标签,并且<button>与</button>标签之间的所有内容都是按钮的内容

以上就是今天先总结的一部分知识了。害还挺累的,不过好像不是很难哦嘿嘿

《HTML5+CSS3网页布局和样式精粹》.(张亚飞).[PDF]&ckook

链接:https://pan.baidu.com/s/13QFDWQXnGHzCj50nF4jJ2Q
提取码:1qy4
复制这段内容后打开百度网盘手机App,操作更方便哦

转载请注明:XAMPP中文组官网 » 《HTML5+CSS3网页布局和样式精粹》前端书籍下载

您必须 登录 才能发表评论!