html文本添加超链接就换行,HTML - SegmentFault 思否

HTML概述

1、什么是HTMLHTML(超文本标记语言)

超文本：超级文本(文本、图片、视频、音频等)

标记(标签/元素/节点)：就是由尖括号括起来的一组内容

等

就是用于开发网页的最基础的语言

关于HTML需要注意的是:

1) 通过HTML开发的网页文件通常是以 .htm 或 .html为后缀

2) 通过HTML开发的网页文件由浏览器负责解析并显示

3) HTML本质就是一个文档(txt,word,html,ppt)

2、HTML结构 -- 文档声明,用于声明当前文档是一个html格式的网页,并且版本就是5.0

-- 根标签,用于包裹所有的网页内容(不包括文档声明)

-- 指定网页的编码,浏览器会根据这个编码解析这个网页

-- 指定网页的标题 -- 体部分, 用于包裹所有的可视化内容

3、HTML语法

3.1.html标签标记(标签/元素/节点)：就是由尖括号括起来的一组内容

等

标签由开始标签(

)和结束标签()组成, 开始和结束标签之间可以包含其他的内容。

有些标签中间没有内容要包裹，可以写成自闭标签，例如：

---

等

3.2.html属性

1) 属性必须要声明在标签上,不能独立存在

2) 属性可以声明多个,多个属性之间可以用空格隔开

3) 属性的值可以使用双引号或者单引号引起来.

3.3.注释html/xml注释:

html注释中包裹的内容,浏览器不会解析,更不会显示!

java注释: (1)为代码添加解释说明 (2)将一些暂时不需要执行的代码注释

3.4.空格和换行在html中,多个连续的空白字符(空格/换行/制表符)会被解析成一个空格来显示

如果要实现多个空格,可以使用  或  

如果要做换行,可以使用
标签;

四、HTML标签

1、图像标签

通过img标签可以在网页中插入一幅图像

其中src用于指定图片的路径,图片可以在本地,也可以在网络中

width用于指定图片的宽度

height用于指定图片的高度

./: 表示当前目录,也就是当前文件的所在目录

../: 表示上一级目录,也就是当前目录的上一级目录

另外,不要写带盘符的绝对路径,因为换一个发布环境,图片很可能加载不出来

( )

2、超链接标签a标签可以在网页中创建一个超链接

超链接: 点击超链接后可以跳转到另外一个地址(网页/图片/下载地址)

百度一下

其中href用于指定点击超链接后,将会跳转到哪里

target用于指定以何种方式打开超链接

_self: 指在当前窗口打开超链接

_blank: 在新窗口中打开超链接

3、表格标签表格标签不是一个标签,而是一组标签

table: 定义一个表格

tr(table row): 定义表格中的行

td(table data cell): 定义表格中的单元格

th(table head cell): 定义表头中的单元格(里面的文本默认会加粗和居中)

案例: 写一个网页,在网页中实现一个 3*3 的表格

h1~h6: 6个标题标签, 从h1~h6字号依次变小

-------------------------------------

border:2px solid red; /* 设置边框的宽度、样式、颜色 */

border-collapse: collapse; /* 设置表格边框合并(重叠) */

padding:5px; /* 设置边框和内容之间的间距 */

text-align:center; /* 设置元素内容居中 */

font-weight:bolder; /* 设置字体加粗 */

width:70%; /* 设置元素的宽度 */

background:pink; /* 设置背景颜色 */

margin-left: auto; /* 设置元素的左外边距 */

margin-right: auto; /* 设置元素的右外边距 */

4、表单标签

action指定表单的提交地址

form标签的作用是向服务器提交数据,除了form之外,超链接也可以向服务器提交数据

例如: http://www.baidu.com?user=zhangsan&psw=123

百度

不管是通过form表单还是通过超链接,只要是发送给服务器的数据,我们都称之为是请求参数(包括参数名和参数值,参数名=参数值)

5、表单项标签

5.1.input1)文本输入框(用户名,邮箱,手机,验证码等)

2)密码输入框(密码,确认密码)

3)单选框(性别,部门,单项选择)

4)复选框/多选框(爱好,岗位)

5)按钮/提交按钮

提交按钮作用: 用于提交表单中的数据到action指定的地址(服务器地址)

普通按钮: 没有功能,但可以通过JS添加功能

5.2.select/optionselect: 用于定义一个下拉选框

option: 用于定义下拉选框中的选项

5.3.textarea: 定义一个多行的文本输入区域

cols:设置列数(宽度)

rows:设置行数(高度)

placeholder: 设置框中的提示信息

6、注册表单页面代码略

7、注册表单中的问题:

7.1.name属性的作用在表单(form)中的所有表单项,只要这个表单项将来需要提交数据给服务器,每一个表单项都需要指定name属性. 如果不指定,在提交时,该项就会被忽略(数据也就不会提交)!!

7.2.单选框变成多选的问题如果多个单选框的name属性的值不相同,这个多个单选框就可以实现多选.

