1、<img>标签
-并不会在网页中插入图像,而是从网页上链接图像,创建的是被引用图像的占位空间。
-src属性:是必需的。它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。
-alt属性:值为图像的替代文本
2、
-报错1:
原因:<img>标签路径写法错误
错误写法:<img src="\images\silver.png" alt="">
正确写法:<img src="images/silver.png" alt="">
参考:html路径写法
-不懂1:在有无序列表中插入超链接
错误写法:<li><a href="D:/VStasks/001.html"></a>Homepage</li>
正确写法:<li><a href=""https://github.com/77HzAlreadyTaken">Blog</a></li>
总结:文本应写在<a>标签中,而不是<li>标签中。
3、<table summary="****">: 摘要
-摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
-<caption>标题文本</caption>:标题,位于table标签下。
<table>
<caption>标题文本</caption>
<tr>
4、<a>标签
-语法:<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
-title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)
-target="_blank"属性:将链接的网页从新的浏览器窗口中打开,<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开。
-mailto:mailto能让访问者便捷向网站管理者发送电子邮件
点击链接即会打开电子邮件应用,并自动填写收件人等设置好的信息。
5、<form>表单:使用表单让网站与用户产生交互动作。
-表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
-语法:<form method="数据的传送方式(get/post)" action="服务器文件(浏览者输入的数据被传送到的地方)"> </form>
-所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间,否则用户输入的信息不能提交到服务器。
6、<input>输入框:
-语法:<input type="text/password"(文本/密码) name="名称(为文本框命名,以备后台程序ASP 、PHP使用)" value="文本" (为文本输入框设置默认值,起到提示作用)/>
7、<textarea>文本域(大段文字):
-语法:<textarea rows="行数" cols="列数">文本域中显示的默认值</textarea>
-其中col用width、row用height来代替。(CSS)
8、单选框、复选框
-语法:<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
-type:
当 type="radio" 时,控件为单选框;
当 type="checkbox" 时,控件为复选框;
-value:提交数据到服务器的值(后台程序PHP使用)
-name:为控件命名,以备后台程序 ASP、PHP 使用,同一组的单选按钮,name 取值一定要一致,才能起到单选的效果。
-checked:当设置 checked="checked" 时,该选项被默认选中。
9、下拉列表框-单选
-语法:
<select>
<option value="提交值" selected="selected">显示的选项值</option>
</select>
-value:向服务器端提交的选项值;
-selected="selected"属性,则该选项就被默认选中
10、下拉列表框-多选:<select multiple="multiple">
-在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。
11、提交按钮:type="submit"
-在表单中有两种按钮可以使用,分别为:提交按钮、重置。当用户需要提交表单信息到服务器时,需要用到提交按钮。
-语法:<input type="submit" value="提交(按钮上显示的文字)">
12、重置按钮: type="reset"
-当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。
-语法:<input type="reset" value="重置">
13、<form>-<lable>标签
-label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。
-在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和label标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
-语法:<label for="(input)控件id名称"> </lable>
-for 属性:属性值应当与相关控件(如input)的 id 属性值一定相同。
CSS
-CSS全称为“层叠样式表 (Cascading Style Sheets)”,用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等,通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
-语法:css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:
-选择符:又称选择器,指明网页中要应用样式规则的元素,只对该选择器进行样式变化,其他的元素不会受到影响。
-声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”及回车换行分隔,如下所示:
p{
font-size:12px;
color:red;
}
-CSS注释:/注释语句/
14、CSS样式代码声明方法:内联式、嵌入式和外联(外部)式
-内联式:将css代码直接写在现有的HTML标签中的开始标签中,如
<p style="color:red;font-weight:blod">这里文字是红色。</p>
-需写在 style=" **** " 中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。
-嵌入式:必须写在<style> </style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。
<style type="text/css"> /type为text/css/
span{
color:red; //按照 选择器 声明{属性:值;}语法
}
</style>
-外联式:
css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内。
语法:
<link href="***.css" rel="stylesheet" type="text/css" />
其中:.css的名称须有意义;rel、type属性值为固定写法。
-方法优先级:内联式 > 嵌入式 > 外部式
优先级总结是有一个前提:内联式、嵌入式、外联式样式表中css样式是在相同【权值】的情况下。
其中,嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。<link href="style.css" ...>代码在前,<style type="text/css">...</style>在后(实际开发中也是这么写的)。遵循就近原则(离被设置元素越近优先级别越高)。
选择器
1、【标签】选择器:
html代码中的标签。如<html>、<body>、<h1>、<p>、<img>等
语法:直接写标签名带上{}即可。
标签{
属性:值;
}
结束花括号与下一个选择器之间无符号。
-不懂2:border属性值写法
错误写法:border:red;
正确写法:border:red solid;
总结:solid为border-style的值,意为实线,需要设置边框才会显示样式。border-style:dotted(上点) solid(右实) double(下双) dashed(左虚);