男

女

如果多个单选框的name属性值相同,这个多个单选框就是一个组,一个组中的单选框就只能选一个(所以单选框的name属性值得相同)

7.3.单选框和复选框提交的值为on的问题单选框和复选框,如果不指定value,在选择某一项之后,提交的值都为on

可以通过value属性指定每一个单选框在被选中后所提交的值,例如:

男

女

7.4.如何设置某一个单选框或复选框默认被选中如果希望某一个单选框或复选框在页面打开后默认就被选中,可以在这个单选框或复选框上添加一个 checked 属性(不用指定值)即可!

男

足球

7.5.如何设置某一个option选项默认被选中select下拉选中的选项默认是选中第一项

可以通过在option标签上添加一个selected属性,将当前option设置为默认选中

7.6.option标签上的value属性的值有什么作用?北京

上海

广州

深圳

如果option上没有指定value属性,在该option被选中后,会将option中的文本提交到服务器

如果option上指定了value属性,在该option被选中后,会讲value值提交到服务器!

因此,当我们option上显示的文本和提交的值不相同时,需要添加value属性!

五、CSS概述

1、什么是cSSCSS: 层叠样式表, 是用于渲染、美化网页的一门语言

通过CSS美化网页，可以将设置样式的CSS代码和展示数据的HTML代码进行分离，可以增强网页的展示能力。

2、如何引入CSS

2.0.div、span、p元素div、span、p标签就是三个容器标签，本身不具有特殊的效果

通常用于包裹其它的内容(其它标签或文本)

Hello CGB2008!

-----------------------------------------------------

div/p标签: 是块级元素,默认独占一行

例如:h1~h6,table,form,div,p,hr等

块级元素可以设置宽高

span标签: 是行内元素,多个元素可以处在同一行(除非放不下)

例如:span,img,input,b,i等

行内元素不可以设置宽高(img/input都可以设置宽高,是行内块元素)

-----------------------------------------------------

2.1.引入CSS方式一在标签上添加一个style属性,在style属性内部,可以设置css样式,例如:

这是一个div...

当css代码特别多时,容易造成页面结构的混乱,而且代码无法复用，不利于后期的扩展和维护。这种方式不推荐使用!

2.2.引入CSS方式二在head标签内部添加一个style标签,在style标签内部可以添加CSS样式.

这种方式没有把css样式代码直接写在标签上,而是写在一个style标签内部统一管理,不会造成页面代码的混乱. 而且这种方式实现了代码的复用!

不推荐大量使用!

/* ****** CSS样式 ****** */

span{ /* 选中所有的span元素 */

border: 2px solid green;

font-size: 30px;

font-weight: bolder;

}

2.2.引入CSS方式三将所有的CSS代码写在一个 xxx.css 文件中,在需要使用这些样式的html中, 引入这个css文件即可!

这种方式是将所有的css代码放在一个css文件中统一进行管理,没有造成页面结构的混乱,也实现了代码的复用.

真正的实现了将css代码和html代码进行分离!

六、CSS选择器选择器：是帮我们在HTML中选中元素进行修饰的一门技术

1、元素名选择器：根据元素的名称选中指定名称的所有元素,例如:

span{} -- 选中所有的span元素

div{} -- 选中的所有的div元素

格式: 元素名{ css属性... }

2、class选择器：通过元素上通用的属性class,可以为元素设置所属的分组

class值相同的则为一组,例如:

span111

span222

span333

div444

可以通过class值选中这一组的元素,例如:

.s1{} -- 选中所有class值为s1的元素

span.s1{} -- 选中所有class值为s1的span元素

div.s1{} -- 选中所有class值为s1的div元素

另外,一个标签的class属性可以设置多个class值,表示这个元素同时属于多个分组。多个分组的样式会同时作用在这个元素上。

span111

如果s1给span设置背景为red, s2给span设置背景为blue, span最终的背景颜色是什么?

如果是同一类选择器，浏览器会根据先后顺序，按照选择器所写的位置，上面的会被下面的覆盖。

如果不是同一类选择器，优先级顺序是：

id选择器(100)>class选择器(10)>元素名选择器(1)

3、ID选择器：通过元素上通用的属性id,可以给元素设置一个独一无二的编号

通过id值可以唯一的定位到这个元素,例如:

#div1{} -- 选中id值为div1的元素

格式: #id值{ css属性... }

4、后代选择器：在一个元素内部的所有元素都称之为这个元素的后代元素

可以在选中的某些元素中, 选择指定的后代元素,例如:

div span{} -- 选择所有div内部的span元素

p img{} -- 选择所有p元素内部的img元素

格式: 祖先选择器 后代选择器{ css属性... }

5、属性选择器：通过元素的属性条件可以匹配元素

格式: 选择器[属性条件1][属性条件2]..{ css属性... }

例如:

选择所有的复选框: input[type="checkbox"]{...}

选择所有的单选框: input[type="radio"]{}